echarts combined with Ali datav map to be accurate to the district

Mainly record datav, it may be used in the future

Map json

http://datav.aliyun.com/tools/atlas/#&lat=29.67402915372495&lng=121.56761992209837&zoom=8.5

Download the json of the required area (only download the current area or include sub-area for internal area statistics)

Taking Ningbo as an example, the map.js is the Ningbo json downloaded from Ali datav

<template>
  <div id="map" style="width:600px;height:600px"></div>
</template>

<script>
  import { nb } from './map.js';
  var echarts = require('echarts');
  export default {
    name: 'Map',
    data() {
      return {
      };
    },
    props: {

    },
    methods: {
      getList(){
        var myChart = echarts.init(document.getElementById('map'));
        myChart.hideLoading();
        // 判断市本级,或其他平台
        const mapJson = {
          'type': 'FeatureCollection',
          'features': []
        };
        echarts.registerMap('nb', nb);
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>诉求量{c}'
          },
          visualMap: {
            min: 10000,
            max: 50000,
            text: ['诉求量大', '诉求量小'],
            realtime: false,
            calculable: true,
            inRange: {
              color: ['lightskyblue', 'yellow', 'orangered']
            }
          },
          series: [
            {
              name: '诉求量',
              type: 'map',
              mapType: 'nb', // 自定义扩展图表类型
              label: {
                  show: true
              },
              data: [
                { name: '海曙区', value: 20057.34 },
                { name: '江北区', value: 15477.48 },
                { name: '北仑区', value: 31686.1 },
                { name: '镇海区', value: 16992.6 },
                { name: '鄞州区', value: 44045.49 },
                { name: '奉化区', value: 40689.64 },
                { name: '象山县', value: 37659.78 },
                { name: '宁海县', value: 45180.97 },
                { name: '余姚市', value: 55204.26 },
                { name: '慈溪市', value: 21900.9 }
              ]
            }
          ]
        };
        myChart.setOption(option);
       //随窗口大小自动改变
        window.onresize = myChart.resize;
      }
    },
    mounted() {
      this.getList();
    }
  };

</script>