1. 公司做大屏,需要实现一个很具红色的点,用折线引出每个点的提示框

   
   
   image.png

2. 具体思路就是用echarts的地图结合canvas画出这样的效果,界面上的提示框要有轮播效果。

3. 第一步,先画地图,具体参照echarts官方文档使用,先搞个div,然后再画地图,vue中别忘了安装echarts

       <div class="survey-map" id="surveyMap"></div>
       convertData(data) {
     var res = [];
     for (var i = 0; i < data.length; i++) {
       var geoCoord = this.geoCoordMap[data[i].name];
       if (geoCoord) {
         res.push({
           name: data[i].name,
           value: geoCoord.concat(data[i].value)
         });
       }
     }
     return res;
   },
   drwaCharts() {
     var data = [
       { name: "海门", value: 9 },
       { name: "鄂尔多斯", value: 12 },
       { name: "招远", value: 12 },
       { name: "舟山", value: 12 },
       { name: "齐齐哈尔", value: 14 },
       { name: "盐城", value: 15 },
       { name: "赤峰", value: 16 },
       { name: "青岛", value: 18 },
       { name: "乳山", value: 18 },
       { name: "金昌", value: 19 },
       { name: "泉州", value: 21 },
       { name: "莱西", value: 21 },
       { name: "日照", value: 21 },
       { name: "胶南", value: 22 },
       { name: "南通", value: 23 },
       { name: "拉萨", value: 24 },
       { name: "云浮", value: 24 },
       { name: "梅州", value: 25 },
       { name: "文登", value: 25 },
       { name: "上海", value: 25 },
       { name: "攀枝花", value: 25 },
       { name: "威海", value: 25 },
       { name: "承德", value: 25 },
       { name: "厦门", value: 26 },
       { name: "汕尾", value: 26 },
       { name: "潮州", value: 26 },
       { name: "丹东", value: 27 },
       { name: "太仓", value: 27 },
       { name: "曲靖", value: 27 },
       { name: "烟台", value: 28 },
       { name: "福州", value: 29 },
       { name: "瓦房店", value: 30 },
       { name: "即墨", value: 30 },
       { name: "抚顺", value: 31 },
       { name: "玉溪", value: 31 },
       { name: "张家口", value: 31 },
       { name: "阳泉", value: 31 },
       { name: "莱州", value: 32 },
       { name: "湖州", value: 32 },
       { name: "汕头", value: 32 },
       { name: "昆山", value: 33 },
       { name: "宁波", value: 33 },
       { name: "湛江", value: 33 },
       { name: "揭阳", value: 34 },
       { name: "荣成", value: 34 },
       { name: "连云港", value: 35 },
       { name: "葫芦岛", value: 35 },
       { name: "常熟", value: 36 },
       { name: "东莞", value: 36 },
       { name: "河源", value: 36 },
       { name: "淮安", value: 36 },
       { name: "泰州", value: 36 },
       { name: "南宁", value: 37 },
       { name: "营口", value: 37 },
       { name: "惠州", value: 37 },
       { name: "江阴", value: 37 },
       { name: "蓬莱", value: 37 },
       { name: "韶关", value: 38 },
       { name: "嘉峪关", value: 38 },
       { name: "广州", value: 38 },
       { name: "延安", value: 38 },
       { name: "太原", value: 39 },
       { name: "清远", value: 39 },
       { name: "中山", value: 39 },
       { name: "昆明", value: 39 },
       { name: "寿光", value: 40 },
       { name: "盘锦", value: 40 },
       { name: "长治", value: 41 },
       { name: "深圳", value: 41 },
       { name: "珠海", value: 42 },
       { name: "宿迁", value: 43 },
       { name: "咸阳", value: 43 },
       { name: "铜川", value: 44 },
       { name: "平度", value: 44 },
       { name: "佛山", value: 44 },
       { name: "海口", value: 44 },
       { name: "江门", value: 45 },
       { name: "章丘", value: 45 },
       { name: "肇庆", value: 46 },
       { name: "大连", value: 47 },
       { name: "临汾", value: 47 },
       { name: "吴江", value: 47 },
       { name: "石嘴山", value: 49 },
       { name: "沈阳", value: 50 },
       { name: "苏州", value: 50 },
       { name: "茂名", value: 50 },
       { name: "嘉兴", value: 51 },
       { name: "长春", value: 51 },
       { name: "胶州", value: 52 },
       { name: "银川", value: 52 },
       { name: "张家港", value: 52 },
       { name: "三门峡", value: 53 },
       { name: "锦州", value: 54 },
       { name: "南昌", value: 54 },
       { name: "柳州", value: 54 },
       { name: "三亚", value: 54 },
       { name: "自贡", value: 56 },
       { name: "吉林", value: 56 },
       { name: "阳江", value: 57 },
       { name: "泸州", value: 57 },
       { name: "西宁", value: 57 },
       { name: "宜宾", value: 58 },
       { name: "呼和浩特", value: 58 },
       { name: "成都", value: 58 },
       { name: "大同", value: 58 },
       { name: "镇江", value: 59 },
       { name: "桂林", value: 59 },
       { name: "张家界", value: 59 },
       { name: "宜兴", value: 59 },
       { name: "北海", value: 60 },
       { name: "西安", value: 61 },
       { name: "金坛", value: 62 },
       { name: "东营", value: 62 },
       { name: "牡丹江", value: 63 },
       { name: "遵义", value: 63 },
       { name: "绍兴", value: 63 },
       { name: "扬州", value: 64 },
       { name: "常州", value: 64 },
       { name: "潍坊", value: 65 },
       { name: "重庆", value: 66 },
       { name: "台州", value: 67 },
       { name: "南京", value: 67 },
       { name: "滨州", value: 70 },
       { name: "贵阳", value: 71 },
       { name: "无锡", value: 71 },
       { name: "本溪", value: 71 },
       { name: "克拉玛依", value: 72 },
       { name: "渭南", value: 72 },
       { name: "马鞍山", value: 72 },
       { name: "宝鸡", value: 72 },
       { name: "焦作", value: 75 },
       { name: "句容", value: 75 },
       { name: "北京", value: 79 },
       { name: "徐州", value: 79 },
       { name: "衡水", value: 80 },
       { name: "包头", value: 80 },
       { name: "绵阳", value: 80 },
       { name: "乌鲁木齐", value: 84 },
       { name: "枣庄", value: 84 },
       { name: "杭州", value: 84 },
       { name: "淄博", value: 85 },
       { name: "鞍山", value: 86 },
       { name: "溧阳", value: 86 },
       { name: "库尔勒", value: 86 },
       { name: "安阳", value: 90 },
       { name: "开封", value: 90 },
       { name: "济南", value: 92 },
       { name: "德阳", value: 93 },
       { name: "温州", value: 95 },
       { name: "九江", value: 96 },
       { name: "邯郸", value: 98 },
       { name: "临安", value: 99 },
       { name: "兰州", value: 99 },
       { name: "沧州", value: 100 },
       { name: "临沂", value: 103 },
       { name: "南充", value: 104 },
       { name: "天津", value: 105 },
       { name: "富阳", value: 106 },
       { name: "泰安", value: 112 },
       { name: "诸暨", value: 112 },
       { name: "郑州", value: 113 },
       { name: "哈尔滨", value: 114 },
       { name: "聊城", value: 116 },
       { name: "芜湖", value: 117 },
       { name: "唐山", value: 119 },
       { name: "平顶山", value: 119 },
       { name: "邢台", value: 119 },
       { name: "德州", value: 120 },
       { name: "济宁", value: 120 },
       { name: "荆州", value: 127 },
       { name: "宜昌", value: 130 },
       { name: "义乌", value: 132 },
       { name: "丽水", value: 133 },
       { name: "洛阳", value: 134 },
       { name: "秦皇岛", value: 136 },
       { name: "株洲", value: 143 },
       { name: "石家庄", value: 147 },
       { name: "莱芜", value: 148 },
       { name: "常德", value: 152 },
       { name: "保定", value: 153 },
       { name: "湘潭", value: 154 },
       { name: "金华", value: 157 },
       { name: "岳阳", value: 169 },
       { name: "长沙", value: 175 },
       { name: "衢州", value: 177 },
       { name: "廊坊", value: 193 },
       { name: "菏泽", value: 194 },
       { name: "合肥", value: 229 },
       { name: "武汉", value: 273 },
       { name: "大庆", value: 279 }
     ];
     var geoCoordMap = {
       海门: [121.15, 31.89],
       鄂尔多斯: [109.781327, 39.608266],
       招远: [120.38, 37.35],
       舟山: [122.207216, 29.985295],
       齐齐哈尔: [123.97, 47.33],
       盐城: [120.13, 33.38],
       赤峰: [118.87, 42.28],
       青岛: [120.33, 36.07],
       乳山: [121.52, 36.89],
       金昌: [102.188043, 38.520089],
       泉州: [118.58, 24.93],
       莱西: [120.53, 36.86],
       日照: [119.46, 35.42],
       胶南: [119.97, 35.88],
       南通: [121.05, 32.08],
       拉萨: [91.11, 29.97],
       云浮: [112.02, 22.93],
       梅州: [116.1, 24.55],
       文登: [122.05, 37.2],
       上海: [121.48, 31.22],
       攀枝花: [101.718637, 26.582347],
       威海: [122.1, 37.5],
       承德: [117.93, 40.97],
       厦门: [118.1, 24.46],
       汕尾: [115.375279, 22.786211],
       潮州: [116.63, 23.68],
       丹东: [124.37, 40.13],
       太仓: [121.1, 31.45],
       曲靖: [103.79, 25.51],
       烟台: [121.39, 37.52],
       福州: [119.3, 26.08],
       瓦房店: [121.979603, 39.627114],
       即墨: [120.45, 36.38],
       抚顺: [123.97, 41.97],
       玉溪: [102.52, 24.35],
       张家口: [114.87, 40.82],
       阳泉: [113.57, 37.85],
       莱州: [119.942327, 37.177017],
       湖州: [120.1, 30.86],
       汕头: [116.69, 23.39],
       昆山: [120.95, 31.39],
       宁波: [121.56, 29.86],
       湛江: [110.359377, 21.270708],
       揭阳: [116.35, 23.55],
       荣成: [122.41, 37.16],
       连云港: [119.16, 34.59],
       葫芦岛: [120.836932, 40.711052],
       常熟: [120.74, 31.64],
       东莞: [113.75, 23.04],
       河源: [114.68, 23.73],
       淮安: [119.15, 33.5],
       泰州: [119.9, 32.49],
       南宁: [108.33, 22.84],
       营口: [122.18, 40.65],
       惠州: [114.4, 23.09],
       江阴: [120.26, 31.91],
       蓬莱: [120.75, 37.8],
       韶关: [113.62, 24.84],
       嘉峪关: [98.289152, 39.77313],
       广州: [113.23, 23.16],
       延安: [109.47, 36.6],
       太原: [112.53, 37.87],
       清远: [113.01, 23.7],
       中山: [113.38, 22.52],
       昆明: [102.73, 25.04],
       寿光: [118.73, 36.86],
       盘锦: [122.070714, 41.119997],
       长治: [113.08, 36.18],
       深圳: [114.07, 22.62],
       珠海: [113.52, 22.3],
       宿迁: [118.3, 33.96],
       咸阳: [108.72, 34.36],
       铜川: [109.11, 35.09],
       平度: [119.97, 36.77],
       佛山: [113.11, 23.05],
       海口: [110.35, 20.02],
       江门: [113.06, 22.61],
       章丘: [117.53, 36.72],
       肇庆: [112.44, 23.05],
       大连: [121.62, 38.92],
       临汾: [111.5, 36.08],
       吴江: [120.63, 31.16],
       石嘴山: [106.39, 39.04],
       沈阳: [123.38, 41.8],
       苏州: [120.62, 31.32],
       茂名: [110.88, 21.68],
       嘉兴: [120.76, 30.77],
       长春: [125.35, 43.88],
       胶州: [120.03336, 36.264622],
       银川: [106.27, 38.47],
       张家港: [120.555821, 31.875428],
       三门峡: [111.19, 34.76],
       锦州: [121.15, 41.13],
       南昌: [115.89, 28.68],
       柳州: [109.4, 24.33],
       三亚: [109.511909, 18.252847],
       自贡: [104.778442, 29.33903],
       吉林: [126.57, 43.87],
       阳江: [111.95, 21.85],
       泸州: [105.39, 28.91],
       西宁: [101.74, 36.56],
       宜宾: [104.56, 29.77],
       呼和浩特: [111.65, 40.82],
       成都: [104.06, 30.67],
       大同: [113.3, 40.12],
       镇江: [119.44, 32.2],
       桂林: [110.28, 25.29],
       张家界: [110.479191, 29.117096],
       宜兴: [119.82, 31.36],
       北海: [109.12, 21.49],
       西安: [108.95, 34.27],
       金坛: [119.56, 31.74],
       东营: [118.49, 37.46],
       牡丹江: [129.58, 44.6],
       遵义: [106.9, 27.7],
       绍兴: [120.58, 30.01],
       扬州: [119.42, 32.39],
       常州: [119.95, 31.79],
       潍坊: [119.1, 36.62],
       重庆: [106.54, 29.59],
       台州: [121.420757, 28.656386],
       南京: [118.78, 32.04],
       滨州: [118.03, 37.36],
       贵阳: [106.71, 26.57],
       无锡: [120.29, 31.59],
       本溪: [123.73, 41.3],
       克拉玛依: [84.77, 45.59],
       渭南: [109.5, 34.52],
       马鞍山: [118.48, 31.56],
       宝鸡: [107.15, 34.38],
       焦作: [113.21, 35.24],
       句容: [119.16, 31.95],
       北京: [116.46, 39.92],
       徐州: [117.2, 34.26],
       衡水: [115.72, 37.72],
       包头: [110, 40.58],
       绵阳: [104.73, 31.48],
       乌鲁木齐: [87.68, 43.77],
       枣庄: [117.57, 34.86],
       杭州: [120.19, 30.26],
       淄博: [118.05, 36.78],
       鞍山: [122.85, 41.12],
       溧阳: [119.48, 31.43],
       库尔勒: [86.06, 41.68],
       安阳: [114.35, 36.1],
       开封: [114.35, 34.79],
       济南: [117, 36.65],
       德阳: [104.37, 31.13],
       温州: [120.65, 28.01],
       九江: [115.97, 29.71],
       邯郸: [114.47, 36.6],
       临安: [119.72, 30.23],
       兰州: [103.73, 36.03],
       沧州: [116.83, 38.33],
       临沂: [118.35, 35.05],
       南充: [106.110698, 30.837793],
       天津: [117.2, 39.13],
       富阳: [119.95, 30.07],
       泰安: [117.13, 36.18],
       诸暨: [120.23, 29.71],
       郑州: [113.65, 34.76],
       哈尔滨: [126.63, 45.75],
       聊城: [115.97, 36.45],
       芜湖: [118.38, 31.33],
       唐山: [118.02, 39.63],
       平顶山: [113.29, 33.75],
       邢台: [114.48, 37.05],
       德州: [116.29, 37.45],
       济宁: [116.59, 35.38],
       荆州: [112.239741, 30.335165],
       宜昌: [111.3, 30.7],
       义乌: [120.06, 29.32],
       丽水: [119.92, 28.45],
       洛阳: [112.44, 34.7],
       秦皇岛: [119.57, 39.95],
       株洲: [113.16, 27.83],
       石家庄: [114.48, 38.03],
       莱芜: [117.67, 36.19],
       常德: [111.69, 29.05],
       保定: [115.48, 38.85],
       湘潭: [112.91, 27.87],
       金华: [119.64, 29.12],
       岳阳: [113.09, 29.37],
       长沙: [113, 28.21],
       衢州: [118.88, 28.97],
       廊坊: [116.7, 39.53],
       菏泽: [115.480656, 35.23375],
       合肥: [117.27, 31.86],
       武汉: [114.31, 30.52],
       大庆: [125.03, 46.58]
     };

     var convertData = function(data) {
       var res = [];
       for (var i = 0; i < data.length; i++) {
         var geoCoord = geoCoordMap[data[i].name];
         if (geoCoord) {
           res.push({
             name: data[i].name,
             value: geoCoord.concat(data[i].value)
           });
         }
       }
       return res;
     };

     var option = {
       tooltip: {},
       legend: {
         left: "left",
         data: ["强", "中", "弱"],
         textStyle: {
           color: "#ccc"
         }
       },
       // backgroundColor: {
       //   type: "linear",
       //   x: 0,
       //   y: 0,
       //   x2: 1,
       //   y2: 1,
       //   colorStops: [
       //     {
       //       offset: 0,
       //       color: "#0f2c70" // 0% 处的颜色
       //     },
       //     {
       //       offset: 1,
       //       color: "#091732" // 100% 处的颜色
       //     }
       //   ],
       //   globalCoord: false // 缺省为 false
       // },
       geo: {
         map: "china",
         show: true,
         roam: true,
         label: {
           emphasis: {
             show: false
           }
         },
         itemStyle: {
           normal: {
             areaColor: "#091632",
             borderColor: "#1773c3",
             shadowColor: "#1773c3",
             shadowBlur: 20
           }
         }
       },
       series: [
         {
           type: "map",
           map: "china",
           geoIndex: 1,
           aspectScale: 0.75, //长宽比
           showLegendSymbol: true, // 存在legend时显示
           label: {
             normal: {
               show: false
             },
             emphasis: {
               show: false,
               textStyle: {
                 color: "#fff"
               }
             }
           },
           roam: true,
           itemStyle: {
             normal: {
               areaColor: "#031525",
               borderColor: "#3B5077",
               borderWidth: 1
             },
             emphasis: {
               areaColor: "#0f2c70"
             }
           },
           data: [{ name: "北京", value: 21300 }]
         },
         {
           name: "城市",
           type: "effectScatter",
           coordinateSystem: "geo",
           data: convertData(
             data
               .sort(function(a, b) {
                 return b.value - a.value;
               })
               .slice(7, 12)
           ),
           symbolSize: function(val) {
             return val[2] / 20;
           },
           label: {
             normal: {
               formatter: "{b}",
               position: "right",
               show: false
             },
             emphasis: {
               show: true
             }
           },
           itemStyle: {
             normal: {
               color: "yellow",
               shadowBlur: 10,
               shadowColor: "#333"
             }
           }
         },
         {
           name: "城市",
           type: "effectScatter",
           coordinateSystem: "geo",
           data: convertData(
             data
               .sort(function(a, b) {
                 return b.value - a.value;
               })
               .slice(13, 20)
           ),
           symbolSize: function(val) {
             return val[2] / 20;
           },
           label: {
             normal: {
               formatter: "{b}",
               position: "right",
               show: false
             },
             emphasis: {
               show: true
             }
           },
           itemStyle: {
             normal: {
               color: "blue",
               shadowBlur: 10,
               shadowColor: "#333"
             }
           }
         },

         {
           name: "前5",
           type: "effectScatter",
           coordinateSystem: "geo",
           data: convertData(
             data
               .sort(function(a, b) {
                 return b.value - a.value;
               })
               .slice(0, 6)
           ),
           symbolSize: function(val) {
             return val[2] / 20;
           },
           showEffectOn: "render",
           rippleEffect: {
             brushType: "stroke"
           },
           hoverAnimation: true,
           label: {
             normal: {
               formatter: "{b}",
               position: "right",
               show: false
             }
           },
           itemStyle: {
             normal: {
               color: "red",
               shadowBlur: 10,
               shadowColor: "#333"
             }
           },
           zlevel: 1
         }
       ]
     };
   },

