Echarts Chartjs
最近由于公司图表展现需求较多,所以学习整理下相关资料。
前端图表框架也比较多,这里介绍两款。
- Apache Echarts
- Chartjs
Apache Echarts 涵盖各行业图表,满足各种需求,功能相当丰富。而后起之秀chartjs以其简单灵活特性,也深得开发设计人员喜爱。
https://echarts.apache.org (Echarts)
https://www.chartjs.org (Charts)
两者都是开源项目,托管在Github
https://github.com/apache/incubator-echarts
https://github.com/chartjs/Chart.js
两者社区活跃简单对比
![0c9c2b3fcdad3184e6d95a96bbd2db7e.png](https://i-blog.csdnimg.cn/blog_migrate/b556f4ebbb7d5db97e9a2765ce09eeed.jpeg)
Apache Echarts
![8a33e01d33ff61f7101d55a0a4071079.png](https://i-blog.csdnimg.cn/blog_migrate/cfebb253bdfb7b0ff68cde61fc966bd3.jpeg)
Chartjs
看上去Chartjs似乎更活跃。
疫情地图
使用echarts map 来实现。
npm install echarts --save
导入地图数据
ECharts 中提供了Javascript和Json两种格式的地图数据
从Github项目文件下载 https://github.com/apache/incubator-echarts/tree/master/map
从阿里提供地址下载 http://datav.aliyun.com/tools/atlas/#
百度网盘 链接: https://pan.baidu.com/s/1fHfW-qft_M58o2eQglwelw 提取码: 6fu5
项目代码片段
echarts.registerMap("china", chinaMap);series: [ { name: '确诊数', type: 'map', mapType: 'china', roam: false, label: { show: true, color: 'rgb(63, 63, 63)' }, data: actualData } ]
配置 visualMap
对照配置文档调整相应的参数即可,也很简单。
https://echarts.apache.org/zh/option.html#series-map
疫情数据来源 《腾讯新闻》
![40d7313648e59af5b95abcb32c204cbe.png](https://i-blog.csdnimg.cn/blog_migrate/50a5b9029ba0541fcc601820eba9085a.jpeg)
全国疫情
用户画像
仿照今日头条简版粉丝画像图。
![67b47086fc55db6eb816b9a35be1004a.png](https://i-blog.csdnimg.cn/blog_migrate/4040092137925ed0bea56a48dce19bb1.jpeg)
粉丝画像
IP来源查询
![cdd8dda51bcfdb93abbe8329a641a668.png](https://i-blog.csdnimg.cn/blog_migrate/ff81dc183ac145f1a99c06a80029bbe8.jpeg)
IP地域分布
小结
该篇主要是对Echarts map 整理。欢迎分享和学习交流。
项目地址
https://github.com/cuteJ/shop-server (后端)
https://github.com/cuteJ/shop-web-mgt (前端)
项目演示地址
http://shop-web-mgt.onlythinking.com