在没发现 ECharts 这款神器的时候，之前所做的数据统计图只能自个纯手写，倒也是能够实现，只不过特地的费时。起初无心中在网上瞄到 ECharts 这款专门用来生成数据图表的插件，便尝试了一下，那感觉真的不要太爽！
官网介绍
ECharts，一个应用 JavaScript 实现的开源可视化库，能够晦涩的运行在 PC 和挪动设施上，兼容以后绝大部分浏览器，底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰盛，可高度个性化定制的数据可视化图表。
获取 ECharts
1、下载地址
https://github.com/apache/inc...
2、点击红色箭头按钮，将压缩包下载下来
3、echarts 库放在解压后文件夹中的 dist 目录里
将整个 dist 目录复制到你的我的项目中去，可重命名为 echarts
备注：若不想下载 ECharts 库文件，可在头部间接援用 bootcdn 上的 echarts 文件，地址为：https://cdn.bootcss.com/echar...
绘制数据图表
1、柱状图
柱状图成果预览
代码实现
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>数据统计图：柱状图</title> <!-- 引入 ECharts 文件 这里抉择min.js压缩版的echarts --> <script src="echarts/echarts.min.js"></script></head><body> <!-- 为ECharts筹备一个具备大小（宽高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于筹备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: '2014-2019年 前端人均工资' }, tooltip: {},//提示框组件（鼠标挪动到数字表时触发） xAxis: { //x轴 data: ["2014年","2015年","2016年","2017年","2018年","2019年"] }, yAxis: {},//y轴 内容会主动从以下的series.data 中获取 series: [{ name: '人均工资', type: 'bar', //类型为：柱状图 data: [3800, 4600, 5100, 5800, 6300, 7300] //x轴我的项目对应的数据 }] }; // 应用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script></body></html>2、折线图
折线图成果预览
代码实现
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>数据统计图：折线图</title> <!-- 引入 ECharts 文件 这里抉择min.js压缩版的echarts --> <script src="echarts/echarts.min.js"></script></head><body> <!-- 为ECharts筹备一个具备大小（宽高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于筹备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: '将来一周气温变动' }, tooltip: { trigger: 'axis' }, xAxis: { type: 'category', data: ['周一','周二','周三','周四','周五','周六','周日'] }, yAxis: { type: 'value', axisLabel: { //坐标轴刻度标签的相干设置。 formatter: '{value} °C' // 应用字符串模板，模板变量为刻度默认标签 {value} } }, series: [ { name:'最高气温', type:'line', data:[11, 11, 15, 13, 12, 13, 10], }, { name:'最低气温', type:'line', data:[1, -2, 2, 5, 3, 2, 0], } ] }; // 应用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script></body></html>3、饼图
饼图成果预览
代码实现
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>数据统计图：饼图</title> <!-- 引入 ECharts 文件 这里抉择min.js压缩版的echarts --> <script src="echarts/echarts.min.js"></script></head><body> <!-- 为ECharts筹备一个具备大小（宽高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于筹备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title : { text: '某公司年龄阶段的员工占比', x:'center'//程度居中 }, tooltip : {//提示框组件。 trigger: 'item', //'item' 数据项图形触发，次要在散点图，饼图等无类目轴的图表中应用。 formatter: "{a} <br/>{b} : {c} ({d}%)" //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比） }, series : [ { name: '年龄占比', type: 'pie', radius : '55%',//饼图的半径 center: ['50%', '60%'],//饼图的核心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。 data:[ {value:80, name:'20-25岁'}, {value:30, name:'26-30岁'}, {value:20, name:'31-35岁'}, {value:8, name:'36-40岁'}, {value:5, name:'41岁以上'} ], itemStyle: {//图形款式。 emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; // 应用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script></body></html>结语
以上绘制的图表是数据图中用的频率较高的三种。不仅如此，ECharts 还可用于天文数据可视化的地图，用于关系数据可视化的关系图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，并且反对图与图之间的混搭。更多无关 ECharts 的应用办法，可参考 ECharts 的官网文档：
https://echarts.baidu.com/ind...
最初
感觉文章不错的，给我点个赞哇，关注一下呗！
技术交换可关注微信公众号【GitWeb】，加我好友一起探讨
微信交换群：加好友（备注思否）邀你入群，抱团学习共提高