Vue动态刷新Echarts数据

不知道什么是Echarts可以查看这篇文章入门：https://www.lzmvlog.top/archives/vue使用echarts做图表

实践中发现如果在create、mounted方法中请求接口进行数据传递设置，是不能生效的。

所以需要使用watch方法对需要赋值的数据进行监听赋值

代码语言：javascript复制

export default {
  props: ['chartsData'],
  watch: {
    chartsData: function () {
      // 防止出现 There is a chart instance already initialized onthe dom! 警告
      if (document.getElementById('myChart') == null) {
        return
      }
      let echarts = require('echarts')
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('myChart'), null, {
        height: 160
      });
      // 绘制图表
      myChart.setOption({
        title: {
          text: '设备在线情况',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: '',
          left: ''
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '50%',
            data: this.chartsData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
    },
  },
}

echarts watch 入门 实践 图表

0 人点赞