4.画出来的效果差不多是这样,红线不算啊

image.png

5.然后就开始canvas画线了

• 第一步是获得canvas划线的起点,因为画地图的时候只有经纬度,所以我们要想办法把经纬度转化为界面中地图所在div内的坐标

 var seriesModel = this.myChart
        .getModel()
        .getSeriesByIndex(option.series.length - 1);
      // 获取地理坐标系实例
      var coordSys = seriesModel.coordinateSystem;
      // dataToPoint 相当于 getPosByGeo
      var city = temp[index].name;
      var point = coordSys.dataToPoint(geoCoordMap[city]);
      // 直接显示layer,拿到其实坐标
      this.tempPoint = point;

• 拿到了开始左边,只要调整折点坐标和终点左边就可以开始canvas划线了,因为画出来的线会被地图覆盖掉一部分,这是层级的关系,用z-index就可以解决了

   <canvas id="canvas"></canvas>

  //因为大屏自适应的关系,所以要动态获取canvas划线的容器的宽度和高度
  let outDiv = document.getElementsByClassName("pannel-map");
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext("2d");
  canvas.width = outDiv[0].clientWidth;
  canvas.height = outDiv[0].clientHeight;
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.moveTo(this.tempPoint[0], this.tempPoint[1]); // 折线的起点坐标
  ctx.lineTo(canvas.width / 2, canvas.width / 5);
  ctx.lineTo(0, canvas.width / 5);
  ctx.strokeStyle = "red"; // 线的颜色
  ctx.stroke(); // 开始绘制
  ctx.closePath();

