大屏-echarts地图的注册使用

我安装的版本是echarts@4.9.0 内含中国、各省核心js和JSON文件 可直接引用，但没有各市区地图文件，若更新到echarts5以上各省市地图文件也不自带了，需到三方库中自行下载，连接如下：

js文件获取 https://github.com/echarts-maps

JSON文件获取 DataV.GeoAtlas地理小工具系列

 script标签中 echarts注册：

  import echarts from 'echarts';
  import 'echarts/map/js/china.js' // 核心文件
  import  './components/city/cityfiles/yancheng.js' // 核心文件
  import  './components/city/cityfiles/changzhou.js' // 核心文件
  import  './components/city/cityfiles/wuxi.js' // 核心文件
  import yancheng from './components/city/cityfiles/yancheng.json' // 引入json文件
  import changzhou from './components/city/cityfiles/changzhou.json' // 引入json文件
  import wuxi from './components/city/cityfiles/wuxi.json' // 引入json文件
  echarts.registerMap('yancheng', yancheng) // 在echarts中注册使用这个文件
  echarts.registerMap('changzhou', changzhou) // 在echarts中注册使用这个文件
  echarts.registerMap('wuxi', wuxi) // 在echarts中注册使用这个文件

 给个宽高：

      <div id="Charts" style="width:100%; height:100%;position: relative;">

绘制方法：

