在echarts地图上显示不为0数字

最新推荐文章于 2025-03-28 17:15:29 发布

yangxx99

最新推荐文章于 2025-03-28 17:15:29 发布

阅读量911

点赞数 1

文章标签： javascript vue.js echarts

本文链接：https://blog.youkuaiyun.com/yangxx99/article/details/116082607

版权

在echarts地图上显示不为0数字

1.先看下echarts地图map的配置项

series: [
          {
            name: mapName, // 系列名称
            type: 'map',
            map: mapName, // 同 registerMap 方法的第一个参数一致
            zoom: 1.2, // 当前视角的缩放比例
            zlevel: 1, // 用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中
            scaleLimit: {
              min: 0.7,
              max: 2,
            },
            label: {
              // 非高亮状态下的文本样式
              normal: {
                show: true,		//显示地图省份名称
                position: 'inside', // 文本标签显示的位置
                textStyle: {
                  color: '#de5e60', // 文本颜色
                  fontSize: 14,
                },
                formatter: '{b}\n{c}', // 文本上显示的值  {b}表示label信息,{c}代表value 这里就是地图省份名称，\n转行，和data里传入的数字
              // 高亮状态下的文本样式
              emphasis: {
                textStyle: {
                  color: '#fff', // 文本颜色
                },
              },
            },
            itemStyle: {
              // 非高亮状态下的地图块样式
              normal: {
                borderColor: '#EBEBE4',
              },
              // 高亮状态下的地图块样式
              emphasis: {
                areaColor: 'rgb(254,153,78)',
              },
            },

            data: seriesData,
          },
        ],

2.现需要在地图上只显示值不为0的省份信息，只需调整formatter值

formatter:function (params) {	//这里可以打印下看看params里有什么值
      if (params.value > 0) {
           return params.name+params.value
       } else {
           return ''
       }
}