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

我是苏苏

已于 2024-08-01 19:57:30 修改

阅读量165

点赞数 7

文章标签： echarts javascript 前端

于 2024-07-31 19:45:10 首次发布

本文链接：https://blog.csdn.net/m0_67412019/article/details/140830968

版权

官方链接

图形示例点此进入

配置项文档点此进入

导入

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.barChart1 = echarts.init(document.getElementById('vdrBarChart'))//通过id获取DOM元素，初始化后得到一个ECharts 实例对象
 var option;

 //复制黏贴你的代码（设置好数据）

 //将数据绑定到标签上
 this.barChart1.setOption(option, true)
}