echarts下钻各乡镇街道json数据

前端技术铺

已于 2023-07-12 18:20:54 修改

阅读量1.4k

点赞数 4

文章标签： echarts json 前端

于 2021-07-05 14:51:15 首次发布

本文链接：https://blog.csdn.net/njj5210/article/details/118489902

版权

该博客介绍了如何利用BigemapGIS软件下载嘉善地区的kml数据，并通过geojson.io将kml转换为json，然后在ECharts中展示嘉善各乡镇的人口密度数据图。通过地图可视化，可以清晰地看到各乡镇人口分布情况。

摘要由CSDN通过智能技术生成

1.下载BigemapGIS软件，右上角搜索街道名称，点击右转箭头下载对应kml数据

2.拿到对应乡镇kml数据后，打开网址 geojson.io | powered by Mapbox ，左上角选择file，选择刚才的kml文件，右侧会生成对应的json数据，拷贝出来即可。

let _this=this;
var myChart = echarts.init(document.getElementById("main"));
echarts.registerMap('嘉善',{嘉善各乡镇地图JSON});

var option = {
  title: {
    text: '嘉善乡镇数据图',
  },
  tooltip: {
    trigger: 'item',
    formatter: '{b}<br/>{c} (p / km2)'
  },
  visualMap: {
    min: 800,
    max: 50000,
    text: ['High', 'Low'],
    realtime: false,
    calculable: true,
    inRange: {
      color: ['lightskyblue', 'yellow', 'orangered']
    }
  },
  series: [
    {
      name: '嘉善乡镇数据图',
      type: 'map',
      mapType: '嘉善', // 自定义扩展图表类型
      label: {
        show: true
      },
      data: [
        {name: '魏塘街道', value: 20057.34},
        {name: '罗星街道', value: 15477.48},
        {name: '惠民街道', value: 31686.1},
        {name: '西塘镇', value: 6992.6},
        {name: '姚庄镇', value: 44045.49},
        {name: '陶庄镇', value: 40689.64},
        {name: '干窑镇', value: 37659.78},
        {name: '天凝镇', value: 45180.97},
        {name: '大云镇', value: 55204.26},
      ],
    }
  ]
}
myChart.setOption(option)

效果还行