echarts实现中国地图和自定义形状的词云图

目录

1.中国地图

2.词云图

3.资源源码

---

用echarts实现了中国地图上的发票流入流出图和小鸟形状的词云图。

先看下效果

中国地图（有动态的流入流出箭头和悬浮框提示信息）：

词云图（小鸟形状，也可自行改为其他形状）：

 

这段时间用echarts作了不少图，之所以挑这两个图来讲，是因为他们都引入了其他js文件，这俩js文件还不太好找到。

 

1.中国地图

我就直接上代码了，进行一些说明：

1.首先是要引入echarts.js和china.js，文章最后会给出；

2.chinaGeoCoordMap用于装各省会的坐标数据，挺重要的；

3.chinaDatas装各省的名字数据嘛；

4.convertData这个方法控制箭头流向，我设置的是一半流入中心点，一半从中心点流出（用不到的可以删掉，要用的自己改进）；

5.series里设置被攻击点（中心点），和一些特效，代码中有注释的；

6.option中设置一些整体效果，tooltip中负责悬浮框内容和格式的设置，此中有疑问可以去查看echarts官方的文档说明。

2.词云图

上代码，并进行说明：

1.首先，引入echarts.js和echarts-wordcloud.min.js，文章最后会给出；

2.data装词汇数据，value越大字体越大，为了效果好看，词汇较多，看代码时直接往下拉就行；

3.data中的image： 小鸟图片；

自定义图片一般有三种格式：

可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURL。

1.URL 为图片链接，例如：

'image://http://xxx.xxx.xxx/a/b.png'

注：也可以是本地图片

2.URL 为 dataURL， 例如：

'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'

我们就用的这种

3.可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

例如：

'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'

4.maskImage用于设置词云图形状为自定义图片的形状；

5.shape则用于设置词云图形状为默认的几种形状，由于现在echarts官网没有词云图的相关文档，我去翻看了echarts-wordcloud.min.js，发现可以设置为以下几种默认形状：

circle，cardioid（心形），diamond，square，triangle-forward，triangle，triangle-upright，pentagon（五角形），star，random-dark，random-light；

 

3.资源源码

资源源码已上传，https://download.csdn.net/download/Ace_2/12236165

资源我设置的0积分下载啊，咋还是要积分才能下。。。

需要源码的可以关注公众号“编程江湖”，回复“echarts”领取资源。

关注后还可以领取Java、Python、微信小程序等诸多学习资料和项目源码，还能查看精品技术文章，并给大家提供了CSDN资源下载服务。