分享：Vue3中如何使用echarts工具开发可视化图表

2025/5/4 2:56:37 来源：https://blog.csdn.net/m0_67412019/article/details/140830968 浏览: 次关键词：分享：Vue3中如何使用echarts工具开发可视化图表

官方链接

图形示例点此进入

配置项文档点此进入

导入

import * as echarts from 'echarts'

页面

注意设置宽和高，否则渲染不出来！

<div id = 'vdrBarChart' style="height: 300px;width: 500px;"></div>

调用

//DOM 更新完成后，延时100ms执行setBarChart方法this.$nextTick(() => {setTimeout(() => {this.setBarChart()}, 100)})

【具体方法实现】

setBarChart(){this.MyChart = echarts.init(document.getElementById('xxxx'))//通过id获取DOM元素，初始化后得到一个ECharts 实例对象var option//复制黏贴你的代码（设置好数据）//将数据绑定到标签上this.MyChart.setOption(option, true)
}