想在具体的省份上显示该省的数值是多少,大佬们帮忙看下应该在哪配置一下??
我在series的label中设置了没有效果
想要的效果如下:
echarts 配置如下
option: {
tooltip: {
padding: 0,
borderColor: '#ccc',
// 数据格式化
formatter: function (params, callback) {
return '<div style="height: 30px;line-height: 30px;min-width:120px; padding: 0 5px;border-bottom:1px solid #ccc">' + params.data.name + '</div>' +
'<div>' + '<i style="display:inline-block;border-radius:50%;width:10px;height:10px;left:5px;background-color: #ccc;margin:0 5px"></i>' + '项目数' + ' : ' + params.data.value + '</div>'
}
},
legend: {
orient: 'vertical',
top: '9%',
left: '5%',
icon: 'circle',
data: [],
selectedMode: 'single',
selected: {},
itemWidth: 12,
itemHeight: 12,
itemGap: 30,
inactiveColor: '#b6d7ff',
textStyle: {
color: '#ec808d',
fontSize: 14,
fontWeight: 300,
padding: [0, 0, 0, 15]
}
},
visualMap: {
min: 0,
max: 500,
left: 'left',
top: 'bottom',
text: ['高', '低'], // 取值范围的文字
inRange: {
color: ['#ededf3', '#4a78f2'] // 取值范围的颜色
},
show: false // 图注
},
geo: {
map: 'china',
roam: false, // 不开启缩放和平移
label: {
show: false
},
itemStyle: {
normal: {
borderColor: '#fff',
borderWidth: 2
},
emphasis: {
label: {
show: false
},
areaColor: 'none', // 鼠标选择区域颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 3,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
emphasis: {
label: {
show: false
}
},
left: '5%',
right: '5%',
top: '2%',
bottom: '5%',
select: {
areaColor: 'red'
}
},
series: [
{
name: '省份数据',
type: 'map',
geoIndex: 0, // 不可缺少,否则无tooltip 指示效果
data: [
{ value: 212, id: 'beijing', name: '北京' },
{ value: 212, id: 'tianjin', name: '天津' },
{ value: 212, id: 'shanghai', name: '上海' },
{ value: 212, id: 'chongqing', name: '重庆' },
{ value: 212, id: 'hebei', name: '河北' },
{ value: 212, id: 'henan', name: '河南' }
...
]
}
]
}
设置geo.label.formatter