charts：绘制县级行政区域（如何白嫖Bigemap）

一、效果

二、echarts地图示例

1、echarts官网找一个地图的示例

2、咱们把usaJson替换成自己的json数据

3、可以看到，当替换成自己的json数据（chaohu.json）后，地图就会显示巢湖市的行政区域

三、如何获取到chaohu.json

1、进入到www.bigemap.com/reader/down...

下载全能版，安装bigemap

2、打开软件，点击【客户号】，加微信，让客服授权

3、选择巢湖市，点击下载按钮，下载巢湖的行政区域

下载下来是一个文件夹，我们需要用到kml文件

4、打开geojson.io/#map=8.79/3...

点击【open】，上传刚刚下载的kml文件

现在可以看到巢湖市的轮廓已经出来了

5、同样的方法，在Bigemap中将【夏阁镇】的kml文件下载下来

再导入到geojson中，可以看到json数据也更新了

再将【烔炀镇】导入，就拿到chaohu.json了

6、找客服

当我在下载某个市的行政图时，希望把镇的边界也下载下来，发现这软件不允许，自己整每个镇，有些麻烦，可以让客服给你下载，他会给你一个xx县_行政边界.kml

四、完整代码

      <div class="row_card">
        <div class="title">任务地图</div>
        <div id="mapChart" style="width: 100%; height: 500px"></div>
      </div>
      
      
      import echarts from 'echarts';
      import chaohu from './chaohu.json';
      
        mounted() {
          this.initMapChart();
        },
        
    // 地图
    initMapChart() {
      const charts = echarts.init(document.getElementById('mapChart'));
      echarts.registerMap('CHAOHU', { features: chaohu.features });
      const opt = {
        tooltip: {
          trigger: 'item',
          textStyle: { fontSize: 16, color: '#fff', fontWeight: 500 },
          formatter: params => {
            console.log('---', params);
            const { name, value, money, num } = params.data;
            const htmlJsx = `
              <div style="border-radius: 8px;padding: 7px 13px; background: linear-gradient(to bottom, rgba(82, 155, 250, 0.8), rgba(142, 192, 246, 0.8));">
                <div style="font-size: 14px; line-height: 20px;">${name || '-'}</div>
                <div style="margin-top: 8px; font-size: 12px;line-height: 17px;">累计采集人数</div>
                <div style="font-size: 12px;color: #FFDC95;line-height: 17px;">${value}</div>
                <div style="margin-top: 8px; font-size: 12px;line-height: 17px;">累计预授信总额(万)</div>
                <div style="font-size: 12px;color: #FFDC95;line-height: 17px;">${value}</div>
                <div style="margin-top: 8px; font-size: 12px;line-height: 17px;">累计用信余额(万)</div>
                <div style="font-size: 12px;color: #FFDC95;line-height: 17px;">${value}</div>
              </div>
            `;
            return htmlJsx;
          },
        },
        geo: [
          // 地图最外城边框
          {
            map: 'CHAOHU',
            aspectScale: 0.75,
            zoom: 0.81,
            layoutCenter: ['50%', '50%'],
            layoutSize: '120%',
            show: true,
            roam: false,
            label: { emphasis: { show: false } },
            itemStyle: {
              normal: {
                borderColor: 'rgba(192,245,249,.8)',
                borderWidth: 1,
                shadowColor: '#6FFDFF',
                shadowOffsetY: 0,
                shadowBlur: 10,
                areaColor: 'rgba(29,85,139,.6)',
              },
            },
            emphasis: { areaColor: 'rgba(29,85,139,.6)' },
          },
          // 地图最外层光晕
          {
            map: 'CHAOHU',
            aspectScale: 0.75,
            zoom: 0.81,
            layoutCenter: ['50%', '50%'],
            layoutSize: '120%',
            show: true,
            roam: false,
            label: { emphasis: { show: false } },
            itemStyle: {
              normal: {
                borderColor: 'rgba(192,245,249,.8)',
                borderWidth: 3,
                shadowColor: '#2C99F6',
                shadowOffsetY: 0,
                shadowBlur: 100,
                areaColor: 'rgba(29,85,139,.6)',
              },
            },
            emphasis: { areaColor: 'rgba(29,85,139,.6)' },
          },
        ],
        series: [
          {
            name: '',
            type: 'map',
            map: 'CHAOHU',
            label: { show: true, color: '#fff' },
            //地图块渐变颜色设置
            itemStyle: {
              normal: {
                areaColor: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: '#00b1fe' },
                    { offset: 1, color: '#0344cf' },
                  ],
                },
                borderColor: '#06b2ef',
                borderWidth: 1,
              },
              emphasis: {
                areaColor: '#01aefb',
                borderColor: '#fff',
                borderWidth: 1,
                shadowColor: 'rgba(0, 255, 255, 0.7)',
                shadowBlur: 10,
                label: { show: false },
              },
            },
            data: [
              { name: '夏阁镇', value: 20057.34, money: 100, num: 20 },
              { name: '烔炀镇', value: 20057.34, money: 100, num: 20 },
            ],
          },
        ],
      };
      charts.setOption(opt);
    },