在Vue中使用Echarts来实现（数据可视化）

一，Echarts

一个基于 JavaScript 的开源可视化图表库
Echarts官网 https://echarts.apache.org/zh/index.html

1.1 获取ECharts

（1）从 npm 获取（项目获取）

npm install echarts --save

（2）从 CDN 获取
推荐从 jsDelivr 引用 echarts。
（3）从 GitHub 获取
apache/echarts 项目的 release 页面可以找到各个版本的链接。点击下载页面下方 Assets 中的 Source code，解压后 dist 目录下的 echarts.js 即为包含完整 ECharts 功能的文件。

1.2 main.js引入Echarts

// 引入Echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

在Vue项目中，引入Echarts库后，运行项目，出现以下报错：

报错："export ‘default’ (imported as ‘echarts’) was not found in ‘echarts’

这是版本的问题，Echarts 5.x 不再支持上面的引入方式，这一点Echarts官网（升级指南）有说明。

把上面引用：import echarts from 'echarts'

改成：import * as echarts from 'echarts'

1.3 使用模板

1.4 实例

1.4.1 柱状图（折线图变换）

1.4.2 极坐标柱状图标签

文章到这里就结束了，这只是最基本的使用，深入的话自己可以去官网看看。