Vue动态刷新Echarts数据

是小张啊喂

发布于 2023-02-21 12:58:50

2.1K0

发布于 2023-02-21 12:58:50

文章被收录于专栏：软件

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

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

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

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)'
              }
            }
          }
        ]
      });
    },
  },
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-02-01，如有侵权请联系 cloudcommunity@tencent.com 删除

echarts