在vue项目中使用ECharts

1，ECharts是非常强大的工具，多强大可以去它的官网体验下https://www.echartsjs.com/

2，在vue项目中使用ECharts。

创建好vue项目后，下载ECharts：

npm install echarts --save

install

下载成功后开始使用

2-1，在main.js中添加

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

vue引入'echarts时是通过在vue原型上添加一个新的属性，即Vue.prototype.$echarts = echarts 这样使用。

2-2，在组建中使用

---

---

为什么要在mounted中初始化echrats?我们需要整个视图都渲染完毕之后开始初始化

至于为什么要这么写可以参考vue.js中的 this.$nextTick（）和mounted的介绍

然后在methods的  this.drawPie()中通过this.$echarts.init在id为'vital的dom里创建一个echart实例，记住不能在单个容器上初始化多个 ECharts 实例。

再通过 this.charts.setOption（）设置各个参数

上面的列子运行结果

7.31

这样就完成了在vue项目中使用ECharts。

当然ECharts提供了许多强大的图表类型可以使用，具体可以上https://www.echartsjs.com/examples/ 查看