6. 到现在基本已经画完了,就剩左边的信息提示框了,这个不用我多说了吧,是个人都会写。我就不多细说了,接下来就是控制他的轮播效果了。

• 现在城市数组中任意取一个值,因为左边的提示框的内容也要随机变化,所有也要从信息数组中取一个字,真是的生产环境的数据要从后台拿的，现在的就是模拟

   // 从危险城市中随机选取一个城市,选取左边信息的方法也是一样的
     var temp = data
       .sort(function(a, b) {
         return b.value - a.value;
       })
       .slice(0, 6);
     var index = Math.floor(Math.random() * temp.length);

7. 最终实现的效果就是

   
   
   bigg.gif
   
   

   附上完整代码

<template>
  <div class="pannel">
    <div class="pannel-left">
        <div class="pannel-carinfo" v-if="show">
          <div class="pannel-carinfo-above">
            <div class="pannel-carinfo-above-left-title">{{carInfoTitle}}</div>
            <div class="pannel-carinfo-above-left-time">{{carInfoTime}}</div>
            <div class="pannel-carinfo-above-right-img"></div>
          </div>
          <div class="pannel-carinfo-middle"></div>
          <div class="pannel-carinfo-blew">
            <div class="pannel-carinfo-blew-info01">
              <div class="pannel-carinfo-blew-info01-title">级别：</div>
              <div class="pannel-carinfo-blew-info01-content">{{info01}}</div>
            </div>
            <div class="pannel-carinfo-blew-info01">
              <div class="pannel-carinfo-blew-info01-title">类型：</div>
              <div class="pannel-carinfo-blew-info01-content">{{info02}}</div>
            </div>
            <div class="pannel-carinfo-blew-info01">
              <div class="pannel-carinfo-blew-info01-title">位置：</div>
              <div class="pannel-carinfo-blew-info01-content">{{info03}}</div>
            </div>
            <div class="pannel-carinfo-blew-info01">
              <div class="pannel-carinfo-blew-info01-title">事件：</div>
              <div class="pannel-carinfo-blew-info01-content">{{info04}}</div>
            </div>
            <div class="pannel-carinfo-blew-info01">
              <div class="pannel-carinfo-blew-info01-title Te">联系人员：</div>
              <div class="pannel-carinfo-blew-info01-content">{{info05}}</div>
            </div>
          </div>
        </div>

      <div class="pannel-map">
        <canvas id="canvas"></canvas>
        <div class="survey-map" id="surveyMap"></div>
      </div>
      <div class="pannel-allcar-survey">
        <FlightNumber></FlightNumber>
        <NavNum></NavNum>
        <TotalMileage></TotalMileage>
        <Aircrew></Aircrew>
      </div>
    </div>

    <div class="pannel-footer"></div>
  </div>
</template>

