TastefuL847 2023-02-13 17:03 采纳率: 89.4%
浏览 32
已结题

使用echarts绘制地图

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

img


代码如下

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();
});

展开全部

  • 写回答

4条回答 默认 最新

  • MarkHan_ 2023-02-14 01:22
    关注

    请确保在 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。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(3条)
编辑
预览

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 2月14日
  • 已采纳回答 2月14日
  • 创建了问题 2月13日

悬赏问题

  • ¥15 esp8266 tally灯 接收端改为发射端
  • ¥30 Labview代码调用access 数据库,相同代码其中一个调用不出来是为什么
  • ¥15 基于51单片机的交通灯系统,找改程序有点急
  • ¥25 急!有人可以做数据结构作业么,有具体要求
  • ¥15 java启动jar包后,运行过程中宕机
  • ¥500 高有偿提问!求优化设计微信小程序
  • ¥15 matlab在安装时报错 无法找到入口 无法定位程序输入点
  • ¥15 Android Studio webview 的使用问题, 播放器横屏全屏
  • ¥15 删掉jdk后重新下载,Java web所需要的eclipse无法使用
  • ¥15 uniapp正式环境中通过webapi将本地数据推送到设备出现的跨域问题
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部