echarts geo地理散点图 series type：“scatter” 标点只显示经纬度，不显示数值的问题解决

echarts geo地理散点图series type：“scatter” 标点只显示经纬度，不显示数值的问题解决

项目环境：vue2，JavaScript，echarts版本"V5.4.2"

---

问题描述

在使用echartsgeo地理图时遇到一个问题，就是散点图在地图上显示时，标点只显示经纬度，并没有显示数值，大家需求肯定都是要把值显示出来的，所以针对这个问题，开始了问题的分析。

我想要的效果是标点显示 数值

下面贴出 scatter代码， data属性name是你对应的城市数组的城市名称，value就是标点的经度、纬度和数值，但是无论我把value里面的数组格式换成‘经度 数值 纬度’ 还是 ‘经度，纬度，null，数值’或者是‘经度，纬度，0，数值’ 都是不行的，要不标点显示不出，要不就只显示纬度。

{
          name: "点",
          type: "scatter",
          coordinateSystem: "geo",
          symbol: "pin", //气泡
          symbolSize: function (val) {
            var a = (maxSize4Pin - minSize4Pin) / (max - min);
            var b = minSize4Pin - a * min;
            b = maxSize4Pin - a * max;
            return a * val[2] + b;
          },
          label: {
            normal: {
              show: true,
              textStyle: {
                color: "#fff",
                fontSize: 9,
              },
            },
          },
          itemStyle: {
            normal: {
              color: "#F62157", //标志颜色
            },
          },
          zlevel: 6,
          data: [
            {
              name: "四川",
              value: [104.065735, 30.659462, 125],
            },
          ],
        },

---

原因分析：

echarts 官方文档中对这个数据格式的描述

包括大家的写法最终输出的格式都是如下，但是我用这个格式就只给我显示纬度出来。

data: [
            {
              name: "四川",
              value: [104.065735, 30.659462, 125],
            },
],

---

解决方案：

在label 里面的 normal 中 增加一个formatter属性，formatter属性是用来转换格式的，用这个方法可以控制 label 的显示 这里直接用方法返回value的下标[2]，也就是数值了，用了这个属性你也可以展示其他的字符串或者数字。

formatter: function (params) {
    return params.value[2];
},

{
          name: "点",
          type: "scatter",
          coordinateSystem: "geo",
          symbol: "pin", //气泡
          symbolSize: function (val) {
            var a = (maxSize4Pin - minSize4Pin) / (max - min);
            var b = minSize4Pin - a * min;
            b = maxSize4Pin - a * max;
            return a * val[2] + b;
          },
          label: {
            normal: {
              formatter: function (params) {
                console.log(params);
                return params.value[2];
              },
              show: true,
              textStyle: {
                color: "#fff",
                fontSize: 9,
              },
            },
          },
          itemStyle: {
            normal: {
              color: "#F62157", //标志颜色
            },
          },
          zlevel: 6,
          data: [
            {
              name: "四川",
              value: [104.065735, 30.659462, 125],
            },
          ],
        },

最终效果

开发中遇到问题是无法避免的，尤其是疑难杂症的问题，花的时间更多。只有保持冷静的心态，全方位多角度的去分析解决，技术才会有所提升。解决问题不易，希望这个解决方案能够为大家提供一个思路，如果帮助到你就点个赞支持一下吧！