echarts地图只标注一个城市显示城市名,其它的隐藏
目前有个需求,是需要把崇信的名称标注出来,但是其它城市的名称需要隐藏,并且要用不一样的样式颜色、标注大小等;
直接上代码:
const series = [];
[['崇信', chinaDatas]].forEach(function (item, i) {
series.push(
{
name: item[0],
type: 'lines',
zlevel: 1,
symbol: ['none', 'arrow'],
symbolSize: 0,
effect: {
show: true,
period: 4, //箭头指向速度,值越小速度越快
trailLength: 0.4, //特效尾迹长度[0,1]值越大,尾迹越长重
symbol: 'arrow', //箭头图标
color: '#21F3BF',
symbolSize: 2 //图标大小
},
lineStyle: {
normal: {
color: '#21F3BF',
width: 0, //尾迹线条宽度
opacity: 0.2, //尾迹线条透明度
curveness: 0.3 //尾迹线条曲直度
}
},
data: convertData(item[1])
},
{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
//涟漪特效
period: 3, //动画时间,值越小速度越快
brushType: 'stroke', //波纹绘制方式 stroke, fill
scale: 3 //波纹圆环最大限制,值越大波纹越大
},
label: {
normal: {
show: true,
position: 'right', //显示位置
offset: [0, 0], //偏移设置
formatter: function (params) {
//圆环显示文字
return params.name === '崇信' ? params.name : ''
},
fontSize: 10
},
emphasis: {
show: false
}
},
// symbol: 'circle',
symbolSize: function (val) {
if (val[0] === 107.05 && val[1] === 35.27) {
return 10
} else {
return 5 //圆环大小
// return val[2] / 6
}
},
itemStyle: {
normal: {
show: true,
color: function (params) {
//圆环显示文字
return params.name === '崇信' ? '#ec1615' : '#3ed4ff'
}
}
},
data: item[1].map(function (dataItem) {
return {
name: dataItem[0].name,
value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
num: dataItem[0].value
}
})
}
)
})
注意的地方:
之前的思路是循环params如果==='崇信’就直接返回,发现显示的都是崇信了,后来看日志发现是每一个城市都返回name,所以要显示崇信,其它的隐藏的话就只能是这样,崇信的话就返回,其它的话就返回''
;
formatter: function (params) {
//圆环显示文字
return params.name === '崇信' ? params.name : ''
}
这个是设置颜色效果的:
itemStyle: {
normal: {
show: true,
color: function (params) {
//圆环显示文字
return params.name === '崇信' ? '#ec1615' : '#3ed4ff'
}
}
}
这个是设置标记点大小的:
symbolSize: function (val) {
if (val[0] === 107.05 && val[1] === 35.27) {
return 10
} else {
return 5 //圆环大小
// return val[2] / 6
}
}
整体效果: