Vue使用Echarts实现数据可视化的方法详解 Vue使用Echarts实现数据可视化的

一，Echarts

1.1 获取ECharts
1.2 引入 ECharts

二，Vue使用Echarts

2.1 Vue环境
2.2 main.js引入Echarts
2.3 使用模板
2.4实例

2.4.1柱状图（折线图变换）
2.4.2极坐标柱状图标签

总结

一，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 引入 ECharts

import * as echarts from 'echarts'; // 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main')); // 绘制图表myChart.setOption({title: {text: 'ECharts 入门示例'},tooltip: {},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]});

二，Vue使用Echarts
2.1 Vue环境