vue使用echarts图表

啊巳~

于 2021-04-12 16:29:49 发布

阅读量115

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_38797742/article/details/115627965

vue 专栏收录该内容

23 篇文章

订阅专栏

这篇博客介绍了如何在项目中安装和使用ECharts库来创建图表。首先，通过npm安装ECharts；接着，引入库到项目中；然后，在HTML中设置一个div作为图表容器；最后，在mounted生命周期钩子中调用方法，使用ECharts提供的示例代码初始化图表，只需修改容器ID和数据即可快速生成图表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

https://www.jianshu.com/p/2894b781063b

1、安装

npm install echarts
// npm install echarts --save

2、引入 echarts

import * as echarts from 'echarts';

3、写一个div容器用来承载图表:

<div  id="teamLeader"></div>

4、写一个方法，（直接复制粘贴官网文档的代码m修改一下容器id和各部分的数值即可）初始化页面的时候,调用一下这个方法即可。

mounted() {
  this.getTeamLeader()
},
methods: {
  getTeamLeader(){
    // 方法里面直接复制图表的js代码，修改对应的id值就可以
    var myChart = echarts.init(document.getElementById('teamLeader'));
    myChart.setOption({