vue中Echarts动态数据

最新推荐文章于 2024-07-18 13:56:07 发布

编程小橘子

最新推荐文章于 2024-07-18 13:56:07 发布

阅读量8.9k

点赞数 4

分类专栏： ui框架和插件文章标签： vue.js

本文链接：https://blog.csdn.net/qq_43353619/article/details/115733591

版权

ui框架和插件专栏收录该内容

9 篇文章 1 订阅

订阅专栏

本文总结了在实际开发中如何使用Echarts处理从后端获取的实时数据，实现图表的刷新。方法包括通过computed属性动态生成图表配置，并在数据变化后调用initEcharts方法刷新图表，以及直接修改预定义的option属性值后再调用setOption刷新。重点在于数据更新后必须重新初始化图表以更新视图。

摘要由CSDN通过智能技术生成

前言：

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

方法一：通过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);
    }