vue中Echarts动态数据

前言：

在真正的开发中，我们使用的数据都是从后端获取过来的，有时候还需要做到实时刷新，今天我也遇到这种问题了，做个总结。

方法一：通过computed

computed: {
    options() {
      let that = this;
      let option = {
          tooltip : {
            trigger: 'axis',
            formatter: function(item) {
              return `支付金额 ${item[0].value}元`
            }
          },
          legend: {
            formatter: function(item){
              return `${item}: ${that.priceData.todayPrice}`
            }
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: {
              type: 'category',
              boundaryGap: false,
              data: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24]
          },
          yAxis: {
              type: 'value',
              splitLine: { //网格线
                show: false
              }
          },
          series: [{
              data: that.priceData.timePriceRange,
              type: 'line',
              smooth: true,
              name: '支付金额',
              itemStyle : {
								normal : {
                  color: '#13CE66',
									lineStyle:{
										color:'#13CE66'
									}
								}
							}
          }]
      }
      return option;
    }
  },
//初始化
initEcharts(){
      let  myChart = Echarts.init(this.$refs.chart);
      myChart.setOption(this.options);
    }
 // 修改完配置后一定要重新调用initEcharts函数，比如在请求接口调用完成之后，变量赋值完成之后，再调用initEcharts函数

2.在data中定义option,通过在初始化之前，直接改变option对应属性值

//在data中定义option
initEcharts(){
      this.option.yAxis[1].max = this.maxRate;
      this.option.xAxis.data = this.dateList;
      this.option.series[0].data = this.payPriceTrendList;
      let  myChart = Echarts.init(this.$refs.chart);
      myChart.setOption(this.option);
    }

切记，数据变化后需要再次调init方法刷线图表