visualMap 是视觉映射组件,用于进行『视觉编码』,也就是将数据映射到视觉元素(视觉通道)
piecewise 分段
var province = ['福建', '江苏', '浙江', '安徽', '广东', '北京', '山东', '上海', '辽宁',
'四川', '河北', '河南', '湖南', '山西', '江西', '内蒙古','湖北', '广西', '重庆', '天津',
'陕西', '贵州', '宁夏', '云南','吉林','青海', '新疆','黑龙江', '甘肃',
'西藏', '海南'];
var data = [42, 41, 37, 33, 24, 23, 19,
18, 13, 13, 10, 8, 8, 7, 7, 6, 6, 5,
5, 4, 4, 4, 3, 3, 3, 2,
2, 2, 2, 0, 0]
var res = [];
for (var j = 0; j < data.length; j++) {
res.push({
name: province[j],
value: data[j]
});
}
res.sort(function(a, b) {
return a.value - b.value;
});
var res1 = [];
var res2 = [];
for (var t = 0; t < 10; t++) {
res1[t] = res[res.length - 1 - t].name;
res2[t] = res[res.length - 1 - t].value;
}
var option = {
visualMap: {
type: 'piecewise',
text: ['大', '小'],
pieces: [{ // 颜色区间
min: 41,
color: '#73240D'
},
{
min: 31,
max: 40,
color: '#BB0000'
},
{
min: 21,
max:30,
color: '#BD430A'
},
{
min: 11,
max: 20,
color: '#E08150'
},
{
min: 1,
max: 10,
color: '#E9B090'
},
{
value: 0,
color: '#ffffff'
}
],
textStyle: {
color:'black'
}
},
series: [{
name: 'mapSer',
type: 'map',
map: 'china',
roam: false,
// geoIndex: 0,
label: {
show: false,
},
data: res 可以是后台传入的数据
}
]
};
res 的数据格式为:
const res = [
{name:'区域名' ,value: 数量},
{name:'区域名' ,value: 数量},
{name:'区域名' ,value: 数量},
{name:'区域名' ,value: 数量},
]