使用echarts绘制地图

使用echarts绘制地图的时候遇到一个问题，不知道为什么data中的value赋不上去，总是显示NAN

代码如下

import * as echarts from "echarts";
import { reactive, onMounted } from "vue";
import chinaJson from "../assets/source/chinaMap.json";

const state = reactive({
  province: "",
  option: {
    title: {
      text: "",
      left: "center"
    },
    tooltip: {
      trigger: "item",
      backgroundColor: "white",
      formatter: "{b} - {c}"
    },
    visualMap: {
      top: "center",
      left: "left",
      type: "continuous"
    },
    series: [
      {
        type: "map",
        mapType: "china",
        roam: true,
        label: {
          show: true,
          color: "black"
        },
        labelLayout(params) {
          return {
            hideOverlap: true,
            fontSize: Math.max(params.rect.width / 10, 8)
          };
        },
        data: [
          { name: "北京", value: 350000 },
          { name: "天津", value: 120000 },
          { name: "上海", value: 300000 },
          { name: "重庆", value: 92000 },
          { name: "河北", value: 25000 },
          { name: "河南", value: 20000 },
          { name: "云南", value: 500 },
          { name: "辽宁", value: 3050 },
          { name: "黑龙江", value: 80000 },
          { name: "湖南", value: 2000 },
          { name: "安徽", value: 24580 },
          { name: "山东", value: 40629 },
          { name: "新疆", value: 36981 },
          { name: "江苏", value: 13569 },
          { name: "浙江", value: 24956 },
          { name: "江西", value: 15194 },
          { name: "湖北", value: 41398 },
          { name: "广西", value: 41150 },
          { name: "甘肃", value: 17630 },
          { name: "山西", value: 27370 },
          { name: "内蒙古", value: 27370 },
          { name: "陕西", value: 97208 },
          { name: "吉林", value: 88290 },
          { name: "福建", value: 19978 },
          { name: "贵州", value: 94485 },
          { name: "广东", value: 89426 },
          { name: "青海", value: 35484 },
          { name: "西藏", value: 97413 },
          { name: "四川", value: 54161 },
          { name: "宁夏", value: 56515 },
          { name: "海南", value: 54871 },
          { name: "台湾", value: 48544 },
          { name: "香港", value: 49474 },
          { name: "澳门", value: 34594 }
        ],
        emphasis: {
          label: { show: true },
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        },
        select: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        }
      }
    ]
  }
});

onMounted(() => {
  let myChart = echarts.init(document.querySelector("#chinaMap"));
  myChart.showLoading();
  echarts.registerMap("china", chinaJson);
  myChart.setOption(state.option);
  myChart.hideLoading();
});

请确保在 data 中的每个数据项都有一个值与之对应。您可以通过检查数据格式、类型等来确保它们是正确的。可以把每一项数据的格式、类型打印出来，确保值是数字类型。

```kotlin
var data = [{
    name: '北京',
    value: 100
}, {
    name: '上海',
    value: 200
}, {
    name: '广州',
    value: 300
}];

for (var i = 0; i < data.length; i++) {
    console.log(data[i].name + ': ' + data[i].value + ' ' + typeof(data[i].value));
}

如果上面的代码输出了正确的数据，说明问题可能不在数据中，那么您可以检查一下绘图代码，确保您将值正确地传递给了 ECharts。

option={
    title: {
      text: "",
      left: "center"
    },
    tooltip: {
      trigger: "item",
      backgroundColor: "white",
      formatter: "{b} - {c}"
    },
    visualMap: {
      top: "center",
      left: "left",
      type: "continuous"
    },
    series: [
      {
        type: "map",
        mapType: "china",
        roam: true,
        label: {
          show: true,
          color: "black"
        },
        labelLayout(params) {
          return {
            hideOverlap: true,
            fontSize: Math.max(params.rect.width / 10, 8)
          };
        },
        data: [
          { name: "北京", value: 350000 },
          { name: "天津", value: 120000 },
          { name: "上海", value: 300000 },
          { name: "重庆", value: 92000 },
          { name: "河北", value: 25000 },
          { name: "河南", value: 20000 },
          { name: "云南", value: 500 },
          { name: "辽宁", value: 3050 },
          { name: "黑龙江", value: 80000 },
          { name: "湖南", value: 2000 },
          { name: "安徽", value: 24580 },
          { name: "山东", value: 40629 },
          { name: "新疆", value: 36981 },
          { name: "江苏", value: 13569 },
          { name: "浙江", value: 24956 },
          { name: "江西", value: 15194 },
          { name: "湖北", value: 41398 },
          { name: "广西", value: 41150 },
          { name: "甘肃", value: 17630 },
          { name: "山西", value: 27370 },
          { name: "内蒙古", value: 27370 },
          { name: "陕西", value: 97208 },
          { name: "吉林", value: 88290 },
          { name: "福建", value: 19978 },
          { name: "贵州", value: 94485 },
          { name: "广东", value: 89426 },
          { name: "青海", value: 35484 },
          { name: "西藏", value: 97413 },
          { name: "四川", value: 54161 },
          { name: "宁夏", value: 56515 },
          { name: "海南", value: 54871 },
          { name: "台湾", value: 48544 },
          { name: "香港", value: 49474 },
          { name: "澳门", value: 34594 }
        ],
        emphasis: {
          label: { show: true },
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        },
        select: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        }
      }
    ]
  }

把上面的代码复制到 代码区域 可以正常显示
https://www.isqqw.com/viewer?id=35225

你或许可以试试 把
formatter 写成这样

 formatter:function(a,b,c){
         console.log(a,b,c)
return a.name+ a.value

      }

• 请看👉 ：初使用ECharts绘制地图

看起来这个问题的根本原因是数据的value字段是NaN，因此图表不能正确地呈现。

有以下几种方法可以解决这个问题：

1.检查data数组中的value字段是否是正确的数字。

2.如果value字段的值是从后端获取的，请检查后端代码，确保它返回的是正确的数字。

3.如果value字段的值是从其他地方获取的，请确保这些值是正确的数字。

4.如果以上所有措施都不能解决问题，您可以在代码中添加调试语句，以更深入了解问题的根本原因。

最后，请确保您已经正确地安装了echarts，并且在您的代码中引入了echarts模块。
望采纳