用 ECharts 做出漂亮的数据统计图

在没发现 ECharts 这款神器的时候,之前所做的数据统计图只能自个纯手写,倒也是可以实现,只不过特别的费时。后来无意中在网上瞄到 ECharts 这款专门用来生成数据图表的插件,便尝试了一下,那感觉真的不要太爽!

官方介绍

ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器,底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

获取 ECharts

1、下载地址

https://github.com/apache/inc...

2、点击红色箭头按钮,将压缩包下载下来

用 ECharts 做出漂亮的数据统计图_第1张图片

3、echarts 库放在解压后文件夹中的 dist 目录里

用 ECharts 做出漂亮的数据统计图_第2张图片
将整个 dist 目录复制到你的项目中去,可重命名为 echarts

备注:若不想下载 ECharts 库文件,可在头部直接引用 bootcdn 上的 echarts 文件,地址为:https://cdn.bootcss.com/echar...

绘制数据图表

1、柱状图

用 ECharts 做出漂亮的数据统计图_第3张图片
柱状图效果预览

代码实现




    
    数据统计图:柱状图
    
    



    
    

2、折线图

用 ECharts 做出漂亮的数据统计图_第4张图片
折线图效果预览

代码实现




    
    数据统计图:折线图
    
    



    
    

3、饼图

用 ECharts 做出漂亮的数据统计图_第5张图片
饼图效果预览

代码实现




    
    数据统计图:饼图
    
    



    
    

结语

以上绘制的图表是数据图中用的频率较高的三种。不仅如此,ECharts 还可用于地理数据可视化的地图,用于关系数据可视化的关系图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,并且支持图与图之间的混搭。更多有关 ECharts 的使用方法,可参考 ECharts 的官方文档:
https://echarts.baidu.com/ind...

最后

觉得文章不错的,给我点个赞哇,关注一下呗!
技术交流可关注微信公众号【GitWeb】,加我好友一起探讨
微信交流群:加好友(备注思否)邀你入群,抱团学习共进步

图片

你可能感兴趣的:(用 ECharts 做出漂亮的数据统计图)