更改国内城市排行及热词

echarts-screen/package-lock.json

@@ -11932,6 +11932,11 @@
         }
       }
     },
+    "vue-fullscreen": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/vue-fullscreen/-/vue-fullscreen-2.1.6.tgz",
+      "integrity": "sha512-p2lJYm/RgTHOqARlnljZlOGW/+sQFuSkV20Tje0lfzYoZnqSVR+vC0ytOX5aE0iebMUze63RBNPwpxuxjv6ucA=="
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",

echarts-screen/package.json

@@ -9,6 +9,7 @@
   "dependencies": {
     "core-js": "^3.6.4",
     "vue": "^2.6.11",
+    "vue-fullscreen": "^2.1.6",
     "vue-router": "^3.1.6",
     "vue-seamless-scroll": "^1.1.21",
     "vuex": "^3.2.0"

echarts-screen/src/components/CityRank.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="CityRank-container">
+    <div class="chart" id="chart_left1"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CityRank",
+  data() {
+    return {}
+  },
+  mounted() {
+    this.getEchartLeft1();
+  },
+  methods: {
+    getEchartLeft1() {
+      // 实例化对象
+      let myChart = echarts.init(document.getElementById('chart_left1'));
+      let charts = { // 按顺序排列从大到小
+        cityList: ['湖北', '香港', '广东', '湖南', '四川', '浙江', '上海'],
+        cityData: [68149, 8300, 2035, 1020, 843, 1300, 1473],
+        function(p) {
+          return p.name + ":" + this.cityData(p.value);
+        }
+      }
+
+      let top10CityList = charts.cityList;
+      let top10CityData = charts.cityData;
+      let color = ['rgba(14,109,236', 'rgba(255,91,6', 'rgba(100,255,249', 'rgba(248,195,248', 'rgba(110,234,19', 'rgba(255,168,17', 'rgba(218,111,227'];
+
+      let lineY = [];
+      for (let i = 0; i < charts.cityList.length; i++) {
+        let x = i
+        if (x > color.length - 1) {
+          x = color.length - 1
+        }
+        let data = {
+          name: charts.cityList[i],
+          color: color[x] + ')',
+          value: top10CityData[i],
+          itemStyle: {
+            normal: {
+              show: true,
+              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                offset: 0,
+                color: color[x] + ', 0.3)'
+              }, {
+                offset: 1,
+                color: color[x] + ', 1)'
+              }], false),
+              barBorderRadius: 10
+            },
+            emphasis: {
+              shadowBlur: 15,
+              shadowColor: 'rgba(0, 0, 0, 0.1)'
+            }
+          }
+        }
+        lineY.push(data)
+      }
+
+      // 指定配置和数据
+      let option = {
+        color: color,
+        tooltip: {
+          trigger: 'item',
+        },
+        grid: {
+          borderWidth: 0,
+          top: '5%',
+          left: '2%',
+          right: '2%',
+          bottom: '0%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'value',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          },
+          axisLabel: {
+            show: false
+          }
+        }],
+        yAxis: [{
+          type: 'category',
+          inverse: true,
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          axisLabel: {
+            show: true,
+            inside: false,
+            textStyle: {
+              color: '#b3ccf8',
+              fontSize: 13
+            },
+          },
+          data: top10CityList
+        }, {
+          type: 'category',
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            show: true,
+            inside: false,
+            textStyle: {
+              color: '#b3ccf8',
+              fontSize: 13
+            },
+            formatter: (val) => {
+              return `${val}`
+            }
+          },
+          splitArea: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          },
+          data: top10CityData.reverse()
+        }],
+        series: [{
+          name: '',
+          type: 'bar',
+          zlevel: 2,
+          barWidth: '10px',
+          data: lineY,
+          animationDuration: 1500,
+          label: {
+            normal: {
+              color: '#b3ccf8',
+              show: false,
+              position: [0, '-15px'],
+              textStyle: {
+                fontSize: 13
+              },
+              formatter: (a, b) => {
+                return a.name;
+
+              }
+            }
+          }
+        }]
+      };
+
+      // 把配置给实例对象
+      myChart.setOption(option, true);
+      window.addEventListener('resize', () => {
+        myChart.resize();
+      });
+    },
+  },
+  beforeDestroy() {
+
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.CityRank-container {
+  .chart {
+    height: 3rem;
+  }
+}
+</style>

echarts-screen/src/components/wordCloud.vue → echarts-screen/src/components/WordCloud.vue

@@ -5,7 +5,7 @@
 -->
 
 <template>
-  <div class="word-container"> 
+  <div class="WordCloud-container">
     <div class="chart" id="chart_right1"></div>
   </div>
 </template>
@@ -14,7 +14,7 @@
 import '@/assets/js/echarts-wordcloud.min'
 
 export default {
-  name: "wordCloud",
+  name: "WordCloud",
   data() {
     return {
       timer: null
@@ -77,7 +77,7 @@ export default {
             name: "白衣天使",
             value: 906
           },{
-            name: "新增确诊",
+            name: "健康码",
             value: 825
           },{
             name: "口罩",
@@ -92,79 +92,79 @@ export default {
             name: "驰援",
             value: 927
           },{
-            name: "新冠状病毒变异",
+            name: "火神山",
             value: 1308
           },{
-            name: "供应链",
+            name: "方舱医院",
             value: 693
           },{
-            name: "公有链",
+            name: "一级响应",
             value: 611
           },{
-            name: "私有链",
+            name: "零感染",
             value: 512
           },{
-            name: "联盟链",
+            name: "休舱",
             value: 382
           },{
             name: "数据共享",
             value: 312
           },{
-            name: "文创版权",
+            name: "武汉解封",
             value: 187
           },{
-            name: "天河链",
+            name: "集中救治",
             value: 163
           },{
-            name: "数据存证",
+            name: "隔空喊话",
             value: 104
           },{
-            name: "UDFS存储",
-            value: 3
+            name: "国家力量",
+            value: 200
           },{
-            name: "在线教育",
+            name: "制造自信",
             value: 31
           },{
-            name: "关联分析",
+            name: "大国担当",
             value: 941
           },{
-            name: "智慧停车",
+            name: "中国方案",
             value: 585
           },{
-            name: "链云生态",
+            name: "科学防治",
             value: 473
           },{
-            name: "应用层",
+            name: "依法防控",
             value: 358
           },{
-            name: "网络层",
+            name: "致敬",
             value: 246
           },{
-            name: "数据层",
+            name: "逆行者",
             value: 207
           },{
-            name: "基础层",
+            name: "志愿者",
             value: 194
           },{
-            name: "智能合约",
+            name: "会师武汉",
             value: 104
           },{
-            name: "去中心化",
+            name: "最美逆行",
             value: 87
           },{
-            name: "数字货币",
+            name: "共渡难关",
             value: 415
           },{
-            name: "酷屏",
+            name: "捐赠",
             value: 253
           },{
-            name: "可视化",
+            name: "众志成城",
             value: 211
           },{
-            name: "P2P",
+            name: "同心抗疫",
             value: 116
           },{
-            name: "数据挖掘",
+            name: "家国情怀",
             value: 1309
           }]
         }]
@@ -183,7 +183,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.word-container {
+.WordCloud-container {
   .chart {
     height: 3rem;
   }

echarts-screen/src/components/business.vue

@@ -1,177 +0,0 @@
-<template>
-    <div class="business-container">
-        <div class="chart" id="chart_left1"></div>
-    </div>
-</template>
-
-<script>
-    export default {
-        name: "business",
-        data() {
-            return {}
-        },
-        mounted() {
-            this.getEchartLeft1();
-        },
-        methods: {
-            getEchartLeft1() {
-                // 实例化对象
-                let myChart = echarts.init(document.getElementById('chart_left1'));
-                let charts = { // 按顺序排列从大到小
-                    cityList: ['美国', '印度', '巴西', '俄罗斯', '法国', '英国', '其他'],
-                    cityData: [18487519, 10094801, 7264221, 2906503, 2479151, 2073511, 34614833]
-                }
-
-                let top10CityList = charts.cityList;
-                let top10CityData = charts.cityData;
-                let color = ['rgba(14,109,236', 'rgba(255,91,6', 'rgba(100,255,249', 'rgba(248,195,248', 'rgba(110,234,19', 'rgba(255,168,17', 'rgba(218,111,227'];
-
-                let lineY = [];
-                for (let i = 0; i < charts.cityList.length; i++) {
-                    let x = i
-                    if (x > color.length - 1) {
-                        x = color.length - 1
-                    }
-                    let data = {
-                        name: charts.cityList[i],
-                        color: color[x] + ')',
-                        value: top10CityData[i],
-                        itemStyle: {
-                            normal: {
-                                show: true,
-                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
-                                    offset: 0,
-                                    color: color[x] + ', 0.3)'
-                                }, {
-                                    offset: 1,
-                                    color: color[x] + ', 1)'
-                                }], false),
-                                barBorderRadius: 10
-                            },
-                            emphasis: {
-                                shadowBlur: 15,
-                                shadowColor: 'rgba(0, 0, 0, 0.1)'
-                            }
-                        }
-                    }
-                    lineY.push(data)
-                }
-
-                // 指定配置和数据
-                let option = {
-                    color: color,
-                    tooltip: {
-                        trigger: 'item',
-                    },
-                    grid: {
-                        borderWidth: 0,
-                        top: '5%',
-                        left: '2%',
-                        right: '2%',
-                        bottom: '0%',
-                        containLabel: true
-                    },
-                    xAxis: [{
-                        type: 'value',
-                        axisTick: {
-                            show: false
-                        },
-                        axisLine: {
-                            show: false
-                        },
-                        splitLine: {
-                            show: false
-                        },
-                        axisLabel: {
-                            show: false
-                        }
-                    }],
-                    yAxis: [{
-                        type: 'category',
-                        inverse: true,
-                        axisTick: {
-                            show: false
-                        },
-                        axisLine: {
-                            show: false
-                        },
-                        axisLabel: {
-                            show: true,
-                            inside: false,
-                            textStyle: {
-                                color: '#b3ccf8',
-                                fontSize: 13
-                            },
-                        },
-                        data: top10CityList
-                    }, {
-                        type: 'category',
-                        axisLine: {
-                            show: false
-                        },
-                        axisTick: {
-                            show: false
-                        },
-                        axisLabel: {
-                            show: true,
-                            inside: false,
-                            textStyle: {
-                                color: '#b3ccf8',
-                                fontSize: 13
-                            },
-                            formatter: (val) => {
-                                return `${val}`
-                            }
-                        },
-                        splitArea: {
-                            show: false
-                        },
-                        splitLine: {
-                            show: false
-                        },
-                        data: top10CityData.reverse()
-                    }],
-                    series: [{
-                        name: '',
-                        type: 'bar',
-                        zlevel: 2,
-                        barWidth: '10px',
-                        data: lineY,
-                        animationDuration: 1500,
-                        label: {
-                            normal: {
-                                color: '#b3ccf8',
-                                show: false,
-                                position: [0, '-15px'],
-                                textStyle: {
-                                    fontSize: 13
-                                },
-                                formatter: (a, b) => {
-                                    return a.name;
-
-                                }
-                            }
-                        }
-                    }]
-                };
-
-                // 把配置给实例对象
-                myChart.setOption(option, true);
-                window.addEventListener('resize', () => {
-                    myChart.resize();
-                });
-            },
-        },
-        beforeDestroy() {
-
-        }
-    };
-</script>
-
-<style lang="scss" scoped>
-    .business-container {
-        .chart {
-            height: 3rem;
-        }
-    }
-</style>

echarts-screen/src/components/distribution.vue

@@ -1,210 +0,0 @@
-<!--
- 描述: 客户分布
- 作者: Jack Chen
- 日期: 2020-05-09
--->
-
-<template>
-  <div class="distribution-container"> 
-    <div class="chart" id="chart_right2"></div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "distribution",
-  data() {
-    return {
-      
-    }
-  },
-  mounted() {
-    this.getEchartRight2();
-  },
-  methods: {
-    getEchartRight2() {
-      let myChart = echarts.init(document.getElementById('chart_right2'));
-      let option = {
-        color: ['#EAEA26', '#906BF9', '#FE5656', '#01E17E', '#3DD1F9', '#FFAD05', '#4465fc'],
-        tooltip: {
-          trigger: 'item',
-          formatter: '{b} : {c} ({d}%)'
-        },
-        polar: {},
-        angleAxis: {
-          interval: 1,
-          type: 'category',
-          data: [],
-          z: 10,
-          axisLine: {
-            show: false,
-            lineStyle: {
-              color: '#0B4A6B',
-              width: 5,
-              type: 'solid'
-            },
-          },
-          axisLabel: {
-            interval: 0,
-            show: true,
-            color: '#0B4A6B',
-            margin: 8,
-            fontSize: 16
-          },
-        },
-        radiusAxis: {
-          min: 40,
-          max: 120,
-          interval: 20,
-          axisLine: {
-            show: false,
-            lineStyle: {
-              color: '#0B3E5E',
-              width: 1,
-              type: 'solid'
-            },
-          },
-          axisLabel: {
-            formatter: '{value} %',
-            show: false,
-            padding: [0, 0, 20, 0],
-            color: '#0B3E5E',
-            fontSize: 16
-          },
-          splitLine: {
-            lineStyle: {
-              color: '#0B3E5E',
-              width: 2,
-              type: "solid"
-            }
-          }
-        },
-        calculable: true,
-        series: [{
-          type: 'pie',
-          radius: ['6%', '10%'],
-          hoverAnimation: false,
-          labelLine: {
-            normal: {
-              show: false,
-              length: 30,
-              length2: 50
-            },
-            emphasis: {
-              show: false
-            }
-          },
-          tooltip: {
-            show: false
-          },
-          data: [{
-            name: '',
-            value: 0,
-            itemStyle: {
-              normal: {
-                color: '#0B4A6B'
-              }
-            }
-          }]
-        }, {
-          type: 'pie',
-          radius: ['90%', '95%'],
-          hoverAnimation: false,
-          labelLine: {
-            normal: {
-              show: false,
-              length: 30,
-              length2: 50
-            },
-            emphasis: {
-              show: false
-            }
-          },
-          tooltip: {
-            show: false
-          },
-          data: [{
-            name: '',
-            value: 0,
-            itemStyle: {
-              normal: {
-                color: '#0B4A6B'
-              }
-            }
-          }]
-        },{
-          stack: 'a',
-          type: 'pie',
-          radius: ['20%', '80%'],
-          roseType: 'area',
-          zlevel: 10,
-          label: {
-            normal: {
-              show: true,
-              formatter: '{b}',
-              textStyle: {
-                fontSize: 12,
-              },
-              position: 'outside'
-            },
-            emphasis: {
-              show: false
-            }
-          },
-          labelLine: {
-            normal: {
-              show: true,
-              length: 15,
-              length2: 50,
-              lineStyle: {
-                type: 'dotted' 
-              } 
-            },
-            emphasis: {
-              show: true
-            }
-          },
-          data: [{
-            value: 35,
-            name: '湖南'
-          },{
-            value: 28,
-            name: '河北'
-          },{
-            value: 23,
-            name: '广东'
-          },{
-            value: 18,
-            name: '四川'
-          },{
-            value: 13,
-            name: '浙江'
-          },{
-            value: 8,
-            name: '江苏'
-          },{
-            value: 5,
-            name: '湖北'
-          }]
-        }]
-      }
-
-      myChart.setOption(option, true);
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      });
-    },
-  },
-  beforeDestroy() {
-    
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.distribution-container {
-  .chart {
-    height: 3rem;
-  }
-}
-</style>

echarts-screen/src/components/history.vue

@@ -1,171 +0,0 @@
-<!--
- 描述: 发展历程
- 作者: Jack Chen
- 日期: 2020-05-09
--->
-
-<template>
-  <div class="history-container">
-    <div class="tabs"> 
-      <ul class="tab-tilte">
-        <li v-for="(itemTit, index) in tabTitle" @mouseover="handleMouseOver(index)" @mouseout="handleMouseOut(index)" :class="{active: cur == index}">
-          {{ itemTit }}
-        </li>
-      </ul>
-      <div class="indicatorDots">
-        <span :class="{active: cur == i}" v-for="(v, i) in tabTitle" :key="i"></span>
-      </div>
-      <div class="tab-content">
-        <div v-for="(itemCon, index) in tabCon" v-show="cur == index">
-          <div v-for="(v, i) in itemCon" :key="i" class="content">
-            {{ v }}
-          </div>
-        </div>
-      </div>
-    </div>   
-  </div>
-</template>
-
-<script>
-export default {
-  name: "history",
-  data() {
-    return {
-      timer: null,
-      tabTitle: ['2015', '2016', '2017', '2018', '2019', '2020'],
-      tabCon: [
-        [
-          '2015.10，公司成立，正式布局区块链、大数据方向',
-          '2015.11，与国家超算吕梁云计算中心签订战略合作协议',
-          '2015.12，建设高性能计算服务平台，基于区块链技术打造文创基础云平台'
-        ],
-        [
-          '2016.03，公司提供的高性能计算服务得到中科院认可，就此达成合作',
-          '2016.07，与国家超算广州中心签订战略合作协议，启动区块链底层公链开发技术论证',
-          '2016.10，启动区块链底层公链开发，开拓数字资产管理业务',
-          '2016.11，与国家超级计算长沙中心签订战略合作协议'
-        ],
-        [
-          '2017.03，与国家级长沙经开区共建博士创新创业园',
-          '2017.07，开发GBI区块链资讯信息平台',
-          '2017.09，打造区块链信息服务平台，开拓区块链安全业务',
-          '2017.12，区块链底层公链测试链上线运行，启动链上DAPP开发'
-        ],
-        [
-          '2018.05，与长沙经开区共建区块链产业园，区块链底层公链上线运行',
-          '2018.08，公链分布式存储网络正式运行',
-          '2018.10，区块链安全技术检测中心正式运行，公链多侧链技术落地，链上应用上线',
-          '2018.12，被评为中国区块链百强企业'
-        ],
-        [
-          '2019.03，上线分布式存储系统UDFS，更新优壹号V2.0.0版，完成Ulord V2.0版白皮书全部规划',
-          '2019.07，文创版权公共服务平台优版权正式上线',
-          '2019.08，承担国家网信办区块链相关课题研究',
-        ],
-        [
-          '2020.03，完成分布式计算框架和贡献证明算法的设计和开发',
-          '2020.05，完成分布式计算资源动态调度和管理开发',
-          '2020.10，推出链云计算生态，完成计算平台和API接口开发，完成优壹号对计算Dapp支持'
-        ]
-      ],
-      cur: 0, //默认选中第一个tab
-    }
-  },
-  mounted() {
-    this.getTimer();
-  },
-  methods: {
-    getTimer() {
-      this.timer = setInterval(() => {
-        this.cur++;
-        if (this.cur == this.tabTitle.length) {
-          this.cur = 0;
-        }
-      }, 2000)
-    },
-    handleMouseOver(index) {
-      this.cur = index;
-      clearInterval(this.timer);
-    },
-    handleMouseOut(index) {
-      this.getTimer();
-    }
-  },
-  beforeDestroy() {
-    clearInterval(this.timer);
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.history-container {
-  margin: 0 0.125rem;
-  .tabs {
-    display: flex;
-    .tab-tilte {
-      li {
-        color: #fff;
-        background-color: rgba(36, 196, 255, 0.5);
-        text-align: center;
-        cursor: pointer;
-        width: 1.0rem;
-        height: 0.35rem;
-        line-height: 0.35rem;
-        margin-bottom: 0.175rem;
-        -webkit-border-radius: 5px;
-        -ms-border-radius: 5px;
-        -o-border-radius: 5px;
-        -moz-border-radius: 5px;
-        border-radius: 5px;
-        &.active{
-          background: linear-gradient(to right, #1b81bc, 20%, #24c4ff);
-          color: #fff;
-        }
-      }
-    }
-    .indicatorDots {
-      background-color: rgba(36, 196, 255, 0.5);
-      width: 1px;
-      height: 2.8rem;
-      margin: 0.0625rem 0 0 0.375rem;
-      span {
-        display: block;
-        height: 0.525rem;
-        margin-left: -0.0875rem;
-        &:after {
-          content: '';
-          display: block;
-          width: 0.125rem;
-          height: 0.125rem;
-          background: #ddd;
-          -webkit-border-radius: 50%;
-          -ms-border-radius: 50%;
-          -o-border-radius: 50%;
-          -moz-border-radius: 50%;
-          border-radius: 50%;
-          border: 2px solid #1b81bc;
-        }
-        &.active {
-          &:after {
-            background: #24c4ff;
-            -webkit-box-shadow: 0 0 0.125rem #1b81bc;
-            box-shadow: 0 0 0.125rem #1b81bc;
-          }
-        }
-      }
-    }
-    .tab-content {
-      display: flex;
-      align-items: center;
-      div {
-        margin-left: 0.1875rem;
-        color: #fff;
-        .content {
-          line-height: 0.275rem;
-          padding: 0.125rem 0;
-        }
-      }
-    }
-  }
-}
-</style>

echarts-screen/src/components/income.vue

@@ -1,185 +0,0 @@
-<!--
- 描述: 营业收入
- 作者: Jack Chen
- 日期: 2020-05-09
--->
-
-<template>
-  <div class="income-container"> 
-    <div class="chart" id="chart_left3"></div>  
-  </div>
-</template>
-
-<script>
-export default {
-  name: "income",
-  data() {
-    return {
-      
-    }
-  },
-  mounted() {
-    this.getEchartLeft3();
-  },
-  methods: {
-    getEchartLeft3() {
-      let myChart = echarts.init(document.getElementById('chart_left3'));
-      let data = {
-        city: ['2015', '2016', '2017', '2018', '2019', '2020'],
-        num: ['555', '896', '1935', '2922', '4508', '5000']
-      }
-
-      let option = {
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            lineStyle: {
-              color: {
-                type: 'linear',
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [{
-                  offset: 0,
-                  color: 'rgba(255,255,255,0)' // 0% 处的颜色
-                }, {
-                  offset: 0.5,
-                  color: 'rgba(255,255,255,1)' // 100% 处的颜色
-                }, {
-                  offset: 1,
-                  color: 'rgba(255,255,255,0)' // 100% 处的颜色
-                }],
-                global: false // 缺省为 false
-              }
-            },
-          },
-          formatter: (value) => {
-            return value[0].name + '年营业收入：<br>' + value[0].value + '万元'; 
-          }
-        },
-        grid: {
-          top: '5%',
-          left: '2%',
-          right: '2%',
-          bottom: '0%',
-          containLabel: true
-        },
-        xAxis: [{
-          type: 'category',
-          boundaryGap: true,
-          axisLine: { //坐标轴轴线相关设置。数学上的x轴
-            show: false,
-            lineStyle: {
-              color: '#092b5d'
-            },
-          },
-          axisLabel: { //坐标轴刻度标签的相关设置
-            textStyle: {
-              color: '#24c4ff',
-              margin: 15,
-            },
-            formatter: (data) => {
-                return data.substr(2) + '年';
-            }
-          },
-          axisTick: {
-            show: false,
-          },
-          data: data.city
-        }],
-        yAxis: [{
-          min: 0,
-          max: 6000,
-          splitLine: {
-            show: false,
-            lineStyle: {
-              color: '#092b5d'
-            },
-          },
-          axisLine: {
-            show: false,
-            lineStyle: {
-              color: "#092b5d"
-            }
-          },
-          axisLabel: {
-            show: true,
-            textStyle: {
-              color: '#24c4ff',
-            }
-          },
-          axisTick: {
-            show: false,
-          },
-        }],
-        series: [{
-          name: '',
-          type: 'line',
-          symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
-          showAllSymbol: true,
-          symbolSize: 8,
-          lineStyle: {
-            normal: {
-              color: '#7c80f4', // 线条颜色
-            },
-            borderColor: 'rgba(0,0,0,.4)',
-          },
-          itemStyle: {
-            color: "rgba(14,30,73,1)",
-            borderColor: "#646ace",
-            borderWidth: 2
-          },
-          label: {
-            normal: {
-              show: true,
-              position: 'top',
-              formatter: [
-                ' {a|{c}}',
-              ].join(','),
-              rich: {
-                a: {
-                  color: '#fff',
-                  align: 'center',
-                },
-              }
-            }
-          },
-          smooth: true,
-          areaStyle: { //区域填充样式
-            normal: {
-              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                offset: 0,
-                color: "rgba(124, 128, 244,.3)"
-              },{
-                offset: 1,
-                color: "rgba(124, 128, 244, 0)"
-              }], false),
-              shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
-              shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
-            }
-          },
-          data: data.num
-        }]
-      }
-
-      myChart.setOption(option, true);
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      })
-    },
-  },
-  beforeDestroy() {
-    
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.income-container {
-  .chart {
-    height: 3rem;
-  }
-}
-</style>

echarts-screen/src/components/index.js

@@ -1,75 +1,12 @@
-/*
- * 描述: 封装组件库
- * 作者: Jack Chen
- * 日期: 2020-04-18
- */
 
-// import bgAnimation from './bgAnimation' // 登录界面背景图动画
-// import modal from './modal' // 自定义全局模态框
-// import sinan from './sinan' // 司南排名图
-// import seamless from './seamless' // 新闻无缝滚动
-// import pyramid from './pyramid' // 金字塔动画
-// import scrollArc from './scrollArc' // 滚动弧形线
-// import szBar from './szBar' // 双轴柱状图
-// import ringPin from './ringPin' // 环形气泡图
-// import rotateColorful from './rotateColorful' // 旋转多彩图
-// import circleRunway from './circleRunway' // 环形跑道图
-// import scanRadius from './scanRadius' // 扫描半径图
-// import cakeLinkage from './cakeLinkage' // 柱饼组合联动
-// import dynamicLine from './dynamicLine' // 动态轮播折线图
-// import pyramidTrend from './pyramidTrend' // 金字塔趋势
-// import staffMix from './staffMix' // 人员占比
-// import flashCloud from './flashCloud' // 闪动云
-// import ringPie from './ringPie' // 环形饼图
-// import colorfulRadar from './colorfulRadar' // 多彩雷达
-// import dynamicList from './dynamicList' // 动态列表动画
-// import bar3d from './bar3d' // 3D立体柱状图
-// import colorfulArea from './colorfulArea' // 多彩轮播面积
-// import rainbow from './rainbow' // 彩虹轨道图
-// import gauge from './gauge' // 仪表盘
-// import waterPolo from './waterPolo' // 水球图
-// import circleNesting from './circleNesting' // 圆环套圆环
 
-import business from './business' // 业务范围
-import talent from './talent' // 人才队伍
-import income from './income' // 营业收入
-import wordCloud from './wordCloud' // 产品热词
-import distribution from './distribution' // 客户分布
-import history from './history' // 发展历程
+import CityRank from './CityRank' // 业务范围
+import WordCloud from './WordCloud' // 产品热词
 
 const components = {
-  // bgAnimation,
-  // modal,
-  // sinan,
-  // seamless,
-  // pyramid,
-  // scrollArc,
-  // szBar,
-  // ringPin,
-  // rotateColorful,
-  // circleRunway,
-  // scanRadius,
-  // cakeLinkage,
-  // dynamicLine,
-  // pyramidTrend,
-  // staffMix,
-  // flashCloud,
-  // ringPie,
-  // colorfulRadar,
-  // dynamicList,
-  // bar3d,
-  // colorfulArea,
-  // rainbow,
-  // gauge,
-  // waterPolo,
-  // circleNesting,
 
-  business,
-  talent,
-  income,
-  wordCloud,
-  distribution,
-  history,
+  CityRank,
+  WordCloud,
   
 };
 

echarts-screen/src/components/talent.vue

@@ -1,146 +0,0 @@
-<!--
- 描述: 人才队伍
- 作者: Jack Chen
- 日期: 2020-05-09
--->
-
-<template>
-  <div class="talent-container"> 
-    <div class="chart" id="chart_left2"></div>   
-  </div>
-</template>
-
-<script>
-export default {
-  name: "talent",
-  data() {
-    return {
-      
-    }
-  },
-  mounted() {
-    this.getEchartLeft2();
-  },
-  methods: {
-    getEchartLeft2() {
-      let myChart = echarts.init(document.getElementById('chart_left2'));
-      let scaleData = [{
-        name: '博士',
-        value: 5
-      },{
-        name: '硕士',
-        value: 10
-      },{
-        name: '本科',
-        value: 10
-      },{
-        name: '专科',
-        value: 10
-      },{
-        name: '国防科大',
-        value: 5
-      },{
-        name: '大厂专家',
-        value: 5
-      }];
-      let rich = {
-        white: {
-          color: '#ddd',
-          align: 'center',
-          padding: [3, 0]
-        }
-      };
-      let placeHolderStyle = {
-        normal: {
-          label: {
-            show: false
-          },
-          labelLine: {
-            show: false
-          },
-          color: 'rgba(0, 0, 0, 0)',
-          borderColor: 'rgba(0, 0, 0, 0)',
-          borderWidth: 0
-        }
-      };
-      let data = [];
-      let color=['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
-      for (let i = 0; i < scaleData.length; i++) {
-        data.push({
-          value: scaleData[i].value,
-          name: scaleData[i].name,
-          itemStyle: {
-            normal: {
-              borderWidth: 6,
-              shadowBlur: 10,
-              borderColor: color[i],
-              shadowColor: color[i]
-            }
-          }
-        }, {
-          value: 2,
-          name: '',
-          itemStyle: placeHolderStyle
-        });
-      }
-
-      let option = {
-        series: [{
-          name: '',
-          type: 'pie',
-          clockWise: false,
-          radius: ['66%', '68%'],
-          center: ['50%', '50%'],
-          hoverAnimation: false,
-          itemStyle: {
-            normal: {
-              label: {
-                show: true,
-                position: 'outside',
-                color: '#ddd',
-                formatter: (params) => {
-                  let percent = 0;
-                  let total = 0;
-                  for (let i = 0; i < scaleData.length; i++) {
-                    total += scaleData[i].value;
-                  }
-                  percent = ((params.value / total) * 100).toFixed(0);
-                  if (params.name !== '') {
-                    return params.name + '\n{white|' + '占比' + percent + '%}';
-                  } else {
-                    return '';
-                  }
-                },
-                rich: rich
-              },
-              labelLine: {
-                length: 10,
-                length2: 30,
-                show: true,
-                color: '#00ffff'
-              }
-            }
-          },
-          data: data
-        }]
-      }
-
-      myChart.setOption(option, true);
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      });
-    },
-  },
-  beforeDestroy() {
-    
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.talent-container {
-  .chart {
-    height: 3rem;
-  }
-}
-</style>

echarts-screen/src/views/Brand.vue

@@ -20,8 +20,8 @@
             <section class="mainbox">
                 <div class="item left">
                     <div class="panel">
-                        <h2>各国确诊病例排行</h2>
-                        <business/>
+                        <h2>海外累计病例排行</h2>
+                        <CityRank/>
                         <div class="panel-footer"></div>
                     </div>
                     <div class="panel">
@@ -70,7 +70,7 @@
                 <div class="item right">
                     <div class="panel">
                         <h2>近期热词</h2>
-                        <wordCloud/>
+                        <WordCloud/>
                         <div class="panel-footer"></div>
                     </div>
                     <div class="panel">