<script>
import FlightNumber from "@/components/FlightNumber";
import NavNum from "@/components/NavNum";
import TotalMileage from "@/components/TotalMileage";
import Aircrew from "@/components/Aircrew";
import echarts from "echarts";
import BMap from "BMap";
require("echarts/map/js/china");
import anime from "animejs";
export default {
  data() {
    return {
      myChart:'',
      show: false,
      carInfoTitle: "金珉仓储中心",
      carInfoTime: "2020.04.22 10:20:12",
      info01: "IV级",
      info02: "危险品泄露",
      info03: "上海市普陀三民路2399弄",
      info04: "氨气气体泄露",
      info05: "库管员 【张 明 16828932214】",
      data: [
        { name: "海门", value: 9 },
        { name: "鄂尔多斯", value: 12 },
        { name: "招远", value: 12 },
        { name: "舟山", value: 12 },
        { name: "齐齐哈尔", value: 14 },
        { name: "盐城", value: 15 },
        { name: "赤峰", value: 16 },
        { name: "青岛", value: 18 },
        { name: "乳山", value: 18 },
        { name: "金昌", value: 19 },
        { name: "泉州", value: 21 },
        { name: "莱西", value: 21 },
        { name: "日照", value: 21 },
        { name: "胶南", value: 22 },
        { name: "南通", value: 23 },
        { name: "拉萨", value: 24 },
        { name: "云浮", value: 24 },
        { name: "梅州", value: 25 },
        { name: "文登", value: 25 },
        { name: "上海", value: 25 },
        { name: "攀枝花", value: 25 },
        { name: "威海", value: 25 },
        { name: "承德", value: 25 },
        { name: "厦门", value: 26 },
        { name: "汕尾", value: 26 },
        { name: "潮州", value: 26 },
        { name: "丹东", value: 27 },
        { name: "太仓", value: 27 },
        { name: "曲靖", value: 27 },
        { name: "烟台", value: 28 },
        { name: "福州", value: 29 },
        { name: "瓦房店", value: 30 },
        { name: "即墨", value: 30 },
        { name: "抚顺", value: 31 },
        { name: "玉溪", value: 31 },
        { name: "张家口", value: 31 },
        { name: "阳泉", value: 31 },
        { name: "莱州", value: 32 },
        { name: "湖州", value: 32 },
        { name: "汕头", value: 32 },
        { name: "昆山", value: 33 },
        { name: "宁波", value: 33 },
        { name: "湛江", value: 33 },
        { name: "揭阳", value: 34 },
        { name: "荣成", value: 34 },
        { name: "连云港", value: 35 },
        { name: "葫芦岛", value: 35 },
        { name: "常熟", value: 36 },
        { name: "东莞", value: 36 },
        { name: "河源", value: 36 },
        { name: "淮安", value: 36 },
        { name: "泰州", value: 36 },
        { name: "南宁", value: 37 },
        { name: "营口", value: 37 },
        { name: "惠州", value: 37 },
        { name: "江阴", value: 37 },
        { name: "蓬莱", value: 37 },
        { name: "韶关", value: 38 },
        { name: "嘉峪关", value: 38 },
        { name: "广州", value: 38 },
        { name: "延安", value: 38 },
        { name: "太原", value: 39 },
        { name: "清远", value: 39 },
        { name: "中山", value: 39 },
        { name: "昆明", value: 39 },
        { name: "寿光", value: 40 },
        { name: "盘锦", value: 40 },
        { name: "长治", value: 41 },
        { name: "深圳", value: 41 },
        { name: "珠海", value: 42 },
        { name: "宿迁", value: 43 },
        { name: "咸阳", value: 43 },
        { name: "铜川", value: 44 },
        { name: "平度", value: 44 },
        { name: "佛山", value: 44 },
        { name: "海口", value: 44 },
        { name: "江门", value: 45 },
        { name: "章丘", value: 45 },
        { name: "肇庆", value: 46 },
        { name: "大连", value: 47 },
        { name: "临汾", value: 47 },
        { name: "吴江", value: 47 },
        { name: "石嘴山", value: 49 },
        { name: "沈阳", value: 50 },
        { name: "苏州", value: 50 },
        { name: "茂名", value: 50 },
        { name: "嘉兴", value: 51 },
        { name: "长春", value: 51 },
        { name: "胶州", value: 52 },
        { name: "银川", value: 52 },
        { name: "张家港", value: 52 },
        { name: "三门峡", value: 53 },
        { name: "锦州", value: 54 },
        { name: "南昌", value: 54 },
        { name: "柳州", value: 54 },
        { name: "三亚", value: 54 },
        { name: "自贡", value: 56 },
        { name: "吉林", value: 56 },
        { name: "阳江", value: 57 },
        { name: "泸州", value: 57 },
        { name: "西宁", value: 57 },
        { name: "宜宾", value: 58 },
        { name: "呼和浩特", value: 58 },
        { name: "成都", value: 58 },
        { name: "大同", value: 58 },
        { name: "镇江", value: 59 },
        { name: "桂林", value: 59 },
        { name: "张家界", value: 59 },
        { name: "宜兴", value: 59 },
        { name: "北海", value: 60 },
        { name: "西安", value: 61 },
        { name: "金坛", value: 62 },
        { name: "东营", value: 62 },
        { name: "牡丹江", value: 63 },
        { name: "遵义", value: 63 },
        { name: "绍兴", value: 63 },
        { name: "扬州", value: 64 },
        { name: "常州", value: 64 },
        { name: "潍坊", value: 65 },
        { name: "重庆", value: 66 },
        { name: "台州", value: 67 },
        { name: "南京", value: 67 },
        { name: "滨州", value: 70 },
        { name: "贵阳", value: 71 },
        { name: "无锡", value: 71 },
        { name: "本溪", value: 71 },
        { name: "克拉玛依", value: 72 },
        { name: "渭南", value: 72 },
        { name: "马鞍山", value: 72 },
        { name: "宝鸡", value: 72 },
        { name: "焦作", value: 75 },
        { name: "句容", value: 75 },
        { name: "北京", value: 79 },
        { name: "徐州", value: 79 },
        { name: "衡水", value: 80 },
        { name: "包头", value: 80 },
        { name: "绵阳", value: 80 },
        { name: "乌鲁木齐", value: 84 },
        { name: "枣庄", value: 84 },
        { name: "杭州", value: 84 },
        { name: "淄博", value: 85 },
        { name: "鞍山", value: 86 },
        { name: "溧阳", value: 86 },
        { name: "库尔勒", value: 86 },
        { name: "安阳", value: 90 },
        { name: "开封", value: 90 },
        { name: "济南", value: 92 },
        { name: "德阳", value: 93 },
        { name: "温州", value: 95 },
        { name: "九江", value: 96 },
        { name: "邯郸", value: 98 },
        { name: "临安", value: 99 },
        { name: "兰州", value: 99 },
        { name: "沧州", value: 100 },
        { name: "临沂", value: 103 },
        { name: "南充", value: 104 },
        { name: "天津", value: 105 },
        { name: "富阳", value: 106 },
        { name: "泰安", value: 112 },
        { name: "诸暨", value: 112 },
        { name: "郑州", value: 113 },
        { name: "哈尔滨", value: 114 },
        { name: "聊城", value: 116 },
        { name: "芜湖", value: 117 },
        { name: "唐山", value: 119 },
        { name: "平顶山", value: 119 },
        { name: "邢台", value: 119 },
        { name: "德州", value: 120 },
        { name: "济宁", value: 120 },
        { name: "荆州", value: 127 },
        { name: "宜昌", value: 130 },
        { name: "义乌", value: 132 },
        { name: "丽水", value: 133 },
        { name: "洛阳", value: 134 },
        { name: "秦皇岛", value: 136 },
        { name: "株洲", value: 143 },
        { name: "石家庄", value: 147 },
        { name: "莱芜", value: 148 },
        { name: "常德", value: 152 },
        { name: "保定", value: 153 },
        { name: "湘潭", value: 154 },
        { name: "金华", value: 157 },
        { name: "岳阳", value: 169 },
        { name: "长沙", value: 175 },
        { name: "衢州", value: 177 },
        { name: "廊坊", value: 193 },
        { name: "菏泽", value: 194 },
        { name: "合肥", value: 229 },
        { name: "武汉", value: 273 },
        { name: "大庆", value: 279 }
      ],
      geoCoordMap: {
        海门: [121.15, 31.89],
        鄂尔多斯: [109.781327, 39.608266],
        招远: [120.38, 37.35],
        舟山: [122.207216, 29.985295],
        齐齐哈尔: [123.97, 47.33],
        盐城: [120.13, 33.38],
        赤峰: [118.87, 42.28],
        青岛: [120.33, 36.07],
        乳山: [121.52, 36.89],
        金昌: [102.188043, 38.520089],
        泉州: [118.58, 24.93],
        莱西: [120.53, 36.86],
        日照: [119.46, 35.42],
        胶南: [119.97, 35.88],
        南通: [121.05, 32.08],
        拉萨: [91.11, 29.97],
        云浮: [112.02, 22.93],
        梅州: [116.1, 24.55],
        文登: [122.05, 37.2],
        上海: [121.48, 31.22],
        攀枝花: [101.718637, 26.582347],
        威海: [122.1, 37.5],
        承德: [117.93, 40.97],
        厦门: [118.1, 24.46],
        汕尾: [115.375279, 22.786211],
        潮州: [116.63, 23.68],
        丹东: [124.37, 40.13],
        太仓: [121.1, 31.45],
        曲靖: [103.79, 25.51],
        烟台: [121.39, 37.52],
        福州: [119.3, 26.08],
        瓦房店: [121.979603, 39.627114],
        即墨: [120.45, 36.38],
        抚顺: [123.97, 41.97],
        玉溪: [102.52, 24.35],
        张家口: [114.87, 40.82],
        阳泉: [113.57, 37.85],
        莱州: [119.942327, 37.177017],
        湖州: [120.1, 30.86],
        汕头: [116.69, 23.39],
        昆山: [120.95, 31.39],
        宁波: [121.56, 29.86],
        湛江: [110.359377, 21.270708],
        揭阳: [116.35, 23.55],
        荣成: [122.41, 37.16],
        连云港: [119.16, 34.59],
        葫芦岛: [120.836932, 40.711052],
        常熟: [120.74, 31.64],
        东莞: [113.75, 23.04],
        河源: [114.68, 23.73],
        淮安: [119.15, 33.5],
        泰州: [119.9, 32.49],
        南宁: [108.33, 22.84],
        营口: [122.18, 40.65],
        惠州: [114.4, 23.09],
        江阴: [120.26, 31.91],
        蓬莱: [120.75, 37.8],
        韶关: [113.62, 24.84],
        嘉峪关: [98.289152, 39.77313],
        广州: [113.23, 23.16],
        延安: [109.47, 36.6],
        太原: [112.53, 37.87],
        清远: [113.01, 23.7],
        中山: [113.38, 22.52],
        昆明: [102.73, 25.04],
        寿光: [118.73, 36.86],
        盘锦: [122.070714, 41.119997],
        长治: [113.08, 36.18],
        深圳: [114.07, 22.62],
        珠海: [113.52, 22.3],
        宿迁: [118.3, 33.96],
        咸阳: [108.72, 34.36],
        铜川: [109.11, 35.09],
        平度: [119.97, 36.77],
        佛山: [113.11, 23.05],
        海口: [110.35, 20.02],
        江门: [113.06, 22.61],
        章丘: [117.53, 36.72],
        肇庆: [112.44, 23.05],
        大连: [121.62, 38.92],
        临汾: [111.5, 36.08],
        吴江: [120.63, 31.16],
        石嘴山: [106.39, 39.04],
        沈阳: [123.38, 41.8],
        苏州: [120.62, 31.32],
        茂名: [110.88, 21.68],
        嘉兴: [120.76, 30.77],
        长春: [125.35, 43.88],
        胶州: [120.03336, 36.264622],
        银川: [106.27, 38.47],
        张家港: [120.555821, 31.875428],
        三门峡: [111.19, 34.76],
        锦州: [121.15, 41.13],
        南昌: [115.89, 28.68],
        柳州: [109.4, 24.33],
        三亚: [109.511909, 18.252847],
        自贡: [104.778442, 29.33903],
        吉林: [126.57, 43.87],
        阳江: [111.95, 21.85],
        泸州: [105.39, 28.91],
        西宁: [101.74, 36.56],
        宜宾: [104.56, 29.77],
        呼和浩特: [111.65, 40.82],
        成都: [104.06, 30.67],
        大同: [113.3, 40.12],
        镇江: [119.44, 32.2],
        桂林: [110.28, 25.29],
        张家界: [110.479191, 29.117096],
        宜兴: [119.82, 31.36],
        北海: [109.12, 21.49],
        西安: [108.95, 34.27],
        金坛: [119.56, 31.74],
        东营: [118.49, 37.46],
        牡丹江: [129.58, 44.6],
        遵义: [106.9, 27.7],
        绍兴: [120.58, 30.01],
        扬州: [119.42, 32.39],
        常州: [119.95, 31.79],
        潍坊: [119.1, 36.62],
        重庆: [106.54, 29.59],
        台州: [121.420757, 28.656386],
        南京: [118.78, 32.04],
        滨州: [118.03, 37.36],
        贵阳: [106.71, 26.57],
        无锡: [120.29, 31.59],
        本溪: [123.73, 41.3],
        克拉玛依: [84.77, 45.59],
        渭南: [109.5, 34.52],
        马鞍山: [118.48, 31.56],
        宝鸡: [107.15, 34.38],
        焦作: [113.21, 35.24],
        句容: [119.16, 31.95],
        北京: [116.46, 39.92],
        徐州: [117.2, 34.26],
        衡水: [115.72, 37.72],
        包头: [110, 40.58],
        绵阳: [104.73, 31.48],
        乌鲁木齐: [87.68, 43.77],
        枣庄: [117.57, 34.86],
        杭州: [120.19, 30.26],
        淄博: [118.05, 36.78],
        鞍山: [122.85, 41.12],
        溧阳: [119.48, 31.43],
        库尔勒: [86.06, 41.68],
        安阳: [114.35, 36.1],
        开封: [114.35, 34.79],
        济南: [117, 36.65],
        德阳: [104.37, 31.13],
        温州: [120.65, 28.01],
        九江: [115.97, 29.71],
        邯郸: [114.47, 36.6],
        临安: [119.72, 30.23],
        兰州: [103.73, 36.03],
        沧州: [116.83, 38.33],
        临沂: [118.35, 35.05],
        南充: [106.110698, 30.837793],
        天津: [117.2, 39.13],
        富阳: [119.95, 30.07],
        泰安: [117.13, 36.18],
        诸暨: [120.23, 29.71],
        郑州: [113.65, 34.76],
        哈尔滨: [126.63, 45.75],
        聊城: [115.97, 36.45],
        芜湖: [118.38, 31.33],
        唐山: [118.02, 39.63],
        平顶山: [113.29, 33.75],
        邢台: [114.48, 37.05],
        德州: [116.29, 37.45],
        济宁: [116.59, 35.38],
        荆州: [112.239741, 30.335165],
        宜昌: [111.3, 30.7],
        义乌: [120.06, 29.32],
        丽水: [119.92, 28.45],
        洛阳: [112.44, 34.7],
        秦皇岛: [119.57, 39.95],
        株洲: [113.16, 27.83],
        石家庄: [114.48, 38.03],
        莱芜: [117.67, 36.19],
        常德: [111.69, 29.05],
        保定: [115.48, 38.85],
        湘潭: [112.91, 27.87],
        金华: [119.64, 29.12],
        岳阳: [113.09, 29.37],
        长沙: [113, 28.21],
        衢州: [118.88, 28.97],
        廊坊: [116.7, 39.53],
        菏泽: [115.480656, 35.23375],
        合肥: [117.27, 31.86],
        武汉: [114.31, 30.52],
        大庆: [125.03, 46.58]
      },
      tempPoint: []
    };
  },
  components: {
    FlightNumber,
    NavNum,
    TotalMileage,
    Aircrew
  },
  methods: {
    convertData(data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = this.geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value)
          });
        }
      }
      return res;
    },
    drwaCharts() {
      var data = [
        { name: "海门", value: 9 },
        { name: "鄂尔多斯", value: 12 },
        { name: "招远", value: 12 },
        { name: "舟山", value: 12 },
        { name: "齐齐哈尔", value: 14 },
        { name: "盐城", value: 15 },
        { name: "赤峰", value: 16 },
        { name: "青岛", value: 18 },
        { name: "乳山", value: 18 },
        { name: "金昌", value: 19 },
        { name: "泉州", value: 21 },
        { name: "莱西", value: 21 },
        { name: "日照", value: 21 },
        { name: "胶南", value: 22 },
        { name: "南通", value: 23 },
        { name: "拉萨", value: 24 },
        { name: "云浮", value: 24 },
        { name: "梅州", value: 25 },
        { name: "文登", value: 25 },
        { name: "上海", value: 25 },
        { name: "攀枝花", value: 25 },
        { name: "威海", value: 25 },
        { name: "承德", value: 25 },
        { name: "厦门", value: 26 },
        { name: "汕尾", value: 26 },
        { name: "潮州", value: 26 },
        { name: "丹东", value: 27 },
        { name: "太仓", value: 27 },
        { name: "曲靖", value: 27 },
        { name: "烟台", value: 28 },
        { name: "福州", value: 29 },
        { name: "瓦房店", value: 30 },
        { name: "即墨", value: 30 },
        { name: "抚顺", value: 31 },
        { name: "玉溪", value: 31 },
        { name: "张家口", value: 31 },
        { name: "阳泉", value: 31 },
        { name: "莱州", value: 32 },
        { name: "湖州", value: 32 },
        { name: "汕头", value: 32 },
        { name: "昆山", value: 33 },
        { name: "宁波", value: 33 },
        { name: "湛江", value: 33 },
        { name: "揭阳", value: 34 },
        { name: "荣成", value: 34 },
        { name: "连云港", value: 35 },
        { name: "葫芦岛", value: 35 },
        { name: "常熟", value: 36 },
        { name: "东莞", value: 36 },
        { name: "河源", value: 36 },
        { name: "淮安", value: 36 },
        { name: "泰州", value: 36 },
        { name: "南宁", value: 37 },
        { name: "营口", value: 37 },
        { name: "惠州", value: 37 },
        { name: "江阴", value: 37 },
        { name: "蓬莱", value: 37 },
        { name: "韶关", value: 38 },
        { name: "嘉峪关", value: 38 },
        { name: "广州", value: 38 },
        { name: "延安", value: 38 },
        { name: "太原", value: 39 },
        { name: "清远", value: 39 },
        { name: "中山", value: 39 },
        { name: "昆明", value: 39 },
        { name: "寿光", value: 40 },
        { name: "盘锦", value: 40 },
        { name: "长治", value: 41 },
        { name: "深圳", value: 41 },
        { name: "珠海", value: 42 },
        { name: "宿迁", value: 43 },
        { name: "咸阳", value: 43 },
        { name: "铜川", value: 44 },
        { name: "平度", value: 44 },
        { name: "佛山", value: 44 },
        { name: "海口", value: 44 },
        { name: "江门", value: 45 },
        { name: "章丘", value: 45 },
        { name: "肇庆", value: 46 },
        { name: "大连", value: 47 },
        { name: "临汾", value: 47 },
        { name: "吴江", value: 47 },
        { name: "石嘴山", value: 49 },
        { name: "沈阳", value: 50 },
        { name: "苏州", value: 50 },
        { name: "茂名", value: 50 },
        { name: "嘉兴", value: 51 },
        { name: "长春", value: 51 },
        { name: "胶州", value: 52 },
        { name: "银川", value: 52 },
        { name: "张家港", value: 52 },
        { name: "三门峡", value: 53 },
        { name: "锦州", value: 54 },
        { name: "南昌", value: 54 },
        { name: "柳州", value: 54 },
        { name: "三亚", value: 54 },
        { name: "自贡", value: 56 },
        { name: "吉林", value: 56 },
        { name: "阳江", value: 57 },
        { name: "泸州", value: 57 },
        { name: "西宁", value: 57 },
        { name: "宜宾", value: 58 },
        { name: "呼和浩特", value: 58 },
        { name: "成都", value: 58 },
        { name: "大同", value: 58 },
        { name: "镇江", value: 59 },
        { name: "桂林", value: 59 },
        { name: "张家界", value: 59 },
        { name: "宜兴", value: 59 },
        { name: "北海", value: 60 },
        { name: "西安", value: 61 },
        { name: "金坛", value: 62 },
        { name: "东营", value: 62 },
        { name: "牡丹江", value: 63 },
        { name: "遵义", value: 63 },
        { name: "绍兴", value: 63 },
        { name: "扬州", value: 64 },
        { name: "常州", value: 64 },
        { name: "潍坊", value: 65 },
        { name: "重庆", value: 66 },
        { name: "台州", value: 67 },
        { name: "南京", value: 67 },
        { name: "滨州", value: 70 },
        { name: "贵阳", value: 71 },
        { name: "无锡", value: 71 },
        { name: "本溪", value: 71 },
        { name: "克拉玛依", value: 72 },
        { name: "渭南", value: 72 },
        { name: "马鞍山", value: 72 },
        { name: "宝鸡", value: 72 },
        { name: "焦作", value: 75 },
        { name: "句容", value: 75 },
        { name: "北京", value: 79 },
        { name: "徐州", value: 79 },
        { name: "衡水", value: 80 },
        { name: "包头", value: 80 },
        { name: "绵阳", value: 80 },
        { name: "乌鲁木齐", value: 84 },
        { name: "枣庄", value: 84 },
        { name: "杭州", value: 84 },
        { name: "淄博", value: 85 },
        { name: "鞍山", value: 86 },
        { name: "溧阳", value: 86 },
        { name: "库尔勒", value: 86 },
        { name: "安阳", value: 90 },
        { name: "开封", value: 90 },
        { name: "济南", value: 92 },
        { name: "德阳", value: 93 },
        { name: "温州", value: 95 },
        { name: "九江", value: 96 },
        { name: "邯郸", value: 98 },
        { name: "临安", value: 99 },
        { name: "兰州", value: 99 },
        { name: "沧州", value: 100 },
        { name: "临沂", value: 103 },
        { name: "南充", value: 104 },
        { name: "天津", value: 105 },
        { name: "富阳", value: 106 },
        { name: "泰安", value: 112 },
        { name: "诸暨", value: 112 },
        { name: "郑州", value: 113 },
        { name: "哈尔滨", value: 114 },
        { name: "聊城", value: 116 },
        { name: "芜湖", value: 117 },
        { name: "唐山", value: 119 },
        { name: "平顶山", value: 119 },
        { name: "邢台", value: 119 },
        { name: "德州", value: 120 },
        { name: "济宁", value: 120 },
        { name: "荆州", value: 127 },
        { name: "宜昌", value: 130 },
        { name: "义乌", value: 132 },
        { name: "丽水", value: 133 },
        { name: "洛阳", value: 134 },
        { name: "秦皇岛", value: 136 },
        { name: "株洲", value: 143 },
        { name: "石家庄", value: 147 },
        { name: "莱芜", value: 148 },
        { name: "常德", value: 152 },
        { name: "保定", value: 153 },
        { name: "湘潭", value: 154 },
        { name: "金华", value: 157 },
        { name: "岳阳", value: 169 },
        { name: "长沙", value: 175 },
        { name: "衢州", value: 177 },
        { name: "廊坊", value: 193 },
        { name: "菏泽", value: 194 },
        { name: "合肥", value: 229 },
        { name: "武汉", value: 273 },
        { name: "大庆", value: 279 }
      ];
      var geoCoordMap = {
        海门: [121.15, 31.89],
        鄂尔多斯: [109.781327, 39.608266],
        招远: [120.38, 37.35],
        舟山: [122.207216, 29.985295],
        齐齐哈尔: [123.97, 47.33],
        盐城: [120.13, 33.38],
        赤峰: [118.87, 42.28],
        青岛: [120.33, 36.07],
        乳山: [121.52, 36.89],
        金昌: [102.188043, 38.520089],
        泉州: [118.58, 24.93],
        莱西: [120.53, 36.86],
        日照: [119.46, 35.42],
        胶南: [119.97, 35.88],
        南通: [121.05, 32.08],
        拉萨: [91.11, 29.97],
        云浮: [112.02, 22.93],
        梅州: [116.1, 24.55],
        文登: [122.05, 37.2],
        上海: [121.48, 31.22],
        攀枝花: [101.718637, 26.582347],
        威海: [122.1, 37.5],
        承德: [117.93, 40.97],
        厦门: [118.1, 24.46],
        汕尾: [115.375279, 22.786211],
        潮州: [116.63, 23.68],
        丹东: [124.37, 40.13],
        太仓: [121.1, 31.45],
        曲靖: [103.79, 25.51],
        烟台: [121.39, 37.52],
        福州: [119.3, 26.08],
        瓦房店: [121.979603, 39.627114],
        即墨: [120.45, 36.38],
        抚顺: [123.97, 41.97],
        玉溪: [102.52, 24.35],
        张家口: [114.87, 40.82],
        阳泉: [113.57, 37.85],
        莱州: [119.942327, 37.177017],
        湖州: [120.1, 30.86],
        汕头: [116.69, 23.39],
        昆山: [120.95, 31.39],
        宁波: [121.56, 29.86],
        湛江: [110.359377, 21.270708],
        揭阳: [116.35, 23.55],
        荣成: [122.41, 37.16],
        连云港: [119.16, 34.59],
        葫芦岛: [120.836932, 40.711052],
        常熟: [120.74, 31.64],
        东莞: [113.75, 23.04],
        河源: [114.68, 23.73],
        淮安: [119.15, 33.5],
        泰州: [119.9, 32.49],
        南宁: [108.33, 22.84],
        营口: [122.18, 40.65],
        惠州: [114.4, 23.09],
        江阴: [120.26, 31.91],
        蓬莱: [120.75, 37.8],
        韶关: [113.62, 24.84],
        嘉峪关: [98.289152, 39.77313],
        广州: [113.23, 23.16],
        延安: [109.47, 36.6],
        太原: [112.53, 37.87],
        清远: [113.01, 23.7],
        中山: [113.38, 22.52],
        昆明: [102.73, 25.04],
        寿光: [118.73, 36.86],
        盘锦: [122.070714, 41.119997],
        长治: [113.08, 36.18],
        深圳: [114.07, 22.62],
        珠海: [113.52, 22.3],
        宿迁: [118.3, 33.96],
        咸阳: [108.72, 34.36],
        铜川: [109.11, 35.09],
        平度: [119.97, 36.77],
        佛山: [113.11, 23.05],
        海口: [110.35, 20.02],
        江门: [113.06, 22.61],
        章丘: [117.53, 36.72],
        肇庆: [112.44, 23.05],
        大连: [121.62, 38.92],
        临汾: [111.5, 36.08],
        吴江: [120.63, 31.16],
        石嘴山: [106.39, 39.04],
        沈阳: [123.38, 41.8],
        苏州: [120.62, 31.32],
        茂名: [110.88, 21.68],
        嘉兴: [120.76, 30.77],
        长春: [125.35, 43.88],
        胶州: [120.03336, 36.264622],
        银川: [106.27, 38.47],
        张家港: [120.555821, 31.875428],
        三门峡: [111.19, 34.76],
        锦州: [121.15, 41.13],
        南昌: [115.89, 28.68],
        柳州: [109.4, 24.33],
        三亚: [109.511909, 18.252847],
        自贡: [104.778442, 29.33903],
        吉林: [126.57, 43.87],
        阳江: [111.95, 21.85],
        泸州: [105.39, 28.91],
        西宁: [101.74, 36.56],
        宜宾: [104.56, 29.77],
        呼和浩特: [111.65, 40.82],
        成都: [104.06, 30.67],
        大同: [113.3, 40.12],
        镇江: [119.44, 32.2],
        桂林: [110.28, 25.29],
        张家界: [110.479191, 29.117096],
        宜兴: [119.82, 31.36],
        北海: [109.12, 21.49],
        西安: [108.95, 34.27],
        金坛: [119.56, 31.74],
        东营: [118.49, 37.46],
        牡丹江: [129.58, 44.6],
        遵义: [106.9, 27.7],
        绍兴: [120.58, 30.01],
        扬州: [119.42, 32.39],
        常州: [119.95, 31.79],
        潍坊: [119.1, 36.62],
        重庆: [106.54, 29.59],
        台州: [121.420757, 28.656386],
        南京: [118.78, 32.04],
        滨州: [118.03, 37.36],
        贵阳: [106.71, 26.57],
        无锡: [120.29, 31.59],
        本溪: [123.73, 41.3],
        克拉玛依: [84.77, 45.59],
        渭南: [109.5, 34.52],
        马鞍山: [118.48, 31.56],
        宝鸡: [107.15, 34.38],
        焦作: [113.21, 35.24],
        句容: [119.16, 31.95],
        北京: [116.46, 39.92],
        徐州: [117.2, 34.26],
        衡水: [115.72, 37.72],
        包头: [110, 40.58],
        绵阳: [104.73, 31.48],
        乌鲁木齐: [87.68, 43.77],
        枣庄: [117.57, 34.86],
        杭州: [120.19, 30.26],
        淄博: [118.05, 36.78],
        鞍山: [122.85, 41.12],
        溧阳: [119.48, 31.43],
        库尔勒: [86.06, 41.68],
        安阳: [114.35, 36.1],
        开封: [114.35, 34.79],
        济南: [117, 36.65],
        德阳: [104.37, 31.13],
        温州: [120.65, 28.01],
        九江: [115.97, 29.71],
        邯郸: [114.47, 36.6],
        临安: [119.72, 30.23],
        兰州: [103.73, 36.03],
        沧州: [116.83, 38.33],
        临沂: [118.35, 35.05],
        南充: [106.110698, 30.837793],
        天津: [117.2, 39.13],
        富阳: [119.95, 30.07],
        泰安: [117.13, 36.18],
        诸暨: [120.23, 29.71],
        郑州: [113.65, 34.76],
        哈尔滨: [126.63, 45.75],
        聊城: [115.97, 36.45],
        芜湖: [118.38, 31.33],
        唐山: [118.02, 39.63],
        平顶山: [113.29, 33.75],
        邢台: [114.48, 37.05],
        德州: [116.29, 37.45],
        济宁: [116.59, 35.38],
        荆州: [112.239741, 30.335165],
        宜昌: [111.3, 30.7],
        义乌: [120.06, 29.32],
        丽水: [119.92, 28.45],
        洛阳: [112.44, 34.7],
        秦皇岛: [119.57, 39.95],
        株洲: [113.16, 27.83],
        石家庄: [114.48, 38.03],
        莱芜: [117.67, 36.19],
        常德: [111.69, 29.05],
        保定: [115.48, 38.85],
        湘潭: [112.91, 27.87],
        金华: [119.64, 29.12],
        岳阳: [113.09, 29.37],
        长沙: [113, 28.21],
        衢州: [118.88, 28.97],
        廊坊: [116.7, 39.53],
        菏泽: [115.480656, 35.23375],
        合肥: [117.27, 31.86],
        武汉: [114.31, 30.52],
        大庆: [125.03, 46.58]
      };

      var convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            });
          }
        }
        return res;
      };

      var option = {
        tooltip: {},
        legend: {
          left: "left",
          data: ["强", "中", "弱"],
          textStyle: {
            color: "#ccc"
          }
        },
        // backgroundColor: {
        //   type: "linear",
        //   x: 0,
        //   y: 0,
        //   x2: 1,
        //   y2: 1,
        //   colorStops: [
        //     {
        //       offset: 0,
        //       color: "#0f2c70" // 0% 处的颜色
        //     },
        //     {
        //       offset: 1,
        //       color: "#091732" // 100% 处的颜色
        //     }
        //   ],
        //   globalCoord: false // 缺省为 false
        // },
        geo: {
          map: "china",
          show: true,
          roam: true,
          label: {
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              areaColor: "#091632",
              borderColor: "#1773c3",
              shadowColor: "#1773c3",
              shadowBlur: 20
            }
          }
        },
        series: [
          {
            type: "map",
            map: "china",
            geoIndex: 1,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: true, // 存在legend时显示
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: "#fff"
                }
              }
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: "#031525",
                borderColor: "#3B5077",
                borderWidth: 1
              },
              emphasis: {
                areaColor: "#0f2c70"
              }
            },
            data: [{ name: "北京", value: 21300 }]
          },
          {
            name: "城市",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: convertData(
              data
                .sort(function(a, b) {
                  return b.value - a.value;
                })
                .slice(7, 12)
            ),
            symbolSize: function(val) {
              return val[2] / 20;
            },
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: false
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: "yellow",
                shadowBlur: 10,
                shadowColor: "#333"
              }
            }
          },
          {
            name: "城市",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: convertData(
              data
                .sort(function(a, b) {
                  return b.value - a.value;
                })
                .slice(13, 20)
            ),
            symbolSize: function(val) {
              return val[2] / 20;
            },
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: false
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: "blue",
                shadowBlur: 10,
                shadowColor: "#333"
              }
            }
          },

          {
            name: "前5",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: convertData(
              data
                .sort(function(a, b) {
                  return b.value - a.value;
                })
                .slice(0, 6)
            ),
            symbolSize: function(val) {
              return val[2] / 20;
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke"
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: false
              }
            },
            itemStyle: {
              normal: {
                color: "red",
                shadowBlur: 10,
                shadowColor: "#333"
              }
            },
            zlevel: 1
          }
        ]
      };

      // 使用刚指定的配置项和数据显示地图数据
      // this.chinachart.setOption(this.chartOption);
      var temp = data
        .sort(function(a, b) {
          return b.value - a.value;
        })
        .slice(0, 6);
      var index = Math.floor(Math.random() * temp.length);
      this.myChart.setOption(option);
      var seriesModel = this.myChart
        .getModel()
        .getSeriesByIndex(option.series.length - 1);
      // 获取地理坐标系实例
      var coordSys = seriesModel.coordinateSystem;
      // dataToPoint 相当于 getPosByGeo
      var city = temp[index].name;
      var point = coordSys.dataToPoint(geoCoordMap[city]);
      // 直接显示layer
      this.tempPoint = point;
      this.initCanvas();
    },
    initCanvas() {
      let outDiv = document.getElementsByClassName("pannel-map");
      let canvas = document.getElementById("canvas");
      let ctx = canvas.getContext("2d");
      canvas.width = outDiv[0].clientWidth;
      canvas.height = outDiv[0].clientHeight;
      ctx.lineWidth = 1;
      ctx.beginPath();
      ctx.moveTo(this.tempPoint[0], this.tempPoint[1]); // 折线的起点坐标
      ctx.lineTo(canvas.width / 2, canvas.width / 5);
      ctx.lineTo(0, canvas.width / 5);
      ctx.strokeStyle = "red"; // 线的颜色
      ctx.stroke(); // 开始绘制
      ctx.closePath();
      let randomData1 = {
        carInfoTitle: "XXXX",
        carInfoTime: "XXXX-XX-XX XX:XX:XX",
        info01: "IV级",
        info02: "xxxxxx",
        info03: "xxxxxxxxxxx",
        info04: "xxxxxxxxxx",
        info05: "xxxxxxxxxxxxxxx"
      };
      let randomData2 = {
        carInfoTitle: "*****",
        carInfoTime: "************",
        info01: "******",
        info02: "************",
        info03: "*********",
        info04: "*************",
        info05: "******************"
      };
      let randomData3 = {
        carInfoTitle: "$$$$$",
        carInfoTime: "$$$$$$$$$$$$$$$",
        info01: "$$$$",
        info02: "$$$$$$$$$$$$",
        info03: "$$$$$$$$$$$$$$$",
        info04: "$$$$$$$$$$",
        info05: "$$$$$$$$$$$$$$$$$$$$$"
      };
      let randomData4 = {
        carInfoTitle: "^^^^^^^^",
        carInfoTime: "^^^^^^^^^^^^^",
        info01: "^^^^^^^^^^^",
        info02: "^^^^^^^^^^",
        info03: "^^^^^^^^^^",
        info04: "^^^^^^^",
        info05: "^^^^^^^^^^^^^^^^"
      };
      let detail = [randomData2, randomData1,randomData3,randomData4];
      var index = Math.floor(Math.random() * detail.length);
      (this.carInfoTitle = detail[index].carInfoTitle),
        (this.carInfoTime = detail[index].carInfoTime),
        (this.info01 = detail[index].info01),
        (this.info02 = detail[index].info02),
        (this.info03 = detail[index].info03),
        (this.info04 = detail[index].info04),
        (this.info05 = detail[index].info05);
        this.show = true
      // anime({
      //   targets: ".pannel-carinfo",
      //   boxShadow: ['0 0 0px 0px #ea4e4e', '0 0 12px 0px #ec1717'],
      //   duration: 1500,
      // });
    }
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById("surveyMap"));
    this.drwaCharts();
    // this.initCanvas();
    setInterval(() => {
      this.drwaCharts();

    }, 5000);
    // this.drwaCharts()
    // setInterval(this.initCanvas(), 1000);
    // this.drwaCharts();
    // this.initCanvas();
    // 当调整窗口大小时重绘canvas
    window.onresize = () => {
      this.initCanvas();
    };
  }
};
</script>

