在没发现 ECharts 这款神器的时候,之前所做的数据统计图只能自个纯手写,倒也是可以实现,只不过特别的费时。后来无意中在网上瞄到 ECharts 这款专门用来生成数据图表的插件,便尝试了一下,那感觉真的不要太爽!
官方介绍
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器,底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
获取 ECharts
1、下载地址
https://github.com/apache/incubator-echarts
2、点击红色箭头按钮,将压缩包下载下来
3、echarts 库放在解压后文件夹中的 dist 目录里
将整个 dist 目录复制到你的项目中去,可重命名为 echarts
备注:若不想下载 ECharts 库文件,可在头部直接引用 bootcdn 上的 echarts 文件,地址为:
https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js
绘制数据图表
1、柱状图