vue-echarts 动态获取数据

要实现Vue-Echarts的动态数据绑定，可以按照以下步骤进行操作：

1. 首先，在main.js文件中引入echarts并将其注册为Vue的插件，以便全局使用。可以使用以下代码：

   import echarts from 'echarts'
   Vue.use(echarts)
   Vue.prototype.$echarts = echarts

2. 在组件中定义一个变量来存储动态数据，例如`data`属性中的`eacartsData`。

3. 在绘制echarts样式的方法中，使用`this.eacartsData`来设置数据，确保数据能够动态绑定到echarts图表上。

下面是一个示例代码，演示如何通过动态数据绑定实现echarts的动态数据显示：

<template>
  <div>
    <div id="echartsOne" style="width: 600px; height: 400px;"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      eacartsData: [] // 动态数据
    }
  },
  mounted() {
    this.getEcharts()
  },
  methods: {
    getEcharts() {
      var chartDom = document.getElementById('echartsOne')
      var myChart = this.$echarts.init(chartDom)
      var option

      option = {
        color: ['#5089bd', '#d36e2a', '#929292', '#e3aa00', '#3b65ae', '#63993e'],
        title: {
          text: '饼图使用动态数据',
          subtext: '',
          left: '50%',
          top: '4%'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: '2%',
          top: '34%'
        },
        grid: {
          left: '2%',
          right: '2%',
          bottom: '4%',
          top: '2%',
          containLabel: true
        },
        series: [
          {
            name: '饼图使用动态数据',
            type: 'pie',
            radius: '90%',
            top: '20%',
            left: '20%',
            data: this.eacartsData, // 动态数据绑定到饼图
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 12,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      option && myChart.setOption(option)
    }
  }
}
</script>