在切换图例的时候,图标只显示第一个图例的数据,后面切换没有反应
配置项如下
var mapData = [
{
name: '齐齐哈尔'
}, {
name: '盐城'
}, {
name: '青岛'
}, {
name: '金昌'
}, {
name: '泉州'
}, {
name: '拉萨'
}, {
name: '上海浦东'
}, {
name: '攀枝花'
}, {
name: '威海'
}, {
name: '承德'
}, {
name: '汕尾'
}, {
name: '克拉玛依'
}, {
name: '重庆市'
}, {
name: '北京市'
}
]
function randomData () {
return Math.round(Math.random() * (1000))
}
var provinceData = [
{name: '北京', value: randomData()},
{name: '天津', value: randomData()},
{name: '上海', value: randomData()},
{name: '重庆', value: randomData()},
{name: '河北', value: randomData()},
{name: '河南', value: randomData()},
{name: '云南', value: randomData()},
{name: '辽宁', value: randomData()},
{name: '黑龙江', value: randomData()},
{name: '湖南', value: randomData()},
{name: '安徽', value: randomData()},
{name: '山东', value: randomData()},
{name: '新疆', value: randomData()},
{name: '江苏', value: randomData()},
{name: '浙江', value: randomData()},
{name: '江西', value: randomData()},
{name: '湖北', value: randomData()},
{name: '广西', value: randomData()},
{name: '甘肃', value: randomData()},
{name: '山西', value: randomData()},
{name: '内蒙古', value: randomData()},
{name: '陕西', value: randomData()},
{name: '吉林', value: randomData()},
{name: '福建', value: randomData()},
{name: '贵州', value: randomData()},
{name: '广东', value: randomData()},
{name: '青海', value: randomData()},
{name: '西藏', value: randomData()},
{name: '四川', value: randomData()},
{name: '宁夏', value: randomData()},
{name: '海南', value: randomData()},
{name: '台湾', value: randomData()},
{name: '香港', value: randomData()},
{name: '澳门', value: randomData()}]
var provinceData1 = [
{name: '北京', value: randomData()},
{name: '天津', value: randomData()},
{name: '上海', value: randomData()},
{name: '重庆', value: randomData()},
{name: '河北', value: randomData()},
{name: '河南', value: randomData()},
{name: '云南', value: randomData()},
{name: '辽宁', value: randomData()},
{name: '黑龙江', value: randomData()},
{name: '湖南', value: randomData()},
{name: '安徽', value: randomData()},
{name: '山东', value: randomData()},
{name: '新疆', value: randomData()},
{name: '江苏', value: randomData()},
{name: '浙江', value: randomData()},
{name: '江西', value: randomData()},
{name: '湖北', value: randomData()},
{name: '广西', value: randomData()},
{name: '甘肃', value: randomData()},
{name: '山西', value: randomData()},
{name: '内蒙古', value: randomData()},
{name: '陕西', value: randomData()},
{name: '吉林', value: randomData()},
{name: '福建', value: randomData()},
{name: '贵州', value: randomData()},
{name: '广东', value: randomData()},
{name: '青海', value: randomData()},
{name: '西藏', value: randomData()},
{name: '四川', value: randomData()},
{name: '宁夏', value: randomData()},
{name: '海南', value: randomData()},
{name: '台湾', value: randomData()},
{name: '香港', value: randomData()},
{name: '澳门', value: randomData()}]
var provinceData2 = [
{name: '北京', value: randomData()},
{name: '天津', value: randomData()},
{name: '上海', value: randomData()},
{name: '重庆', value: randomData()},
{name: '河北', value: randomData()},
{name: '河南', value: randomData()},
{name: '云南', value: randomData()},
{name: '辽宁', value: randomData()},
{name: '黑龙江', value: randomData()},
{name: '湖南', value: randomData()},
{name: '安徽', value: randomData()},
{name: '山东', value: randomData()},
{name: '新疆', value: randomData()},
{name: '江苏', value: randomData()},
{name: '浙江', value: randomData()},
{name: '江西', value: randomData()},
{name: '湖北', value: randomData()},
{name: '广西', value: randomData()},
{name: '甘肃', value: randomData()},
{name: '山西', value: randomData()},
{name: '内蒙古', value: randomData()},
{name: '陕西', value: randomData()},
{name: '吉林', value: randomData()},
{name: '福建', value: randomData()},
{name: '贵州', value: randomData()},
{name: '广东', value: randomData()},
{name: '青海', value: randomData()},
{name: '西藏', value: randomData()},
{name: '四川', value: randomData()},
{name: '宁夏', value: randomData()},
{name: '海南', value: randomData()},
{name: '台湾', value: randomData()},
{name: '香港', value: randomData()},
{name: '澳门', value: randomData()}]
var provinceData3 = [
{name: '北京', value: randomData()},
{name: '天津', value: randomData()},
{name: '上海', value: randomData()},
{name: '重庆', value: randomData()},
{name: '河北', value: randomData()},
{name: '河南', value: randomData()},
{name: '云南', value: randomData()},
{name: '辽宁', value: randomData()},
{name: '黑龙江', value: randomData()},
{name: '湖南', value: randomData()},
{name: '安徽', value: randomData()},
{name: '山东', value: randomData()},
{name: '新疆', value: randomData()},
{name: '江苏', value: randomData()},
{name: '浙江', value: randomData()},
{name: '江西', value: randomData()},
{name: '湖北', value: randomData()},
{name: '广西', value: randomData()},
{name: '甘肃', value: randomData()},
{name: '山西', value: randomData()},
{name: '内蒙古', value: randomData()},
{name: '陕西', value: randomData()},
{name: '吉林', value: randomData()},
{name: '福建', value: randomData()},
{name: '贵州', value: randomData()},
{name: '广东', value: randomData()},
{name: '青海', value: randomData()},
{name: '西藏', value: randomData()},
{name: '四川', value: randomData()},
{name: '宁夏', value: randomData()},
{name: '海南', value: randomData()},
{name: '台湾', value: randomData()},
{name: '香港', value: randomData()},
{name: '澳门', value: randomData()}]
var geoCoordMap = {
'齐齐哈尔': [123.97, 47.33],
'盐城': [120.13, 33.38],
'青岛': [120.33, 36.07],
'金昌': [102.188043, 38.520089],
'泉州': [118.58, 24.93],
'拉萨': [91.11, 29.97],
'上海浦东': [121.48, 31.22],
'攀枝花': [101.718637, 26.582347],
'威海': [122.1, 37.5],
'承德': [117.93, 40.97],
'汕尾': [115.375279, 22.786211],
'克拉玛依': [84.77, 45.59],
'重庆市': [108.384366, 30.439702],
'北京市': [116.4551, 40.2539]
}
var convertData = (data) => {
var res = []
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name]
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
})
}
}
return res
}
option = {
title: {
text: '全国数据总览',
x: 'center',
y: 'top',
textAlign: 'left'
},
tooltip: {
trigger: 'item',
formatter: function (params) {
if (params.data === undefined) {
return ''
}
if (Array.isArray(params.value)) {
return '•' + ' ' + '' + params.name + ':' + params.value[2]
} else {
return '•' + ' ' + '' + params.name + ':' + params.value
}
}
},
visualMap: {
min: 0,
max: 1000,
left: 'left',
top: 'bottom',
text: ['高', '低'],
color: ['lightskyblue', '#f2f2f2'],
calculable: true,
show: true
},
legend: {
right: 'right',
top: 'top',
data: [{
name: '揽收率'
},
{
name: '未签收'
},
{
name: '预计派送量'
},
{
name: '签收率'
}
],
selectedMode: 'single'
},
geo: {
map: 'china',
roam: true,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
}
},
series: [{
name: '供需占比',
visualMap: false,
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 6,
data: convertData(mapData),
symbolSize: 8,
showEffectOn: 'render',
rippleEffect: {
scale: 5,
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#c60fff',
shadowBlur: 20,
shadowColor: '#333'
}
}
}, {
name: '揽收率',
map: 'china',
type: 'map',
roam: true,
zlevel: 2,
showLegendSymbol: false,
data: provinceData
}, {
name: '未签收',
map: 'china',
type: 'map',
zlevel: 2,
showLegendSymbol: false,
data: provinceData1
}, {
name: '预计派送量',
map: 'china',
type: 'map',
zlevel: 2,
showLegendSymbol: false,
data: provinceData2
}, {
name: '签收率',
map: 'china',
type: 'map',
zlevel: 2,
showLegendSymbol: false,
data: provinceData3
}]
};
myChart.setOption(option);