前言:

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

方法一:通过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方法刷线图表

Logo

前往低代码交流专区

更多推荐