Vue-ECharts

9,062 阅读1分钟

总结一下Vue中如何使用ECharts。

一、使用Vue-cli脚手架搭建项目

1、先全局安装Vue:yarn add vue -g

2、然后全局安装Vue-cli:yarn add @vue/cli -g

3、使用脚手架初始化项目:vue create projname

二、项目中使用ECharts

1、安装ECharts:yarn add echarts

2、新建一个Vue组件,如下:

3、项目中引入echarts:import echarts from "echarts"

4、在methods中定义绘制图表的方法drawLine,如下:

5、在mounted钩子中调用绘制的方法,如下:

6、在App.vue中将Echarts组件引入,如下:

这样就完成了一个Vue项目中使用ECharts来实现数据可视化。 下面是最终完成的结果。