no message

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@jiaminghi/data-view": "^2.10.0",
+        "axios": "^1.6.7",
         "core-js": "^3.8.3",
         "echarts": "^4.9.0",
         "echarts-gl": "^1.1.0",
@@ -3412,8 +3413,7 @@
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
-      "optional": true
     },
     "node_modules/at-least-node": {
       "version": "1.0.0",
@@ -3462,6 +3462,29 @@
       "integrity": "sha512-NmWvPnx0F1SfrQbYwOi7OeaNGokp9XhzNioJ/CSBs8Qa4vxug81mhJEAVZwxXuBmYB5KDRfMq/F3RR0BIU7sWg==",
       "optional": true
     },
+    "node_modules/axios": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.6.7.tgz",
+      "integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==",
+      "dependencies": {
+        "follow-redirects": "^1.15.4",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/babel-loader": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.3.0.tgz",
@@ -4081,7 +4104,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "optional": true,
       "dependencies": {
         "delayed-stream": "~1.0.0"
       },
@@ -4829,7 +4851,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "optional": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -5488,7 +5509,6 @@
       "version": "1.15.5",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.5.tgz",
       "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
-      "dev": true,
       "engines": {
         "node": ">=4.0"
       },
@@ -7038,7 +7058,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "devOptional": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -7047,7 +7066,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "devOptional": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -8441,6 +8459,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz",
@@ -13234,8 +13257,7 @@
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
-      "optional": true
     },
     "at-least-node": {
       "version": "1.0.0",
@@ -13269,6 +13291,28 @@
       "integrity": "sha512-NmWvPnx0F1SfrQbYwOi7OeaNGokp9XhzNioJ/CSBs8Qa4vxug81mhJEAVZwxXuBmYB5KDRfMq/F3RR0BIU7sWg==",
       "optional": true
     },
+    "axios": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.6.7.tgz",
+      "integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==",
+      "requires": {
+        "follow-redirects": "^1.15.4",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      },
+      "dependencies": {
+        "form-data": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
+          "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        }
+      }
+    },
     "babel-loader": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.3.0.tgz",
@@ -13788,7 +13832,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "optional": true,
       "requires": {
         "delayed-stream": "~1.0.0"
       }
@@ -14366,8 +14409,7 @@
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
-      "optional": true
     },
     "depd": {
       "version": "2.0.0",
@@ -14926,8 +14968,7 @@
     "follow-redirects": {
       "version": "1.15.5",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.5.tgz",
-      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
+      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw=="
-      "dev": true
     },
     "forever-agent": {
       "version": "0.6.1",
@@ -16150,14 +16191,12 @@
     "mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
-      "devOptional": true
     },
     "mime-types": {
       "version": "2.1.35",
       "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "devOptional": true,
       "requires": {
         "mime-db": "1.52.0"
       }
@@ -17188,6 +17227,11 @@
         }
       }
     },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz",

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@jiaminghi/data-view": "^2.10.0",
+    "axios": "^1.6.7",
     "core-js": "^3.8.3",
     "echarts": "^4.9.0",
     "echarts-gl": "^1.1.0",

src/router/index.js

@@ -44,9 +44,13 @@ const routes = [
       }
     ]
   },{
-    path: '/05',
+    path: '/05/page1',
     name: 'about',
-    component: () => import('../views/05/index')
+    component: () => import('../views/05/page1')  
+  },{
+    path: '/05/page2',
+    name: 'about',
+    component: () => import('../views/05/page2') 
   }
 ]
 

src/views/05/page2.vue

