Echarts在vue中的使用以下是在vue中开发使用的场景

112 阅读 0 评论 74 点赞

我是靠谱客的博主秀丽大炮，这篇文章主要介绍Echarts在vue中的使用以下是在vue中开发使用的场景，现在分享给大家，希望可以做个参考。

以下是在vue中开发使用的场景

必要的从npm下载echarts

复制代码

1
npm install echarts --save

其次引入全局中

1.开始的时候需要准备一个div，就是所说的对dom容器

复制代码

1
<div class="Iots"></div>

2.在我们echarts官方文档中找到自己所需的图表，然后复制到methods生命周期里，（如需调用接口本人建议的方法时给图表代码外封一层函数，然后在mounted里面调用，这样请求下来的数据可以直接通过调用携带数据）

3.之后在我们可以通过echarts.init 方法初始化一个 echarts 实例

4.最后setOption 方法生成图表（以下是官方示例）

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
mounted(){
this.queryData()
},
methods:{
queryData(){
let myChart = echarts.init(document.getElementById('dom容器'));
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
myChart.setOption(option);
}
}