软件教程 2025年08月6日
0 收藏 0 点赞 944 浏览 858 个字
摘要 :

在使用vue绘制echarts图标后,想要动态更新图表data数据该怎么实现呢?如果你还不会Vue整合echarts可以参考:Vue整合echarts使用案例。接下来我们看下如何动态更新echart……

在使用vue绘制echarts图标后,想要动态更新图表data数据该怎么实现呢?如果你还不会Vue整合echarts可以参考:Vue整合echarts使用案例。接下来我们看下如何动态更新echarts图标数据。

其实想要更新图表data数据非常简单,只要更新option中的data属性就行,案例如下:

以下是一张饼图的初始化代码:

// vue data
data() {
    return {
      myChart: undefined,
      myOption: {},
    }
  },

// 挂载初始化
mounted() {
    this.myChart = echarts.init(this.$refs.djchart)
      this.myOption = {
        title: {
          text: \'demo\',
          subtext: \'demo占比\',
          left: \'center\'
        },
        tooltip: {
          trigger: \'item\'
        },
        legend: {
          orient: \'vertical\',
          left: \'left\'
        },
        series: [
          {
            name: \'叠件\',
            type: \'pie\',
            radius: \'50%\',
            data: this.stackChartData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: \'rgba(0, 0, 0, 0.5)\'
              }
            }
          }
        ]
      }
   this.myChart.setOption(this.myOption)
},

接着我们发请求获取动态数据然后更新到饼图的data,代码实现:

listMyPieChart(this.pieChartQuery).then(response => {
        // 主要就是这个设值
        this.myChart.setOption({
          series: [{
            data: response.data
          }]
        })
})

这样我们就可以实现动态更新echarts图标数据了,data改变后,图标也会自动重新绘制。

以上就是echarts如何动态更新图表data数据的全部内容,希望对你有帮助!

 

微信扫一扫

支付宝扫一扫

版权: 转载请注明出处:https://www.zuozi.net/6687.html

管理员

相关推荐
2025-08-06

文章目录 一、Promise基础回顾 二、Promise 与 axios 结合使用场景及方法 (一)直接返回 axios …

269
2025-08-06

文章目录 一、模块初始化时的内部机制 二、常见导出写法的差异分析 (一)写法一:module.exports…

107
2025-08-06

文章目录 一、ResizeObserver详解 (一)ResizeObserver是什么 (二)ResizeObserver的基本用法 …

683
2025-08-06

文章目录 一、前期准备工作 (一)下载相关文件 (二)安装必要工具 二、处理扣子空间生成的文件…

338
2025-08-06

文章目录 一、官方文档 二、自动解包的数据类型 ref对象:无需.value即可访问 reactive对象:保持…

371
2025-08-06

文章目录 一、Hooks的工作原理 二、在if语句中使用Hook会出什么岔子? 三、React官方的Hook使用规…

843
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:08:00-23:00

客服QQ

122325244

客服电话

400-888-8888

客服邮箱

122325244@qq.com

扫描二维码

关注微信客服号