<style lang="scss" scoped>
.pannel {
  width: 1856px;
  height: 498px;
  border: 1px solid #111e43;
  position: relative;
  &:after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-left: 2px solid #9bb5eb;
    border-top: 2px solid #9bb5eb;
  }
  &:before {
    content: " ";
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-right: 2px solid #9bb5eb;
    border-top: 2px solid #9bb5eb;
  }
  .pannel-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    &:after {
      content: " ";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 10px;
      height: 10px;
      border-left: 2px solid #9bb5eb;
      border-bottom: 2px solid #9bb5eb;
    }
    &:before {
      content: " ";
      position: absolute;
      bottom: 0;
      right: 0;
      width: 10px;
      height: 10px;
      border-right: 2px solid #9bb5eb;
      border-bottom: 2px solid #9bb5eb;
    }
  }
  .pannel-left {
    width: 1849px;
    height: 490px;
    border: 1px solid #111e43;
    margin-left: 3px;
    margin-top: 3px;
    position: relative;
    .pannel-carinfo {
      position: absolute;
      top: 73px;
      left: 32px;
      width: 494px;
      height: 344px;
      background: linear-gradient(
        179deg,
        rgba(105, 17, 17, 0.04) 0%,
        rgba(99, 26, 26, 1) 100%
      );
      border-radius: 10px;
      border: 1px solid rgba(140, 6, 6, 1);
    }
    .pannel-map {
      width: 742px;
      height: 490px;
      margin-left: 526px;
      position: relative;
      .survey-map {
        width: 742px;
        height: 490px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }
    }
    .pannel-allcar-survey {
      width: 557px;
      height: 490px;
      // position: relative;
      // margin-left: 10px;
    }
  }
}

