Echarts中国地图各个省市自治区自定义颜色
发布时间
阅读量：
阅读量
最近有一个需求如下所述：
需要基于评级（低、中、高等）来显示省市区的颜色。
由于它是基于数据值域划分的，
数据Range方法无法满足要求。
随后考虑到了可以根据评级判断为各个省市自治区自定义颜色。
需要的data数据结构如下:
data: {
{"name": "北京", "value": 34, "count": 500, "color": "#f00"},
{"name": "天津", "value": 33, "count": 300, "color": "#ff0"},
{"name": "上海", "value": 32, "count": 50, "color": "#f0f"},
{"name": "重庆", "value": 31, "count": 50, "color": "#0f0"},
........
}自己根据要的数据进行组装
if(dateArray[i][4] == "无数据"){
datejson.push({
"name" : dateArray[i][2],//城市名字，要跟地图上的对应
"rating" : dateArray[i][4],//评级
"color":"#BBFFFF"//评级对应的颜色
})
}else if(dateArray[i][4] == "低"){
datejson.push({
"name" : dateArray[i][2],
"rating" : dateArray[i][4],
"color":"#3cb371"
})
}else if(dateArray[i][4] == "中"){
datejson.push({
"name" : dateArray[i][2],
"rating" : dateArray[i][4],
"color":"#ff8c00"
})
}else if(dateArray[i][4] == "高"){
datejson.push({
"name" : dateArray[i][2],
"rating" : dateArray[i][4],
"color":"#e64546"
})
}else if(dateArray[i][4] == "极高"){
datejson.push({
"name" : dateArray[i][2],
"rating" : dateArray[i][4],
"color":"#8b0000"
})
}
}
//还需要设置单独省市县的样式颜色
var customSettings = [];
datejson.forEach(function (item, index) {
customSettings.push({
name: item.name,
itemStyle: {
areaColor: item.color,
color: item.color
}
})
})option设置
myChart.setOption({
....... 省略大堆配置
geo: {
map: name,
roam: false,//滚轮 放大缩小
zoom:1.2,//缩放比例
regions: customSettings,//设置省市县的样式颜色
itemStyle: {
normal:{
borderColor: 'rgba(0, 0, 0, 0.2)'//地图边框颜色
},
emphasis:{
areaColor: '#F3B329',//鼠标放到地图上显示的颜色（黄色）
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
series: [{
name : '',// 系列名称
type: 'map',//图表类型
itemStyle:{// 图形样式
normal:{label:{show:true}},// 默认状态下地图的文字
emphasis:{label:{show:true}}// 鼠标放到地图上面显示文字
},
data:datejson
}]
})
全部评论 (0)
还没有任何评论哟~