Vue3 Element-UI中使用ECharts（前端数据展示开发）
前端数据展示（数据可视化、数据大屏等）可使用的工具比较多，很多第三方都提供了在线平台，比如阿里云，只需数据接口，在线配置一下界面即可使用。
- 阿里云的使用：利用阿里云物联网平台（IoT）实现WEB数据可视化
- 第三方平台对比：有哪些免费简单的数据展示（数据可视化）网站
也可以使用开源代码自己开发前端，本文所介绍的就是
ECharts的开发，这是一款基于JavaScript 的开源可视化图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
- 官方网站：https://echarts.apache.org/zh/index.html
- 官方示例：https://echarts.apache.org/examples/zh/index.html
- 官方指南：https://echarts.apache.org/handbook/zh/get-started/
注意，本文是在Vue3版本下的Element-UI中使用，ECharts官网打开较慢，可尝试翻越。
安装
npm install echarts --save 调用
创建一个*.vue页面，实现方法如下三种。
1. 本页数据
修改官方代码：https://echarts.apache.org/handbook/zh/basics/import
2. 调用数据
修改官方的线性图示例图代码，修改为线性和柱状混合展示图
https://echarts.apache.org/examples/zh/editor.html?c=data-transform-filter&lang=js
另需准备一个json文件，下载自官网：https://echarts.apache.org/examples/data/asset/data/life-expectancy-table.json
本例中将文件放于根目录，本例中路径为：http://localhost/life-expectancy-table.json
展示图
- 可以顺便学习一下vue3中 nextTick 的具体用法。
3. 异步调用
还是上面的例子（实现略有不同），setInterval()中原有的run()函数改为了getOpt()函数，主要用来学习axios如何返回值~~
学习：获取axios的return值
4. 多表同时
结合两种不同的图标放在一个页面，其中新增一种表为：
https://echarts.apache.org/examples/zh/editor.html?c=gauge-ring
参考：
Vue Element UI 之ECharts图表
Echarts 在vue3x中使用（包括动态数据变化）
优化了三年经验者的Echarts卡顿
关于vue+elementui 访问本地json和跨域访问API问题
Vue3+ElementPlus+Axios实现从后端请求数据并渲染
Vue3中的Methods用法介绍
Vue3中你应该知道的setup！
