使用JavaScript和Echarts5版本绘制中国地图Map

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

$.get('https://geojson.cn/api/data/china.json', function (ret) {
  echarts.registerMap('china', ret);
  option = {
    tooltip: {
      show: true,
      trigger: 'item'
    },
    visualMap: {
      left: 'left',
      bottom: '10%',
      min: 5,
      max: 100,
      orient: 'vertical',
      text: ['max', 'min'],
      realtime: true,
      calculable: true,
      inRange: {
        color: ['#00bb91', '#00aadf', '#002a5f']
      }
    },
    series: [
      {
        name: '中国地图',
        type: 'map',
        map: 'china',
        roam: true,
        emphasis: {
          label: {
            show: true,
            color: '#37a2da'
          }
        },
        selectedMode: true,
        label: {
          show: true,
          color: '#ffdb5c'
        },
        data: [
          { name: '台湾', value: 39.4 },
          { name: '河北', value: 56 },
          { name: '山西', value: 79 },
          { name: '内蒙古', value: 60 },
          { name: '安徽', value: 78 },
          { name: '澳门', value: 99.4 },
          { name: '北京', value: 25.6 },
          { name: '重庆', value: 54.3 },
          { name: '福建', value: 5.7 },
          { name: '甘肃', value: 6.9 },
          { name: '广东', value: 158.4 },
          { name: '广西', value: 167.9 },
          { name: '贵州', value: 94.7 },
          { name: '海南', value: 6.1 },
          { name: '黑龙江', value: 108.3 },
          { name: '河南', value: 72.5 },
          { name: '湖北', value: 194 },
          { name: '湖南', value: 85.6 },
          { name: '江苏', value: 94.1 },
          { name: '江西', value: 24.5 },
          { name: '吉林', value: 98 },
          { name: '辽宁', value: 175 },
          { name: '宁夏', value: 15.4 },
          { name: '青海', value: 78.6 },
          { name: '山东', value: 38.9 },
          { name: '上海', value: 54.6 },
          { name: '四川', value: 24 },
          { name: '天津', value: 68 },
          { name: '香港', value: 174 },
          { name: '新疆', value: 10.1 },
          { name: '西藏', value: 2.6 },
          { name: '云南', value: 6.1 },
          { name: '浙江', value: 54.3 },
          { name: '陕西', value: 76.2 },
          { name: '南海诸岛', value: 5.7 }
        ]
      }
    ]
  };
  myChart.setOption(option);
});

option && myChart.setOption(option);

Echarts从5.0版本开始不再内置地图数据,其中,$.get('https://geojson.cn/api/data/china.json' 是使用了JQuery后发起AJAX请求获取中国地图数据,如果使用axios或其他本地资源方式可以自行根据需求修改。

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值