VUE+D3+Echarts绘制图表词云图地图等

前言:
新公司有一个数据可视化的大屏项目, 需要绘制出各类图表, 地图等. 起初以为都是使用的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气泡图

添加了循环动画, 具体可查看代码

气泡图

三. 城市地图

项目中只需要 深圳和杭州的地图绘制, 找了好久才找到 绘制好的地图. 需要其他地图自行下载

深圳

四. 自定义图例饼状图

自定义图例饼状图

五. 顶部半圆柱状图

顶部半圆柱状图

代码地址 github

vueChartsMap