如何在vue中使用echart

时间:2024-11-07 15:33:14

2019年10月23日进行更新,这里不再建议使用document.getElementById的方式获取元素的id,而是建议使用ref来代替。这样的话就会避免Echarts的图形容器还未生成就对其进行了初始化,产生如下的错误。

如何在vue中使用echart

1.安装echarts依赖   npm install echarts --save

2.在main.js中全局中引用

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

3.在你需要用到echart的地方先设置一个div的id、宽高,

例子:

<div ref="chart1" style="width:100%;height:376px"></div>

然后我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中。

mounted(){
this.getEchartData1()
},

  

methods: {
getEchartData1() {
const chart1 = this.$refs.chart1;
if (chart1) {
const myChart = this.$echarts.init(
document.getElementById("chart-part1")
);
const option = {};
myChart.setOption(option);
window.addEventListener("resize", function() {
myChart.resize();
});
}
}
}

 

其中const option = { }就是我们需要引进echart图表的代码,需要什么例子可以在官方例子https://www.echartsjs.com/examples/里面找。

注意!目前我遇到两个比较特殊的图表需要在main.js里面引入一下才能使用,一个是词云图,一个是盒须图。代码如下:

require('echarts-wordcloud')

require('echarts/dist/extension/dataTool.js')

Echarts常见的属性改变

通常一个Echarts图表通常由title(标题)、legend(图例)、grid(网格)xAxis(x轴)、yAxis(y轴)、dataZoom(区域缩放)tooltip(提示框组件)、toolbox(工具栏)、series(系列列表。每个系列通过 type 决定自己的图表类型)组成。例子如下图所示:

如何在vue中使用echart

具体需要修改哪一项的属性可以再官方配置项里面查找https://www.echartsjs.com/option.html#title

以后我这边也会贴出一些常见的属性更改。