@@ -0,0 +1,814 @@
+
+
+<template>
+    <div class="brand-container">
+        <div class="wrap">
+        <header>
+          <div class="weather">
+            <img :src="imgSrc">
+            <span class="tem">{{ weatcherData.tem }}°C</span> 
+            <span class="wea">{{ weatcherData.wea }}</span>
+          </div>
+          <h2>区块链科技公司品牌概览</h2>
+          <div class="showTime">
+            <span class="time">{{ nowTime }}</span>
+            <span class="date">
+              <span>{{ week }}</span>
+              <span>{{ date }}</span>
+            </span>
+          </div>
+        </header>
+  
+        <section class="mainbox">
+          <div class="item left">
+            <div class="panel">
+              <h2>业务范围</h2>
+              <business />
+              <div class="panel-footer"></div>
+            </div>
+            <div class="panel">
+              <h2>人才队伍</h2>
+              <talent />
+              <div class="panel-footer"></div>
+            </div>
+            <div class="panel">
+              <h2>营收状况</h2>
+              <income />
+              <div class="panel-footer"></div>
+            </div>
+          </div>
+  
+          <div class="item center">
+            <div class="resume">
+              <div class="resume-hd">
+                <ul>
+                  <li>
+                    <countTo :startVal='startVal' :endVal='490' :duration='6000' separator=""></countTo>
+                  </li>
+                  <li>
+                    <countTo :startVal='startVal' :endVal='75' :duration='6000' separator=""></countTo>
+                  </li>
+                  <li>
+                    <countTo :startVal='startVal' :endVal='3000' :duration='6000' separator=""></countTo>
+                  </li>
+                </ul>
+              </div>
+              <div class="resume-bd">
+                <ul>
+                  <li>公司总人数（单位：人）</li>
+                  <li>技术人员占比（单位：%）</li>
+                  <li>产品投资额（单位：万元）</li>
+                </ul>
+              </div>
+            </div>
+            <div class="map">
+              <div class="chart" id="chart_map"></div>
+              <div class="map1"></div>
+              <div class="map2"></div>
+              <div class="map3"></div>
+            </div>
+          </div>
+  
+          <div class="item right">
+            <div class="panel">
+              <h2>产品热词</h2>
+              <wordCloud />
+              <div class="panel-footer"></div>
+            </div>
+            <div class="panel">
+              <h2>客户分布</h2>
+              <distribution />
+              <div class="panel-footer"></div>
+            </div>
+            <div class="panel">
+              <h2>发展历程</h2>
+              <history />
+              <div class="panel-footer"></div>
+            </div>
+          </div>
+        </section>
+    
+      </div>
+      
+    </div>
+  </template>
+  
+  <script>
+  import './assets/js/flexible'
+  import './assets/js/china'
+  import countTo from 'vue-count-to'
+  import axios from "axios";
+  export default {
+    name: 'Brand',
+    components: {
+      countTo
+    },
+    data() {
+        return {
+        nowTime: '',
+        week: '',
+        date: '',
+        timer: null,
+        imgSrc: '',
+        weatcherData: {},
+        startVal: 0,
+        geoCoordMap: {},
+        XAData: [
+          [{ name: "长沙" }, { name: "北京", value: 100 }],
+          [{ name: "长沙" }, { name: "上海", value: 100 }],
+          [{ name: "长沙" }, { name: "广州", value: 100 }],
+          [{ name: "长沙" }, { name: "深圳", value: 100 }],
+          [{ name: "长沙" }, { name: "西安", value: 100 }]
+        ],
+        XNData: [
+          [{ name: "长沙" }, { name: "西宁", value: 100 }],
+          [{ name: "长沙" }, { name: "拉萨", value: 100 }],
+          [{ name: "长沙" }, { name: "哈尔滨", value: 100 }],
+          [{ name: "长沙" }, { name: "成都", value: 100 }],
+          [{ name: "长沙" }, { name: "重庆", value: 100 }]
+        ],
+        YCData: [
+          [{ name: "北京" }, { name: "长沙", value: 100 }],
+          [{ name: "北京" }, { name: "贵阳", value: 100 }],
+          [{ name: "北京" }, { name: "杭州", value: 100 }]
+        ]
+  
+        }
+    },
+    computed: {
+        
+    },
+    created() {
+    },
+    mounted() {
+      this.getWeather();
+      this.timer = setInterval(() => {
+        this.getWeather();
+      }, 1000 * 60 * 60)
+  
+      this.nowTimes();
+      this.getEchart();
+    },
+    methods: {
+      timeFormate(timeStamp) { //显示当前时间
+        let newDate = new Date(timeStamp);
+        let year = newDate.getFullYear();
+        let month = newDate.getMonth() + 1 < 10 ? '0' + (newDate.getMonth() + 1) : newDate.getMonth() + 1;
+        let date = newDate.getDate() < 10 ? '0' + newDate.getDate() : newDate.getDate();
+        let hh = newDate.getHours() < 10 ? '0' + newDate.getHours() : newDate.getHours();
+        let mm = newDate.getMinutes() < 10 ? '0' + newDate.getMinutes() : newDate.getMinutes();
+        let ss = newDate.getSeconds() < 10 ? '0' + newDate.getSeconds() : newDate.getSeconds();
+        let week = newDate.getDay();
+        let weeks = ['日', '一', '二', '三', '四', '五', '六'];
+        let getWeek = '星期' + weeks[week];
+        this.week = getWeek;
+        this.date = year + '.' + month + '.' + date;
+        this.nowTime = hh + ':' + mm + ':' + ss;
+      },
+      nowTimes() {
+        this.timeFormate(new Date());
+        setInterval(this.nowTimes, 1000);
+        this.clear();
+      },
+      clear() {
+        clearInterval(this.nowTimes)
+        this.nowTimes = null;
+      },
+      getWeather() { // 第三方天气api接口
+        axios.get('https://www.tianqiapi.com/api/', {
+          params: {
+            appid: '26148275',
+            appsecret: '2id6H48Y',
+            version: 'v6'
+          }
+        }).then(res => {
+          if (res.data) {
+            if (res.data.wea_img == 'xue') {
+              this.imgSrc = require('./assets/img/brand/xue.png');
+            } else if (res.data.wea_img == 'yin') {
+              this.imgSrc = require('./assets/img/brand/yin.png');
+            } else if (res.data.wea_img == 'yu' || res.data.wea_img == 'bingbao') {
+              this.imgSrc = require('./assets/img/brand/yu.png');
+            } else if (res.data.wea_img == 'yun') {
+              this.imgSrc = require('./assets/img/brand/yun.png');
+            } else if (res.data.wea_img == 'wu') {
+              this.imgSrc = require('./assets/img/brand/wu.png');
+            } else if (res.data.wea_img == 'shachen') {
+              this.imgSrc = require('./assets/img/brand/shachen.png');
+            } else if (res.data.wea_img == 'lei') {
+              this.imgSrc = require('./assets/img/brand/lei.png');
+            } else {
+              this.imgSrc = require('./assets/img/brand/qing.png');
+            }
+            this.weatcherData = res.data;
+          }
+        }).catch(err => {
+          console.log(err)
+        })
+      },
+      convertData(data) { // 地图数据转换
+        let res = [];
+        for (let i = 0; i < data.length; i++) {
+          let dataItem = data[i];
+          let fromCoord = this.geoCoordMap[dataItem[0].name];
+          let toCoord = this.geoCoordMap[dataItem[1].name];
+          if (fromCoord && toCoord) {
+            res.push({
+              fromName: dataItem[0].name,
+              toName: dataItem[1].name,
+              coords: [fromCoord, toCoord],
+              value: dataItem[1].value
+            });
+          }
+        }
+        return res;
+      },
+      getEchart() { // 初始化地图数据
+        let myChart = this.$echarts.init(document.getElementById('chart_map'));
+  
+        this.geoCoordMap = {
+          上海: [121.4648, 31.2891],
+          东莞: [113.8953, 22.901],
+          东营: [118.7073, 37.5513],
+          中山: [113.4229, 22.478],
+          临汾: [111.4783, 36.1615],
+          临沂: [118.3118, 35.2936],
+          丹东: [124.541, 40.4242],
+          丽水: [119.5642, 28.1854],
+          乌鲁木齐: [87.9236, 43.5883],
+          佛山: [112.8955, 23.1097],
+          保定: [115.0488, 39.0948],
+          兰州: [103.5901, 36.3043],
+          包头: [110.3467, 41.4899],
+          北京: [116.4551, 40.2539],
+          北海: [109.314, 21.6211],
+          南京: [118.8062, 31.9208],
+          南宁: [108.479, 23.1152],
+          南昌: [116.0046, 28.6633],
+          南通: [121.1023, 32.1625],
+          厦门: [118.1689, 24.6478],
+          台州: [121.1353, 28.6688],
+          合肥: [117.29, 32.0581],
+          呼和浩特: [111.4124, 40.4901],
+          咸阳: [108.4131, 34.8706],
+          哈尔滨: [127.9688, 45.368],
+          唐山: [118.4766, 39.6826],
+          嘉兴: [120.9155, 30.6354],
+          大同: [113.7854, 39.8035],
+          大连: [122.2229, 39.4409],
+          天津: [117.4219, 39.4189],
+          太原: [112.3352, 37.9413],
+          威海: [121.9482, 37.1393],
+          宁波: [121.5967, 29.6466],
+          宝鸡: [107.1826, 34.3433],
+          宿迁: [118.5535, 33.7775],
+          常州: [119.4543, 31.5582],
+          广州: [113.5107, 23.2196],
+          廊坊: [116.521, 39.0509],
+          延安: [109.1052, 36.4252],
+          张家口: [115.1477, 40.8527],
+          徐州: [117.5208, 34.3268],
+          德州: [116.6858, 37.2107],
+          惠州: [114.6204, 23.1647],
+          成都: [103.9526, 30.7617],
+          扬州: [119.4653, 32.8162],
+          承德: [117.5757, 41.4075],
+          拉萨: [91.1865, 30.1465],
+          无锡: [120.3442, 31.5527],
+          日照: [119.2786, 35.5023],
+          昆明: [102.9199, 25.4663],
+          杭州: [119.5313, 29.8773],
+          枣庄: [117.323, 34.8926],
+          柳州: [109.3799, 24.9774],
+          株洲: [113.5327, 27.0319],
+          武汉: [114.3896, 30.6628],
+          汕头: [117.1692, 23.3405],
+          江门: [112.6318, 22.1484],
+          沈阳: [123.1238, 42.1216],
+          沧州: [116.8286, 38.2104],
+          河源: [114.917, 23.9722],
+          泉州: [118.3228, 25.1147],
+          泰安: [117.0264, 36.0516],
+          泰州: [120.0586, 32.5525],
+          济南: [117.1582, 36.8701],
+          济宁: [116.8286, 35.3375],
+          海口: [110.3893, 19.8516],
+          淄博: [118.0371, 36.6064],
+          淮安: [118.927, 33.4039],
+          深圳: [114.5435, 22.5439],
+          清远: [112.9175, 24.3292],
+          温州: [120.498, 27.8119],
+          渭南: [109.7864, 35.0299],
+          湖州: [119.8608, 30.7782],
+          湘潭: [112.5439, 27.7075],
+          滨州: [117.8174, 37.4963],
+          潍坊: [119.0918, 36.524],
+          烟台: [120.7397, 37.5128],
+          玉溪: [101.9312, 23.8898],
+          珠海: [113.7305, 22.1155],
+          盐城: [120.2234, 33.5577],
+          盘锦: [121.9482, 41.0449],
+          石家庄: [114.4995, 38.1006],
+          福州: [119.4543, 25.9222],
+          秦皇岛: [119.2126, 40.0232],
+          绍兴: [120.564, 29.7565],
+          聊城: [115.9167, 36.4032],
+          肇庆: [112.1265, 23.5822],
+          舟山: [122.2559, 30.2234],
+          苏州: [120.6519, 31.3989],
+          莱芜: [117.6526, 36.2714],
+          菏泽: [115.6201, 35.2057],
+          营口: [122.4316, 40.4297],
+          葫芦岛: [120.1575, 40.578],
+          衡水: [115.8838, 37.7161],
+          衢州: [118.6853, 28.8666],
+          西宁: [101.4038, 36.8207],
+          西安: [109.1162, 34.2004],
+          贵阳: [106.6992, 26.7682],
+          连云港: [119.1248, 34.552],
+          邢台: [114.8071, 37.2821],
+          邯郸: [114.4775, 36.535],
+          郑州: [113.4668, 34.6234],
+          鄂尔多斯: [108.9734, 39.2487],
+          重庆: [107.7539, 30.1904],
+          金华: [120.0037, 29.1028],
+          铜川: [109.0393, 35.1947],
+          银川: [106.3586, 38.1775],
+          镇江: [119.4763, 31.9702],
+          长春: [125.8154, 44.2584],
+          长沙: [113.0823, 28.2568],
+          长治: [112.8625, 36.4746],
+          阳泉: [113.4778, 38.0951],
+          青岛: [120.4651, 36.3373],
+          韶关: [113.7964, 24.7028]
+        };
+  
+        let planePath = "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
+  
+        let color = ["#fff", "#fff", "#fff"]; //航线的颜色
+        let series = [];
+  
+        [
+          ["长沙", this.XAData],
+          ["长沙", this.XNData],
+          ["北京", this.YCData]
+        ].forEach((item, i) => {
+          series.push(
+            {
+              name: item[0] + " Top3",
+              type: "lines",
+              zlevel: 1,
+              effect: {
+                show: true,
+                period: 6,
+                trailLength: 0.7,
+                color: "red", //arrow箭头的颜色
+                symbolSize: 3
+              },
+              lineStyle: {
+                normal: {
+                  color: color[i],
+                  width: 0,
+                  curveness: 0.2
+                }
+              },
+              data: this.convertData(item[1])
+            },
+            {
+              name: item[0] + " Top3",
+              type: "lines",
+              zlevel: 2,
+              symbol: ["none", "arrow"],
+              symbolSize: 10,
+              effect: {
+                show: true,
+                period: 6,
+                trailLength: 0,
+                symbol: planePath,
+                symbolSize: 15
+              },
+              lineStyle: {
+                normal: {
+                  color: color[i],
+                  width: 1,
+                  opacity: 0.6,
+                  curveness: 0.2
+                }
+              },
+              data: this.convertData(item[1])
+            },
+            {
+              name: item[0] + " Top3",
+              type: "effectScatter",
+              coordinateSystem: "geo",
+              zlevel: 2,
+              rippleEffect: {
+                brushType: "stroke"
+              },
+              label: {
+                normal: {
+                  show: true,
+                  position: "right",
+                  formatter: "{b}"
+                }
+              },
+              symbolSize: (val) => {
+                return val[2] / 8;
+              },
+              itemStyle: {
+                normal: {
+                  color: color[i]
+                },
+                emphasis: {
+                  areaColor: "#2B91B7"
+                }
+              },
+              data: item[1].map((dataItem) => {
+                return {
+                  name: dataItem[1].name,
+                  value: this.geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
+                };
+              })
+            }
+          );
+        });
+  
+        let option = {
+          tooltip: {
+            trigger: "item",
+            formatter: (params, ticket, callback) => {
+              if (params.seriesType == "effectScatter") {
+                return "线路：" + params.data.name + "" + params.data.value[2];
+              } else if (params.seriesType == "lines") {
+                return (
+                  params.data.fromName +
+                  ">" +
+                  params.data.toName +
+                  "<br />" +
+                  params.data.value
+                );
+              } else {
+                return params.name;
+              }
+            }
+          },
+          geo: {
+            map: "china",
+            label: {
+              emphasis: {
+                show: true,
+                color: "#fff"
+              }
+            },
+            roam: false,
+            //   放大我们的地图
+            zoom: 1,
+            itemStyle: {
+              normal: {
+                areaColor: "rgba(43, 196, 243, 0.42)",
+                borderColor: "rgba(43, 196, 243, 1)",
+                borderWidth: 1
+              },
+              emphasis: {
+                areaColor: "#2B91B7"
+              }
+            }
+          },
+          series: series
+        }
+  
+        myChart.setOption(option, true);
+  
+        window.addEventListener("resize", () => {
+          myChart.resize();
+        });
+      }
+    },
+    beforeDestroy() {
+      clearInterval(this.timer);
+    }
+  }
+  </script>
+  
+  <style lang="scss" scoped>
+  .brand-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: #000;
+    .wrap {
+      background: url(./assets/img/brand/bg.jpg) no-repeat #000;
+      background-size: cover;
+      line-height: 1.15;
+      header {
+        position: relative;
+        height: 1rem;
+        background: url(./assets/img/brand/head_bg.png) no-repeat top center;
+        background-size: 100% 100%;
+        h2 {
+          color: #7ef0ff;
+          font-size: 0.475rem;
+          text-align: center;
+          line-height: 0.75rem;
+          letter-spacing: 1px;
+        }
+        .weather {
+          position: absolute;
+          left: 1.375rem;
+          top: 0.35rem;
+          font-size: 0.25rem;
+          color: rgba(126, 240, 255, .7);
+          img {
+            width: .45rem;
+          }
+          span {
+            display: inline-block;
+          }
+          .tem {
+            margin: 0 .1rem 0 .2rem;
+          }
+        }
+        .showTime {
+          position: absolute;
+          right: 1.375rem;
+          top: 0.5rem;
+          color: rgba(126, 240, 255, .7);
+          display: flex;
+          .time {
+            font-size: .28rem;
+            margin-right: .18rem;
+          }
+          .date {
+            span {
+              display: block;
+              &:nth-child(1) {
+                font-size: .12rem;
+                text-align: right;
+              }
+              &:nth-child(2) {
+                font-size: .14rem;
+              }
+            }
+          }
+        }
+      }
+      
+      .mainbox {
+        min-width: 1024px;
+        max-width: 1920px;
+        padding: 0.125rem 0.125rem 0;
+        display: flex;
+        .item {
+          flex: 3;
+          &.center {
+            flex: 5;
+            margin: 0 0.125rem 0.1rem;
+            overflow: hidden;
+  
+            .resume {
+              background: rgba(101, 132, 226, 0.1);
+              padding: 0.1875rem;
+              .resume-hd {
+                position: relative;
+                border: 1px solid rgba(25, 186, 139, 0.17);
+                ul {
+                  display: flex;
+                  %li-line {
+                    content: "";
+                    position: absolute;
+                    height: 50%;
+                    width: 1px;
+                    background: rgba(255, 255, 255, 0.2);
+                    top: 25%;
+                  }
+                  li {
+                    position: relative;
+                    flex: 1;
+                    text-align: center;
+                    height: 1.2rem;
+                    line-height: 1.2rem;
+                    font-size: 0.65rem;
+                    color: #ffeb7b;
+                    padding: 0.05rem 0;
+                    font-family: 'DIGITALDREAMFAT';
+                    font-weight: bold;
+                    &:nth-child(2) {
+                      &:after {
+                        @extend %li-line;
+                        right: 0;
+                      }
+                      &:before {
+                        @extend %li-line;
+                        left: 0;
+                      }
+                    }
+                  }
+                }
+                &:before {
+                  content: "";
+                  position: absolute;
+                  width: 30px;
+                  height: 10px;
+                  border-top: 2px solid #02a6b5;
+                  border-left: 2px solid #02a6b5;
+                  top: 0;
+                  left: 0;
+                }
+                &:after {
+                  content: "";
+                  position: absolute;
+                  width: 30px;
+                  height: 10px;
+                  border-bottom: 2px solid #02a6b5;
+                  border-right: 2px solid #02a6b5;
+                  right: 0;
+                  bottom: 0;
+                }
+              }
+              .resume-bd {
+                ul {
+                  display: flex;
+                  li {
+                    flex: 1;
+                    height: 0.5rem;
+                    line-height: 0.5rem;
+                    text-align: center;
+                    font-size: 0.225rem;
+                    color: rgba(255, 255, 255, 0.7);
+                    padding-top: 0.125rem;
+                  }
+                }
+              }
+            }
+          }
+          
+          %map-style {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 6.475rem;
+            height: 6.475rem;
+            background: url(./assets/img/brand/map.png) no-repeat;
+            background-size: 100% 100%;
+            opacity: 0.3;
+          }
+          .map {
+            position: relative;
+            height: 10.125rem;
+            .chart {
+              position: absolute;
+              top: 0;
+              left: 0;
+              z-index: 5;
+              height: 10.125rem;
+              width: 100%;
+            }
+            .map1 {
+              @extend %map-style;
+            }
+            .map2 {
+              @extend %map-style;
+              width: 8.0375rem;
+              height: 8.0375rem;
+              background-image: url(./assets/img/brand/lbx.png);
+              opacity: 0.6;
+              -webkit-animation: rotate 15s linear infinite;
+              animation: rotate 15s linear infinite;
+              z-index: 2;
+            }
+            .map3 {
+              @extend %map-style;
+              width: 7.075rem;
+              height: 7.075rem;
+              background-image: url(./assets/img/brand/jt.png);
+              -webkit-animation: rotate1 10s linear infinite;
+              animation: rotate1 10s linear infinite;
+            }
+          }
+          .panel {
+            position: relative;
+            height: 3.875rem;
+            border: 1px solid rgba(25, 186, 139, 0.17);
+            background: rgba(255, 255, 255, 0.04) url(./assets/img/brand/line.png);
+            padding: 0 0.1875rem 0;
+            margin-bottom: 0.1875rem;
+            &:before {
+              position: absolute;
+              top: 0;
+              left: 0;
+              content: "";
+              width: 10px;
+              height: 10px;
+              border-top: 2px solid #02a6b5;
+              border-left: 2px solid #02a6b5;
+            }
+            &:after {
+              position: absolute;
+              top: 0;
+              right: 0;
+              content: "";
+              width: 10px;
+              height: 10px;
+              border-top: 2px solid #02a6b5;
+              border-right: 2px solid #02a6b5;
+            }
+  
+            .panel-footer {
+              position: absolute;
+              left: 0;
+              bottom: 0;
+              width: 100%;
+              &:before {
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                content: "";
+                width: 10px;
+                height: 10px;
+                border-bottom: 2px solid #02a6b5;
+                border-left: 2px solid #02a6b5;
+              }
+              &:after {
+                position: absolute;
+                bottom: 0;
+                right: 0;
+                content: "";
+                width: 10px;
+                height: 10px;
+                border-bottom: 2px solid #02a6b5;
+                border-right: 2px solid #02a6b5;
+              }
+            }
+  
+            h2 {
+              height: 0.6rem;
+              line-height: 0.6rem;
+              text-align: center;
+              color: #fff;
+              font-size: 0.225rem;
+              font-weight: 400;
+              a {
+                margin: 0 0.1875rem;
+                color: #fff;
+                text-decoration: none;
+              }
+            }
+            .chart {
+              height: 3rem;
+            }
+          }
+        }
+  
+      }
+  
+    }
+  
+  }
+  
+  @-webkit-keyframes rotate {
+    from {
+      transform: translate(-50%, -50%) rotate(0deg);
+    }
+    to {
+      transform: translate(-50%, -50%) rotate(360deg);
+    }
+  }
+  @keyframes rotate {
+    from {
+      transform: translate(-50%, -50%) rotate(0deg);
+    }
+    to {
+      transform: translate(-50%, -50%) rotate(360deg);
+    }
+  }
+  
+  @-webkit-keyframes rotate1 {
+    from {
+      transform: translate(-50%, -50%) rotate(0deg);
+    }
+    to {
+      transform: translate(-50%, -50%) rotate(-360deg);
+    }
+  }
+  @keyframes rotate1 {
+    from {
+      transform: translate(-50%, -50%) rotate(0deg);
+    }
+    to {
+      transform: translate(-50%, -50%) rotate(-360deg);
+    }
+  }
+  
+  @media screen and (max-width: 1024px) {
+    html {
+      font-size: 42px !important;
+    }
+  }
+  @media screen and (min-width: 1920) {
+    html {
+      font-size: 80px !important;
+    }
+  }	
+  </style>
+