drawCharts () {
        let myChart = echarts.init(document.getElementById('Charts'))
        let seriesData = [];
        let points1 = []
        let points2 = []
        console.log('-----this.regionData-----',this.regionData);
        
        for (let item of this.regionData) {
          if(this.citycode==320900){  //盐城
            if(item.name=='亭湖区'){
              points1 = [[120.213202,33.393723],[120.213202,33.393723]];
              points2 = [[120.213202,33.393723],[122.016138,33.806525]];
            }else if(item.name=='盐都区'){
              points1 = [[119.938393,33.233457],[119.708427,33.268239]];
              points2 = [[119.708427,33.268239],[119.354279,33.10774]];
            }else if(item.name=='大丰区'){
              points1 = [[120.513308,33.173522],[120.823763,33.304938]];
              points2 = [[120.823763,33.304938],[121.318191,33.326177]];
            }else if(item.name=='响水县'){
              points1 = [[119.675198,34.195351],[119.52342,34.302298]];
              points2 = [[119.52342,34.302298],[119.234309,34.29353]];
            }else if(item.name=='滨海县'){
              points1 = [[119.888563,34.028752],[120.153024,34.328834]];
              points2 = [[120.153024,34.328834],[120.45658,34.351726]];
            }else if(item.name=='阜宁县'){
              points1 = [[119.766681,33.769859],[119.766681,33.769859]];
              points2 = [[119.766681,33.769859],[118.747931,33.883103]];
            }else if(item.name=='射阳县'){
              points1 = [[120.24731,33.787144],[120.59226,33.994279]];
              points2 = [[120.59226,33.994279],[121.010799,33.975121]];
            }else if(item.name=='建湖县'){
              points1 = [[119.791978,33.552548],[119.414833,33.552548]];
              points2 = [[119.414833,33.552548],[118.747931,33.490908]];
            }else if(item.name=='东台市'){
              points1 = [[120.43972,32.849936],[120.954844,32.888752]];
              points2 = [[120.954844,32.888752],[121.676938,32.811103]];
            }else{
              continue
            }
          }else if(this.citycode==320400){   //常州
            if(item.name=='天宁区'){
              points1 = [[120.022793,31.790442],[120.057692,31.838859]];
              points2 = [[120.057692,31.838859],[120.234322,31.84612]];
            }else if(item.name=='钟楼区'){
              points1 = [[119.905534,31.806643],[120.06766,31.751636]];
              points2 = [[120.06766,31.751636],[120.440205,31.664146]];
            }else if(item.name=='戚墅堰区'){
              continue
            }else if(item.name=='新北区'){
              points1 = [[119.935429,31.893015],[119.761312,31.888846]];
              points2 = [[119.761312,31.888846],[119.511745,31.977227]];
            }else if(item.name=='武进区'){
              points1 = [[119.89806,31.641523],[120.226911,31.503204]];
              points2 = [[120.226911,31.503204],[120.308549,31.429283]];
            }else if(item.name=='溧阳市'){
              points1 = [[119.469748,31.463294],[119.257029,31.415971]];
              points2 = [[119.257029,31.415971],[118.984519,31.413999]];
            }else if(item.name=='金坛市'){
              points1 = [[119.600828,31.753601],[119.352465,31.731982]];
              points2 = [[119.352465,31.731982],[119.140896,31.734931]];
            }else if(item.name=='其它区'){
              continue
            }else{
              continue
            }
          }else if(this.citycode==320200){   //无锡
            if(item.name=='锡山区'){
              points1 = [[120.424466,31.673273],[120.527951,31.717024]];
              points2 = [[120.527951,31.717024],[120.800461,31.812074]];
            }else if(item.name=='惠山区'){
              points1 = [[120.212323,31.691957],[120.127235,31.746999]];
              points2 = [[120.127235,31.746999],[119.936937,31.76493]];
            }else if(item.name=='滨湖区'){
              points1 = [[120.264639,31.455685],[120.307758,31.447306]];
              points2 = [[120.307758,31.447306],[120.449762,31.267715]];
            }else if(item.name=='梁溪区'){
              points1 = [[120.276713,31.587678],[120.181493,31.592199]];
              points2 = [[120.181493,31.592199],[119.490229,31.579311]];
            }else if(item.name=='新吴区'){
              points1 = [[120.433953,31.487715],[120.504954,31.44632]];
              points2 = [[120.504954,31.44632],[120.692376,31.413289]];
            }else if(item.name=='江阴市'){
              points1 = [[120.278654,31.87143],[120.049334,31.936263]];
              points2 = [[120.049334,31.936263],[119.885915,31.946865]];
            }else if(item.name=='宜兴市'){
              points1 = [[119.818505,31.282036],[119.429143,31.31243]];
              points2 = [[119.429143,31.31243],[119.23748,31.375592]];
            }else if(item.name=='经济开发区'){
              continue
            }else{
              continue
            }
          }
        
        seriesData.push(
          {
          type:'lines',
          symbol:['image://http-----_point.png'], //起点终点样式
          coordinateSystem :'geo',  //坐标系类型 geo：地理坐标系
          symbolSize:[15,15],
          lineStyle:{
            opacity:1,
            color:'#00C705',
            width:0.5
          },
          data:[{
              coords:points1
              },
          ]
        },{
          type:'lines',
          coordinateSystem :'geo',  //坐标系类型 geo：地理坐标系
          label:{
            show:true,
            width:this.autowidth/16,
            // padding:[30,20],
            height:25,
            color:'#ffffff',
            backgroundColor: {
              image: 'http://------/bg.png'
            },
          },
          lineStyle:{
            opacity:1,
            width:0.5,
            color:'#00C705',
          },
          data:[
            {
              name:item.name,
              coords:points2,
              label: {
                lineHeight:17,
                // padding:[25,20],
                padding:[this.autowidth/112,this.autoheight/144],
                formatter:[
                '{all|已办证：}{one|'+item.papersNum + '\n}{all2|审批中：}{two|'+item.checkNum +'}'
                ].join('\n'),
                rich:{
                  all:{
                    align:'left',
                    color: '#fff',
                    verticalAlign:'top',
                    fontSize:this.fontSize(0.13)

                  },
                  all2:{
                    align:'left',
                    color: '#fff',
                    verticalAlign:'top',
                    fontSize:this.fontSize(0.13)

                  },
                  one:{
                    color: '#00C705',
                    align:'left',
                    verticalAlign:'top',
                    fontSize:this.fontSize(0.13)

                  },
                  two:{
                    color: '#FFC233',
                    align:'left',
                    verticalAlign:'top',
                    fontSize:this.fontSize(0.13)

                  },
             
                }
              }
          }]
        },

        
        );
    }
    if(this.citycode==320900){
        //盐城
        myChart.setOption({
            tooltip: {
              show:true,
              // trigger: 'item',
              // formatter: '{c}'
            },
            series:seriesData,
            geo: {
                map: 'yancheng',
                roam: false, //不开启缩放和平移
                zoom: 1, //视角缩放比例
                label: {
                    show: true,
                    fontSize: '10',
                    color: '#EAEDFF',
                    emphasis: {  //鼠标悬浮相关样式
                      show:false,
                      textStyle: {
                          color: '#F9F9F9'
                      }
                  }
                },
                itemStyle: {
                    normal:{
                    areaColor:'#031C6A',
                    borderColor:'#00FFFF',
                    borderWidth:0.4
                  },
                emphasis: {
                    areaColor: '#5D78F2', //鼠标选择区域颜色
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
                }
            },
        })
    }else if(this.citycode==320400){
      //常州
      myChart.setOption({
            tooltip: {
              show:true,
              // trigger: 'item',
              // formatter: '{c}'
            },
            series:seriesData,
            geo: {
                map: 'changzhou',
                roam: false, //不开启缩放和平移
                zoom: 1.1, //视角缩放比例
                label: {
                    show: true,
                    fontSize: '10',
                    color: '#EAEDFF',
                    emphasis: {  //鼠标悬浮相关样式
                      show:false,
                      textStyle: {
                          color: '#F9F9F9'
                      }
                  }
                },
                itemStyle: {
                    normal:{
                    areaColor:'#031C6A',
                    borderColor:'#00FFFF',
                    borderWidth:0.4
                  },
                emphasis: {
                    areaColor: '#5D78F2', //鼠标选择区域颜色
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
                }
            },
        })
    }else if(this.citycode==320200){
      //无锡
      myChart.setOption({
            tooltip: {
              show:true,
              // trigger: 'item',
              // formatter: '{c}'
            },
            series:seriesData,
            geo: {
                map: 'wuxi',
                roam: false, //不开启缩放和平移
                zoom: 1.1, //视角缩放比例
                label: {
                    show: true,
                    fontSize: '10',
                    color: '#EAEDFF',
                    emphasis: {  //鼠标悬浮相关样式
                      show:false,
                      textStyle: {
                          color: '#F9F9F9'
                      }
                  }
                },
                itemStyle: {
                    normal:{
                    areaColor:'#031C6A',
                    borderColor:'#00FFFF',
                    borderWidth:0.4
                  },
                emphasis: {
                    areaColor: '#5D78F2', //鼠标选择区域颜色
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
                }
            },
        })
    }

        window.addEventListener('resize', function() {
          myChart.resize();
        });
   
    },

 给每个区域添加提示框中间的连接线的的时候，是push了两个对象，直接数组生成折线的方法对本项目不适用；另外需要注意的一点是整个echarts图表中文字的自适应，我在项目中自定义的fontsize方法在需要自适应的地方使用：

fontSize(res) { // 如在1920屏宽下字体设置为12px,就可以传入0.12给fontSize fontSize(0.12)
        let docEl = document.documentElement,
          clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        if (!clientWidth) return;
        let fontSize = 100 * (clientWidth / 1920);
        return res * fontSize;
      },

监听窗口变化：

window.addEventListener('resize', function() {
        _this.autoWidth();
        _this.autoHeight()
      });

//解决window.resize 不生效的问题

 效果如下：

 先这样吧