废话不多，先上效果
ChinaMap.gif
上图所示，颜色渐变深蓝色到浅蓝色，鼠标悬浮之后，颜色会不变 而不是指定的一个颜色，
ps:(gif录屏软件水印没去，请大家忽略)
直接说原理吧
为了不耽误着急的同学的时间，直接说原理，首先每个省或者地区，一定是在地图上有自己的值，
比如能蒙古：200个 这种
请看我附上的代码的
item.itemStyle = {emphasis: {areaColor: this.chinaMapData.cololrGradual[valueIndex]}}
这一段，给每一个地区的 areaColor 设置对应的颜色，根据它对应的值，
思路：
- 1 先求出苹果或者香蕉的最大值，Math.max es6方法即可
- 2 然后跟后台沟通一下数据量，我们这边数据比较大，所有我完全可以把一个区间的颜色先拆分成100份，（100份了 足够你渐变了）为什么100份？ 如果你数据量很大几十万 你不可能循环几十万次 细分渐变颜色，性能差
根据rgb 16进制颜色转换写一个函数，将次区间的颜色进行拆分，就可以得到一个渐变的数组
（这个函数我放在后面 函数是借鉴网上其他大神的）
// 将颜色分为100份渐变 备用
this.chinaMapData.cololrGradual = this.gradient('#E6F0F5', '#0D6CA2', 100)
- 3 好了 你就可以根据对应的值占的百分比进行计算了，最多也就循环100次
MapToSeries(name, data = []) {
data.forEach(item=>{
// 根据分解的值 获取对应的颜色
let valueIndex = Math.floor(((item.value-1)/this.chinaMapData.max)*100)
// 这一行代码是核心
item.itemStyle = {emphasis: {areaColor: this.chinaMapData.cololrGradual[valueIndex]}}
})
let series = {
name: name,
type: "map",
mapType: "china",
showLegendSymbol: false,
roam: false,
label: {
normal: {
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
// 地图交界线颜色
borderColor: "rgba(255,255,255,0.4)",
// 交界线宽
borderWidth: 1,
emphasis: {
// 阴影
shadowBlur: 10,
shadowOffsetX: 0,
hoverAnimation: true,
// shadowColor: 'rgba(0, 0, 0, 0.5)',
// 普通图表的高亮颜色
// color: "rgba(0, 0, 0, 0.5)",
// barBorderWidth: 1,
// 地图区域的高亮颜色
areaColor: this.chinaMapData.areaColor,
label:{show:true}
}
},
data
};
return series;
},
颜色渐变函数
// 根据颜色区间 计算所有渐变
gradient (startColor,endColor,step){
// 将 hex 转换为rgb
var sColor = this.hexToRgb(startColor);
var eColor = this.hexToRgb(endColor);
// 计算R\G\B每一步的差值
var rStep = (eColor[0] - sColor[0]) / step;
var gStep = (eColor[1] - sColor[1]) / step;
var bStep = (eColor[2] - sColor[2]) / step;
var gradientColorArr = [];
for(var i=0;i完美解决
如果对大家有帮助 希望点赞收藏留言，我会一直更新的，谢谢大家！
如果有哪些地方不周，也希望各位同学不吝赐教！ 谢谢！