echarts 地图行政区划压缩_echarts地图按区划添加热词展示

需求分析

echarts的图表功能非常强大，丰富图表类型足够我们日常开发中使用，但是~~~ 开发的脚步永远跟不上需求，所以我们大部分时间都是站在巨人的肩膀之上，废话不多说，来上图

这里的地图展示我用的是echarts的geo地理坐标系组件，如何加载地图请看官网 geo，在对应的行政区划展示热词效果，这里实现花费了很长的时间，效果实现了，但是对性能各方面还没有做进一步优化，

hotword.png

技术难点

地图加载

这里看官网，不做太多解释，因为这里不是最困扰的地方

15953088881799.png

热词生成

1. 如何将热词数据转换为图片展示？

使用echarts插件echarts-wordcloud

优点：引入echarts快速生成热词图片，可定制生成图片形状，不按区划首选

缺点：会将所有的数据生成在一张图片，如果需要区分行政区划，那么无法实现，就算背景是一张地图，也无法实现数据区分

通过wordcloud2.js生成不同区划的热词图片

// 热词生成方法

import WordCloud from "wordcloud";

let canvas = document.createElement("canvas");

canvas.width = 250;

canvas.height = 150;

var options = {

shape: "pentagon", //

list: item, //或者[['各位观众',45],['词云', 21],['来啦!!!',13]],只要格式满足这样都可以

gridSize: 10, // 密集程度 数字越小越密集

weightFactor: 0.6, // 字体大小=原始大小*weightFactor ，这里记得做限制，如果热词权重太大，生成的图片文字会过大绘制时造成内存不足，系统奔溃，我刚开始没做限制，系统直接崩了

maxFontSize: 25, //最大字号 ，好像没啥用，还得再研究一下

minFontSize: 16, //最小字号

fontWeight: "normal", //字体粗细

fontFamily: "Times, serif", // 字体

color: "random-light", // 字体颜色 'random-dark' 或者 'random-light'

backgroundColor: "transparent", // 背景颜色

rotateRatio: 0 // 字体倾斜(旋转)概率，1代表总是倾斜(旋转)

};

WordCloud(canvas, options);

canvas.addEventListener("wordcloudstop", canva => { //监听热词图片是否画完，

this.hotWordData.push(canva.target.toDataURL("image/png")); // 将canvas转换为image图片

});

canvas = null;

对应行政区划添加热词图片

echarts 官网示例以及社区gallery都没有在地图添加热词的例子，那就只好自己造了~~~

echarts对地图数据的展示大部分分两类

1，通过visualMap设置是视觉映射，也就是将数据映射到视觉元素

但是我找遍了也没找到那个属性是可以设置图片的，所以果断放弃

15953119222630.png

通过scatter散点-气泡

15953118425039.png

你别说这里还真有可以设置图片的属性

15953127684879.png

我们选第一种通过imgage://设置图片，也就是我们前面已经生成的热词图片(已经转换为base64了我们这里可以直接拿来用)

//imagesList 存放热词url

imagesList.forEach((item, index) => {

let obj = {

name: '热词分布',

type: 'scatter',

symbol: function (params, val) {

return "image://" + item

},

coordinateSystem: 'geo',

symbolSize: function (val) {

return 120; // 通过设置symbolSize大小将热词图片展示出来(这种做法就是如果地图缩放，symbolSize大小不改变，图片大小也就是固定了，可以监听地图缩放事件，动态改变就可以实现地图缩放，热词土拍你也变化)

},

itemStyle: {

normal: {

color: 'transparent', //标志颜色

}

},

data: convertData(seriesData, jdnames[index]),

hoverAnimation: true,

}

series.push(obj)

})

好了，热词图片已经出来了，也算是研究出一个新东西，虽有不足，但是砸门探索新东西的路不能停，

图片出于echarts社区，我这边有时间会把完整的代码更新到社区，有指教请提出！！！