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

必要的从npm下载echarts

npm install echarts --save

其次引入全局中

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

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

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

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

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

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);
}
}

注意！在以上官方示例初始化方法echarts.init中的document.getElementById 必须要用id命名也可以用querySelector这个无视id或者class，指定CSS选择器的第一个元素

最后

以上就是秀丽大炮为你收集整理的Echarts在vue中的使用以下是在vue中开发使用的场景的全部内容，希望文章能够帮你解决Echarts在vue中的使用以下是在vue中开发使用的场景所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。