echarts引入中国地图并且下探到省

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

一、首先就是项目中引入地图包.

由于echarts5.0以后不再提供map地图包.只好网上招.(捷径:echart4.9之前的版本都有map地图包可以下载下来拷贝过来使用.虽然有乱码问题.但是不影响使用)

二、代码如下

1.项目中首先要引入json中国地图

上代码

<template>
  <div class="echartsMapAllDemo">
    <div ref="chart" style="width:60.5rem;height:67.5rem;" id="left_map"></div>
  </div>
</template>

<script>
  const echarts = require('echarts');
  import china from '@/utils/china.json'
  import axios from 'axios'
  var provinces = ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu',
    'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi',
    'hainan',
    'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing',
    'tianjin', 'chongqing', 'xianggang', 'aomen', 'taiwan'
  ]
  var provincesText = ['上海', '河北', '山西', '内蒙古自治区', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北',
    '湖南',
    '广东', '广西壮族自治区', '海南', '四川', '贵州', '云南', '西藏自治区', '陕西', '甘肃', '青海', '宁夏', '新疆维吾尔自治区', '北京', '天津', '重庆',
    '香港特别行政区',
    '澳门特别行政区', '台湾'
  ]
  export default {
    created() {},
    mounted() {
      this.$nextTick(() => {
        this.initMap()
      })
    },
    data() {
      return {
        map: {},
      }
    },
    methods: {
      getMapOpt(place, cityList) {
        var that = this
        // console.log('获取的省份', place)
        var dataList = [{
            name: "北京",
            value: 177,
            provinceId: 110000

          },
          {
            name: "天津",
            value: 42,
            provinceId: 120000
          },
          {
            name: "河北",
            value: 102,
            provinceId: 130000

          },
          {
            name: "山西",
            value: 81,
            provinceId: 140000
          },
          {
            name: "内蒙古自治区",
            value: 47,
            provinceId: 150000
          },
          {
            name: "辽宁",
            value: 67,
            provinceId: 210000
          },
          {
            name: "吉林",
            value: 82,
            provinceId: 220000
          },
          {
            name: "黑龙江",
            value: 66,
            provinceId: 230000
          },
          {
            name: "上海",
            value: 24,
            provinceId: 310000
          },
          {
            name: "江苏",
            value: 90000,
            provinceId: 320000
          },
          {
            name: "浙江",
            value: 500,
            provinceId: 330000
          },
          {
            name: "安徽",
            value: 1000,
            provinceId: 340000
          },
          {
            name: "福建",
            value: 116,
            provinceId: 350000
          },
          {
            name: "江西",
            value: 91,
            provinceId: 360000
          },
          {
            name: "山东",
            value: 119,
            provinceId: 370000
          },
          {
            name: "河南",
            value: 137,
            provinceId: 410000
          },
          {
            name: "湖北",
            value: 116,
            provinceId: 420000
          },
          {
            name: "湖南",
            value: 114,
            provinceId: 430000
          },
          {
            name: "重庆",
            value: 91,
            provinceId: 500000
          },
          {
            name: "四川",
            value: 125,
            provinceId: 510000
          },
          {
            name: "贵州",
            value: 62,
            provinceId: 520000
          },
          {
            name: "云南",
            value: 83,
            provinceId: 530000
          },
          {
            name: "西藏自治区",
            value: 900000,
            provinceId: 540000
          },
          {
            name: "陕西",
            value: 80,
            provinceId: 610000
          },
          {
            name: "甘肃",
            value: 56,
            provinceId: 620000
          },
          {
            name: "青海",
            value: 10,
            provinceId: 630000
          },
          {
            name: "宁夏回族自治区",
            value: 18,
            provinceId: 640000
          },
          {
            name: "新疆维吾尔自治区",
            value: 67,
            provinceId: 650000
          },
          {
            name: "广东",
            value: 123,
            provinceId: 440000
          },
          {
            name: "广西壮族自治区",
            value: 59,
            provinceId: 450000
          },
          {
            name: "海南",
            value: 14,
            provinceId: 460000
          },
          {
            name: "台湾",
            value: 900,
            provinceId: 710000

          },
          {
            name: "香港特别行政区",
            value: 900,
            provinceId: 810000

          },
          {
            name: "澳门特别行政区",
            value: 900,
            provinceId: 820000

          }
        ];
        //dataList 在这里处理数据
        // dataList.forEach((item) => {
        //   this.provinceListMes.forEach(ins => {
        //     if (item.provinceId == ins.provinceId) {
        //       // console.l'og(item.value, ins.statis)
        //     }
        //   })
        // })
        let option = {
          title: {
            text: that.charsTit,
            left: "center",
            textStyle: {
              fontStyle: '',
              fontWeight: 'bold',
              fontSize: '20',
              color: '#000'
            }
          },
          tooltip: {
            // background: '',
            // trigger: 'item', // 触发类型， 'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
            triggerOn: 'mousemove', // 提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'不在 'mousemove' 或 'click' 时触发
            showContent: true, //是否显示提示框浮层
            alwaysShowContent: false, //是否永远显示提示框内容
            showDelay: 0, //浮层显示的延迟，单位为 ms
            hideDelay: 50, //浮层隐藏的延迟，单位为 ms
            enterable: false, //鼠标是否可进入提示框浮层中
            confine: false, //是否将 tooltip 框限制在图表的区域内
            transitionDuration: 0.1, //提示框浮层的移动动画过渡时间，单位是 s,设置为 0 的时候会紧跟着鼠标移动
            // position: ['50%', '50%'],                    //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数，inside鼠标所在图形的内部中心位置，top、left、bottom、right鼠标所在图形上侧，左侧，下侧，右侧，
            // backgroundColor: "transparent", //标题背景色
            // borderColor: "#FFFFFF", //边框颜色
            // borderWidth: 0, //边框线宽
            padding: [5, 10], //图例内边距，单位px  5  [5, 10]  [5,10,5,10]
            textStyle: 'mytextStyle', //文本样式
            formatter: function(params) { //提示框浮层内容格式器，支持字符串模板和回调函数两种形式
              // console.log(params)
              return '地区：' + params.name + '<br />' + '当前地区信息量：' + '：' + (params.value || 0);
            },
            // formatter: "地区:{b}</br>当前地区用户量:{c}",
            valueFormatter: (value) => '$' + value.toFixed(2)
          },
          //右下角的示例图
          visualMap: { //这里的示例图可以根据需求自己调整
            type: 'piecewise', 
            top: 'middle',
            right: '0',
            // left: 'right',
            itemSymbol: 'circle',
            align: 'left',
            pieces: [{ 
                lt: 2000,
                label: '2000以下',
                color: '#e0f3f8'
              },
              {
                gte: 2000,
                lt: 5000,
                label: '2000以上',
                color: '#abd9e9',
              },
              {
                gte: 5000,
                lt: 10000,
                label: '5000以上',
                color: '#74add1'
              },
              {
                gte: 10000,
                lt: 20000,
                label: '10000以上',
                color: '#4575b4'
              },
              {
                gte: 20000,
                label: '20000以上',
                color: '#313695'
              },
            ],
          },
          toolbox: [{
            show: true,
            //orient: 'vertical',
            left: 'left',
            top: 'top',
            feature: {
              // dataView: {
              //   readOnly: false
              // },
              // restore: {},
              // saveAsImage: {}
            },
            toolbox: {
              show: true,
              showTitle: false, // 隐藏默认文字，否则两者位置会重叠
              feature: {
                saveAsImage: {
                  show: true,
                  title: 'Save As Image'
                },
                dataView: {
                  show: true,
                  title: 'Data View'
                },
              },
            },
          }],
          //这个属性配置一定要有，要不然无法实现光圈效果
          series: [{
            type: 'map',
            // roam: place ? true : false,// 全国不能缩放/省能缩放
            roam: false,
            map: place || 'china',
            name: "中国地图",
            colorBy: 'data',
            data: cityList || dataList,
            label: {
              show: false,
              position: 'inside'
            },

          }]
        };
        return option
      },
      // 显示各省的地图 放到 /src/assets/map/json/china.json即可
      async getProvinceMapOpt(provinceAlphabet) {
        console.log('获取地图信息2', provinceAlphabet)
        await axios.get('province/' + provinceAlphabet + '.json').then((res) => {
          echarts.registerMap(provinceAlphabet, {
            geoJSON: res.data
          })
          //在这里得到数据根据自己的业务需求来调整
        })
      },
      initMap() {
        echarts.registerMap('china', {
          geoJSON: china
        })
        this.map = echarts.init(this.$refs.chart)
        const option = this.getMapOpt()
        if (option && typeof option === 'object') {
          this.map.setOption(option, true)
          window.addEventListener("resize", function() {
            this.map.resize();
          });
        }
        this.map.off('click') //由于地图点击次数会累加，所以加这个事件来防止多次触发
        this.map.on('click', (param) => {
          // console.log(param)
          event.stopPropagation() // 阻止冒泡事件
          // 找到省份名
          const provinceIndex = provincesText.findIndex(x => {
            return param.name === x
          })

          //在这里判断provincesText中是否包含点击的省份名，有则渲染省级地图，无则无处理（需要可从此获得）
          if (provinceIndex === -1) return
          const provinceAlphabet = provinces[provinceIndex]
          // 重新渲染各省份地图
          this.getProvinceMapOpt(provinceAlphabet)
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .echartsMapAllDemo {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
    padding-top: 1.875rem;
    background-color: #FFF;
    border-radius: 0.625rem;
    padding: 0.625rem;
  }
</style>

注意避坑：全国自治区的名称(也就是china.json文件的name值)要和以上的provincesText 对照.否则颜色不会正常展示并且不会下探(例如:我们项目用的是：‘西藏自治区 ’，官方提供的name是‘西藏’)其他的有内蒙古，新疆…遇到后自己根据需求做出调整一样即可

2.免费地图数据

这里免费提供一份完整的中国地图数据.
链接：https://pan.baidu.com/s/1-lhNNsMtQ_8ZKi-EtBlFAQ
提取码：hG65

echart4.9版本的地图包
链接：https://pan.baidu.com/s/1b4iniXPImg4DSW_kdXkFCg
提取码：hG66

总结

主要是多看文档.eharts的引入和使用其实很简单.有什么问题欢迎大家提出