关于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, 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
       }
   }

整体效果:
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现在 echarts 地图上点击标注显示弹窗,您可以按照以下步骤操作: 1. 首先,在 echarts 的配置项中设置相关的标注信息。您可以使用 `series` 属性中的 `markPoint` 或 `markLine` 来添加标注。确保每个标注都有一个唯一的标识符,以便后续操作。 2. 在页面中创建一个弹窗元素,可以是一个 `<div>` 元素,用于显示点击标注后的信息。 3. 监听 echarts 地图的 `click` 事件。当用户点击标注时,该事件会被触发。 4. 在点击事件的回调函数中,获取被点击的标注的信息。您可以使用 `event.data` 获取事件对象,通过该对象可以获取到被点击的标注的标识符。 5. 根据标识符找到对应的标注信息,并将其内容显示在弹窗元素中。 下面是一段示例代码,帮助您更好地理解以上步骤: ```javascript // 创建一个 echarts 实例 var chart = echarts.init(document.getElementById('chart')); // 设置 echarts 的配置项 var option = { // 设置地图相关配置... series: [ { type: 'map', // 设置地图系列的数据... }, { type: 'markPoint', // 设置标注相关配置... } ] }; // 将配置项设置给 echarts 实例 chart.setOption(option); // 创建一个弹窗元素 var popup = document.createElement('div'); popup.style.position = 'absolute'; popup.style.top = '0'; popup.style.left = '0'; // 设置其他弹窗样式... // 监听 echarts 地图的 click 事件 chart.on('click', function (params) { if (params.seriesType === 'markPoint') { // 获取被点击的标注的标识符 var id = params.data.id; // 根据标识符找到对应的标注信息 var markPointData = option.series.find(function (series) { return series.type === 'markPoint' && series.data.some(function (data) { return data.id === id; }); }); // 将标注信息显示在弹窗元素中 popup.innerHTML = markPointData.name; // 显示弹窗... } }); ``` 请根据您的具体需求进行相应的修改和适配。以上代码仅为示例,实际应用中可能还需要处理弹窗的位置、样式等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值