200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > 关于echarts地图只标注指定城市名的显示的问题

关于echarts地图只标注指定城市名的显示的问题

时间:2020-08-27 21:05:53

相关推荐

关于echarts地图只标注指定城市名的显示的问题

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, fillscale: 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}}

整体效果:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。