.pannel-carinfo-above {
  width: 494px;
  height: 115px;
  display: flex;
  justify-content: space-around;
  position: relative;
  .pannel-carinfo-above-left-title {
    position: absolute;
    top: 32px;
    left: 30px;
    width: 192px;
    height: 32px;
    font-size: 32px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    line-height: 32px;
  }
  .pannel-carinfo-above-left-time {
    position: absolute;
    top: 74px;
    left: 31px;
    height: 24px;
    font-size: 20px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 24px;
  }
  .pannel-carinfo-above-right-img {
    position: absolute;
    top: 29px;
    right: 24px;
    width: 60px;
    height: 53px;
    background: url("../assets/jinggao.png") no-repeat;
    background-size: cover;
  }
}
.pannel-carinfo-middle {
  position: absolute;
  width: 430px;
  height: 1px;
  background: #979797;
  left: 32px;
  top: 116px;
}

.pannel-carinfo-blew {
  margin-top: 12px;
  margin-left: 32px;

  .pannel-carinfo-blew-info01 {
    display: flex;
    flex-direction: row;
    margin-top: 8px;
    // justify-content: space-between;
    .pannel-carinfo-blew-info01-title {
      width: 62px;
      height: 24px;
      font-size: 20px;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 24px;
      text-align: left;
    }
    .pannel-carinfo-blew-info01-content {
      width: 298px;
      height: 24px;
      font-size: 20px;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 24px;
      text-align: left;

    }
  }
  .pannel-carinfo-blew-info02 {
    margin-top: 10px;
    display: flex;
    width: 160px;
    height: 24px;
    font-size: 20px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 24px;
    justify-content: space-around;
  }
  .pannel-carinfo-blew-info03 {
    margin-top: 10px;
    display: flex;
    width: 290px;
    height: 24px;
    font-size: 20px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 24px;
    justify-content: space-around;
  }
  .pannel-carinfo-blew-info04 {
    margin-top: 10px;
    display: flex;
    width: 180px;
    height: 24px;
    font-size: 20px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 24px;
    justify-content: space-around;
  }
  .pannel-carinfo-blew-info05 {
    margin-top: 10px;
    display: flex;
    width: 395px;
    height: 56px;
    font-size: 20px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 28px;
    justify-content: space-around;
  }
}

.Te{
  width: 100px!important;
}
#canvas {
  z-index: 20;
  position: relative;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>