1.安装echarts依赖 npm install echarts --save
2.在main.js中全局中引用
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
3.在你需要用到echart的地方先设置一个div的id、宽高，
例子：
<div id="chart-part1" style="width:100%;height:376px"></div>
然后我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中。
mounted(){this.getEchartData1()
},methods: {
getEchartData1 () {
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 决定自己的图表类型）组成。例子如下图所示：
具体需要修改哪一项的属性可以再官方配置项里面查找https://www.echartsjs.com/option.html#title
以后我这边也会贴出一些常见的属性更改。