前言:
新公司有一个数据可视化的大屏项目, 需要绘制出各类图表, 地图等. 起初以为都是使用的echarts 绘制... 结果发现 package.json 中 不仅有 echarts 还有 D3 .... 项目中版本如下:
package.json 中版本信息
so, 又开始了学习+search之旅... 不过D3的资料都是很久之前的了.. 查找属实费劲...
而且, 项目中需求图都需要定制, 所以无法直接使用D3的坐标和比例尺..
几个注意的点:
- D3 版本 v3 和 v4,5,6 的代码都不相同,大家写的时候自己去查看
- 中国地图可以直接使用 echarts
- 地区地图需要 svg / geojson 文件的去这里下载:http://datav.aliyun.com/tools/atlas
- 词云图可以使用echarts , 官网的案例都太low.查看这个网站:
https://www.makeapie.com/explore.html - 注意大屏的适配问题(之后总结T..T)
- svg 在线编辑器(与绘画一样): https://c.runoob.com/more/svgeditor/
放置几个项目中的典型图表吧
一. echarts 词云图
词云图
需要安装 echarts-wordcloud
根据图片的轮廓填充词语 , 参考网址
https://www.makeapie.com/editor.html?c=xBGq7gnHzU
注意版本不对应会产生bug(maskImage或textColor无效), github上是有一句提示的:
版本对应提示
具体的可以查看 issues62 (github网站图片失效的话配置一下 hosts 文件)
https://github.com/ecomfe/echarts-wordcloud/issues/62
兼容性测试图
二. D3气泡图
添加了循环动画, 具体可查看代码
气泡图
三. 城市地图
项目中只需要 深圳和杭州的地图绘制, 找了好久才找到 绘制好的地图. 需要其他地图自行下载
深圳
四. 自定义图例饼状图
自定义图例饼状图
五. 顶部半圆柱状图
顶部半圆柱状图
网友评论