Vue使用Echarts——Ajax异步获取数据赋值给Echarts

我们在实际开发的过程中，经常使用到动态的数据来给到Echarts赋值，本贴就来描述在Vue中如何给Echarts赋值。

如下图所示，数据是动态生成的。

lineOption: {
        title: {
          text: '工业产值统计环比图'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            },
          }
        },
        //去除边距
        grid:{
          bottom:"30px"
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            saveAsImage: { show: true }
          },
        },

        legend: {
          data: ['产值（千元）', '环比上一个月比值 %']
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisPointer: {
              type: 'shadow',
            },
            axisLabel: {
              formatter: '{value}月'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '产值（千元）',
            axisLabel: {
              formatter: '{value} 千元'
            }
          },
          {
            type: 'value',
            name: '比值 %',

            axisLabel: {
              formatter: '{value} %'
            }
          }
        ],
        series: [
          {
            name: '产值（千元）',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + '千元';
              }
            },
            data: [],
          },
          {
            name: '环比上一个月比值 %',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + '%';
              },
            },
            formatter: '{value} %',
            data: [],
          }
        ]
      },

其中我们进行数据赋值的大部分都是data数组所以我们查询的结果也要是类似的数组

方法一：在data后面跟上有数据的数组（在vue的动态数据中可能会失效）,因为vue存在对数组的监听，二者会导致我们不能直接赋值

 {
            name: '环比上一个月比值 %',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + '%';
              },
            },
            formatter: '{value} %',
            data: this.redData.rateDate,
          }

**方法二：**在ajax查询到数据的时候，给echart赋值，如下面展示的代码一样

 this.axios({
        method: "POST",
        url: "你的请求地址",
        data:{},//你的请求参数，没有就不写
      }).then((res) => {
        let code = res.data.code;
        if (code == 200) {
          //给echart折线图/饼图赋值
          //环比图相关
          this.lineOption.series[0].data = res.data.data.outputValueCountThisYear.data;
          this.lineOption.xAxis[0].data = res.data.data.outputValueCountThisYear.Month;
          this.lineOption.series[1].data = res.data.data.yearOverYearRate;
        }
      }).catch((error) => {
        console.log(error);
      });

注意，ehcart的赋值，要精确的找到对应的待赋值的内容。

this.lineOption.series[0].data = res.data.data.outputValueCountThisYear.data;

由于，该项目是在vue的基础上，前文也提到了，有关echarts的属性内容是卸载vue的data的return内的，所以通过this.名字可以获取，后面的series[0].data表示series属性的第一个元素的data属性。

**弊端：**采用这样赋值的方式，可以把我们获取的数据，给到echarts，都是如果使用了，echarts自带的restore刷新数据的时候，会把动态生成的数据变成一开始echarts初始化的数据。

这样的原因是因为，我们要么在页面刷新的时候，或者动态生成的时候，才会调用ajax来获取数据，并且赋值给echarts，使用官方的echarts的时候，echarts初始化了，变成了原来默认（静态）的数据，就会是一片空白（如果你的默认数据是空的话）

解决思路：隐藏官方提供的restore按钮，自己重写一个刷新图表的icon图表，即可

 toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          //restore: { show: true },
              
          saveAsImage: { show: true },
              myTool1: {
              show: true,
              title: "还原",
              icon:
                  "path://M512 981.333333c-209.866667 0-396.693333-126.026667-466.293333-314.08a35.52 35.52 0 0 1 23.626666-44.426666 38.613333 38.613333 0 0 1 48 20.693333c58.666667 158.933333 217.013333 265.493333 394.666667 265.6s336-106.666667 394.666667-266.133333a37.6 37.6 0 0 1 28.853333-23.626667 38.986667 38.986667 0 0 1 35.786667 11.946667 34.773333 34.773333 0 0 1 7.146666 35.36c-69.386667 188.373333-256.48 314.666667-466.453333 314.666666z m431.36-574.08a37.92 37.92 0 0 1-35.946667-24.266666C849.386667 222.56 690.613333 114.88 512 114.72S174.72 222.346667 116.746667 382.773333A38.72 38.72 0 0 1 69.333333 403.733333a35.786667 35.786667 0 0 1-24.106666-44.373333C113.333333 169.866667 301.013333 42.666667 512 42.666667s398.666667 127.306667 467.146667 316.96a34.56 34.56 0 0 1-4.906667 32.64 38.933333 38.933333 0 0 1-30.88 14.986666z",
              onclick: () => {
                this.generateChart();//调用你的图表数据获取函数
              },
            },
        }
      },