最终项目完成

echarts-screen/src/components/CityRank.vue

@@ -18,38 +18,68 @@ export default {
   name: "CityRank",
   data() {
     return {
-      fullscreen: false
+      fullscreen: false,
+      countryList: [],
+      countryData: []
     }
   },
   mounted() {
-    this.getEchartLeft1();
+    this.getConData();
+    setTimeout(this.getEchartLeft1, 2000)
   },
   methods: {
+    //获取疫情数据
+    getConData() {
+      axios.get('https://www.maomin.club/fy/get', {
+        dataType: "json"
+      }).then(res => {
+        let ConData = res.data
+        let made = JSON.parse(ConData)
+        let madeData = made.component
+        let data = madeData[0]
+        for (var i = 0; i < data.topAddCountry.length; i++) {
+          this.countryList[i] = data.topAddCountry[i].name
+          this.countryData[i] = data.topAddCountry[i].value
+          console.log(this.countryList[i])
+        }
+        console.log(this.countryList)
+        console.log(this.countryData)
+      }).catch(err => {
+        console.log(err)
+      })
+    },
+
+    //绘制图表
     getEchartLeft1() {
       // 实例化对象
       let myChart = echarts.init(document.getElementById('chart_left1'));
       let charts = { // 按顺序排列从大到小
+        countryList: this.countryList,
+        countryData: this.countryData,
         cityList: ['湖北', '香港', '广东', '湖南', '四川', '浙江', '上海'],
         cityData: [68149, 8300, 2035, 1020, 843, 1300, 1473],
         function(p) {
-          return p.name + ":" + this.cityData(p.value);
+          return p.name + ":" + this.countryData(p.value);
+          console.log(top10CountryList)
         }
       }
 
+      let top10CountryList = charts.countryList
+      let top10CountryData = charts.countryData
       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++) {
+      for (let i = 0; i < charts.countryList.length; i++) {
         let x = i
         if (x > color.length - 1) {
           x = color.length - 1
         }
         let data = {
-          name: charts.cityList[i],
+          name: charts.countryList[i],
           color: color[x] + ')',
-          value: top10CityData[i],
+          value: top10CountryData[i],
           itemStyle: {
             normal: {
               show: true,
@@ -139,7 +169,7 @@ export default {
               fontSize: 13
             },
           },
-          data: top10CityList
+          data: top10CountryList
         }, {
           type: 'category',
           axisLine: {
@@ -165,7 +195,7 @@ export default {
           splitLine: {
             show: false
           },
-          data: top10CityData.reverse()
+          data: top10CountryData.reverse()
         }],
         series: [{
           name: '',

echarts-screen/src/components/PieCon.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="wrap-container sn-container">
         <div class="sn-content">
-            <div class="sn-title">饼图
+            <div class="sn-title">饼图</div>
             <div class="sn-body">
                 <div class="wrap-container">
                     <div class="chart" id="chart_left2"></div>
@@ -20,7 +20,6 @@
             return {
                 asymptomaticRelative: '',
                 overseasInputRelative: '',
-                wuzhengzhuang: ''
             }
         },
         created() {
@@ -40,8 +39,8 @@
                     let made = JSON.parse(ConData)
                     let madeData = made.component
                     let data = madeData[0]
-                    this.asymptomaticRelative = data.summaryDataIn.asymptomaticRelative
-                    this.overseasInputRelative = data.summaryDataIn.overseasInputRelative
+                    this.asymptomaticRelative = Number(data.summaryDataIn.asymptomaticRelative)
+                    this.overseasInputRelative = Number(data.summaryDataIn.overseasInputRelative)
                 }).catch(err => {
                     console.log(err)
                 })
@@ -77,7 +76,6 @@
                     }
                 };
                 let data = [];
-                console.log(data)
                 //饼图颜色
                 let color = ['#006ced', '#ff3000']
                 console.log(this.asymptomaticRelative)

echarts-screen/src/components/RoseCon.vue

@@ -44,7 +44,10 @@ export default {
         this.HKcur = data.caseList[4].curConfirm
         this.TWcur = data.caseList[3].curConfirm
         this.SHcur = data.caseList[21].curConfirm
-        console.log(this.caselist)
+        this.GDcur = data.caseList[31].curConfirm
+        this.SCcur = data.caseList[24].curConfirm
+        this.FJcur = data.caseList[20].curConfirm
+        this.NMGcur = data.caseList[9].curConfirm
         this.overseasInputRelative = data.summaryDataIn.overseasInputRelative
       }).catch(err => {
         console.log(err)
@@ -248,20 +251,20 @@ export default {
           }, {
             value: this.TWcur,
             name: '台湾'
-          },{
-            value: 108,
+          }, {
+            value: this.SHcur,
             name: '上海'
-          },{
-            value: 41,
+          }, {
+            value: this.GDcur,
             name: '广东'
-          },{
-            value: 36,
+          }, {
+            value: this.SCcur,
             name: '四川'
-          },{
-            value: 22,
+          }, {
+            value: this.FJcur,
             name: '福建'
-          },{
-            value: 20,
+          }, {
+            value: this.NMGcur,
             name: '内蒙古'
           }]
         }]
@@ -270,7 +273,7 @@ export default {
       myChart.setOption(option, true);
       //自适应
       window.addEventListener('resize', () => {
-        // myChart.resize();
+        myChart.resize();
       });
     },
   },

echarts-screen/src/components/TrendCon.vue

@@ -20,7 +20,7 @@ export default {
     return {}
   },
   mounted() {
-    this.getEchartLeft3();
+    setTimeout(this.getEchartLeft3, 2000)
   },
   methods: {
     getEchartLeft3() {

echarts-screen/src/components/wordCloud.vue

@@ -1,213 +1,214 @@
 <template>
-  <div class="wrap-container sn-container" id="wordcloud">
-    <div class="sn-content">
-      <div class="sn-body">
-    <div class="wrap-container">
-    <div class="chart" id="chart_right1"></div>
+    <div class="wrap-container sn-container" id="wordcloud">
+        <div class="sn-content">
+            <div class="sn-body">
+                <div class="wrap-container">
+                    <div class="chart" id="chart_right1"></div>
+                </div>
+            </div>
+        </div>
     </div>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script>
-  import '@/assets/js/echarts-wordcloud.min'
-  import screenfull from "screenfull";
+    import '@/assets/js/echarts-wordcloud.min'
+    import screenfull from "screenfull";
 
-  export default {
-    name: "wordCloud",
-    data() {
-      return {
-        timer: null
-      }
-    },
-    mounted() {
-      this.getEchartRight1();
-    this.timer = setInterval(() => {
-      this.getEchartRight1();
-    }, 5000)
-  },
-  methods: {
-    getEchartRight1() {
-      let myChart = echarts.init(document.getElementById('chart_right1'));
-      let option = {
-        toolbox: {
-          feature: {
-            mytool: {
-              show: true,
-              title: "全屏",
-              icon: 'path://M181 357.5V181.2h176.4c14.3 0 25.9-11.6 25.9-25.9v-31.1c0-14.3-11.6-25.9-25.9-25.9H118c-11 0-20 9-20 20v239.4c0 14.3 11.6 25.9 25.9 25.9H155c14.4-0.1 26-11.7 26-26.1zM668.6 181.2H845v176.4c0 14.3 11.6 25.9 25.9 25.9H902c14.3 0 25.9-11.6 25.9-25.9V118.2c0-11-9-20-20-20H668.6c-14.3 0-25.9 11.6-25.9 25.9v31.1c0 14.3 11.6 26 25.9 26zM357.4 845.2H181V668.8c0-14.3-11.6-25.9-25.9-25.9H124c-14.3 0-25.9 11.6-25.9 25.9v239.4c0 11 9 20 20 20h239.4c14.3 0 25.9-11.6 25.9-25.9v-31.1c-0.1-14.4-11.7-26-26-26zM845 668.8v176.4H668.6c-14.3 0-25.9 11.6-25.9 25.9v31.1c0 14.3 11.6 25.9 25.9 25.9H908c11 0 20-9 20-20V668.8c0-14.3-11.6-25.9-25.9-25.9H871c-14.4 0-26 11.6-26 25.9z',
-              onclick: function () {
-                const element = document.getElementById('chart_right1');
-                if (!screenfull.isEnabled) {//判断是否支持全屏
-                  this.$message({
-                    message: '您的浏览器暂时不支持全屏切换',
-                    type: 'warning'
-                  })
-                  return false
-                }
-                screenfull.toggle(element)
-              },
+    export default {
+        name: "wordCloud",
+        data() {
+            return {
+                timer: null
             }
-          },
         },
-        series: [{
-          type: 'wordCloud',
-          gridSize: 1,
-          sizeRange: [12, 50],
-          rotationRange: [-90, 90],
-          rotationStep: 45,
-          shape: 'diamond',
-          width: '90%',
-          textPadding: 0,
-          autoSize: {
-            enable: true,
-            minSize: 6
-          },
-          textStyle: {
-            normal: {
-              textBorderColor: 'rgba(255,255,255,0.3)',
-              textBorderWidth: 1,
-              color: () => {
-                return 'rgb(' + [
-                  Math.round(Math.random() * 160),
-                  Math.round(Math.random() * 160),
-                  Math.round(Math.random() * 160)
-                ].join(',') + ')';
-              }
-            },
-            emphasis: {
-              fontSize: 20,
-            }
-          },
-          //切换词云
-          data: [{
-            name: '钟南山',
-            value: 810
-          }, {
-            name: '武汉',
-            value: 520
-          },{
-            name: "隔离",
-            value: 928
-          },{
-            name: "白衣天使",
-            value: 906
-          },{
-            name: "健康码",
-            value: 825
-          },{
-            name: "口罩",
-            value: 514
-          },{
-            name: "火神山",
-            value: 486
-          },{
-            name: "清零",
-            value: 53
-          },{
-            name: "驰援",
-            value: 927
-          },{
-            name: "方舱医院",
-            value: 1308
-          },{
-            name: "一级响应",
-            value: 693
-          },{
-            name: "休舱",
-            value: 611
-          },{
-            name: "集中救治",
-            value: 512
-          },{
-            name: "中国速度",
-            value: 382
-          },{
-            name: "大国担当",
-            value: 312
-          },{
-            name: "制造自信",
-            value: 187
-          },{
-            name: "科学防治",
-            value: 163
-          },{
-            name: "依法防控",
-            value: 104
-          },{
-            name: "中国加油",
-            value: 3
-          },{
-            name: "致敬",
-            value: 31
-          },{
-            name: "最美逆行",
-            value: 941
-          },{
-            name: "会师武汉",
-            value: 585
-          },{
-            name: "战胜疫情",
-            value: 473
-          },{
-            name: "捐赠",
-            value: 358
-          },{
-            name: "共渡难关",
-            value: 246
-          },{
-            name: "共抗疫情",
-            value: 207
-          },{
-            name: "众志成城",
-            value: 194
-          },{
-            name: "山河无恙",
-            value: 104
-          },{
-            name: "守望相助",
-            value: 87
-          },{
-            name: "大爱无疆",
-            value: 415
-          },{
-            name: "隔离",
-            value: 253
-          },{
-            name: "隔空喊话",
-            value: 211
-          },{
-            name: "人类命运共同体",
-            value: 116
-          },{
-            name: "人民战疫",
-            value: 1309
-          }]
-        }]
-      }
+        mounted() {
+            setTimeout(this.getEchartRight1, 2000)
+            this.timer = setInterval(() => {
+                this.getEchartRight1();
+            }, 5000)
+        },
+        methods: {
+            getEchartRight1() {
+                let myChart = echarts.init(document.getElementById('chart_right1'));
+                let option = {
+                    toolbox: {
+                        feature: {
+                            mytool: {
+                                show: true,
+                                title: "全屏",
+                                icon: 'path://M181 357.5V181.2h176.4c14.3 0 25.9-11.6 25.9-25.9v-31.1c0-14.3-11.6-25.9-25.9-25.9H118c-11 0-20 9-20 20v239.4c0 14.3 11.6 25.9 25.9 25.9H155c14.4-0.1 26-11.7 26-26.1zM668.6 181.2H845v176.4c0 14.3 11.6 25.9 25.9 25.9H902c14.3 0 25.9-11.6 25.9-25.9V118.2c0-11-9-20-20-20H668.6c-14.3 0-25.9 11.6-25.9 25.9v31.1c0 14.3 11.6 26 25.9 26zM357.4 845.2H181V668.8c0-14.3-11.6-25.9-25.9-25.9H124c-14.3 0-25.9 11.6-25.9 25.9v239.4c0 11 9 20 20 20h239.4c14.3 0 25.9-11.6 25.9-25.9v-31.1c-0.1-14.4-11.7-26-26-26zM845 668.8v176.4H668.6c-14.3 0-25.9 11.6-25.9 25.9v31.1c0 14.3 11.6 25.9 25.9 25.9H908c11 0 20-9 20-20V668.8c0-14.3-11.6-25.9-25.9-25.9H871c-14.4 0-26 11.6-26 25.9z',
+                                onclick: function () {
+                                    const element = document.getElementById('chart_right1');
+                                    if (!screenfull.isEnabled) {//判断是否支持全屏
+                                        this.$message({
+                                            message: '您的浏览器暂时不支持全屏切换',
+                                            type: 'warning'
+                                        })
+                                        return false
+                                    }
+                                    screenfull.toggle(element)
+                                },
+                            }
+                        },
+                    },
+                    series: [{
+                        type: 'wordCloud',
+                        gridSize: 1,
+                        sizeRange: [12, 50],
+                        rotationRange: [-90, 90],
+                        rotationStep: 45,
+                        shape: 'diamond',
+                        width: '90%',
+                        textPadding: 0,
+                        autoSize: {
+                            enable: true,
+                            minSize: 6
+                        },
+                        textStyle: {
+                            normal: {
+                                textBorderColor: 'rgba(255,255,255,0.3)',
+                                textBorderWidth: 1,
+                                color: () => {
+                                    return 'rgb(' + [
+                                        Math.round(Math.random() * 160),
+                                        Math.round(Math.random() * 160),
+                                        Math.round(Math.random() * 160)
+                                    ].join(',') + ')';
+                                }
+                            },
+                            emphasis: {
+                                fontSize: 20,
+                            }
+                        },
+                        //切换词云
+                        data: [{
+                            name: '钟南山',
+                            value: 810
+                        }, {
+                            name: '武汉',
+                            value: 520
+                        }, {
+                            name: "隔离",
+                            value: 928
+                        }, {
+                            name: "白衣天使",
+                            value: 906
+                        }, {
+                            name: "健康码",
+                            value: 825
+                        }, {
+                            name: "口罩",
+                            value: 514
+                        }, {
+                            name: "火神山",
+                            value: 486
+                        }, {
+                            name: "清零",
+                            value: 53
+                        }, {
+                            name: "驰援",
+                            value: 927
+                        }, {
+                            name: "方舱医院",
+                            value: 1308
+                        }, {
+                            name: "一级响应",
+                            value: 693
+                        }, {
+                            name: "休舱",
+                            value: 611
+                        }, {
+                            name: "集中救治",
+                            value: 512
+                        }, {
+                            name: "中国速度",
+                            value: 382
+                        }, {
+                            name: "大国担当",
+                            value: 312
+                        }, {
+                            name: "制造自信",
+                            value: 187
+                        }, {
+                            name: "科学防治",
+                            value: 163
+                        }, {
+                            name: "依法防控",
+                            value: 104
+                        }, {
+                            name: "中国加油",
+                            value: 3
+                        }, {
+                            name: "致敬",
+                            value: 31
+                        }, {
+                            name: "最美逆行",
+                            value: 941
+                        }, {
+                            name: "会师武汉",
+                            value: 585
+                        }, {
+                            name: "战胜疫情",
+                            value: 473
+                        }, {
+                            name: "捐赠",
+                            value: 358
+                        }, {
+                            name: "共渡难关",
+                            value: 246
+                        }, {
+                            name: "共抗疫情",
+                            value: 207
+                        }, {
+                            name: "众志成城",
+                            value: 194
+                        }, {
+                            name: "山河无恙",
+                            value: 104
+                        }, {
+                            name: "守望相助",
+                            value: 87
+                        }, {
+                            name: "大爱无疆",
+                            value: 415
+                        }, {
+                            name: "隔离",
+                            value: 253
+                        }, {
+                            name: "隔空喊话",
+                            value: 211
+                        }, {
+                            name: "人类命运共同体",
+                            value: 116
+                        }, {
+                            name: "人民战疫",
+                            value: 1309
+                        }]
+                    }]
+                }
 
-      myChart.setOption(option, true);
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      });
-    },
-  },
-  beforeDestroy() {
-    clearInterval(this.timer);
-  }
-};
+                myChart.setOption(option, true);
+                window.addEventListener('resize', () => {
+                    myChart.resize();
+                });
+            },
+        },
+        beforeDestroy() {
+            clearInterval(this.timer);
+        }
+    };
 </script>
 
 <style lang="scss" scoped>
-.sn-container {
-  width: 99%;
-  height: 98.4%;
-  .chart {
-    height: 99%;
-    width: 98.4%;
-    //margin-top: 1%;
-    //margin-right: 1%;
-  }
-}
+    .sn-container {
+        width: 99%;
+        height: 98.4%;
+
+        .chart {
+            height: 99%;
+            width: 98.4%;
+            //margin-top: 1%;
+            //margin-right: 1%;
+        }
+    }
 </style>

echarts-screen/src/views/Brand.vue

@@ -22,7 +22,7 @@
             <section class="mainbox">
                 <div class="item left">
                     <div class="panel">
-                        <h2>国内累计病例排行</h2>
+                        <h2>国外累计病例国家排行</h2>
                         <CityRank></CityRank>
                         <div class="panel-footer"></div>
                     </div>

echarts-screen/src/views/Login.vue

@@ -91,17 +91,6 @@ export default {
     this.getConData()
   },
   methods: {
-      //获取疫情数据接口
-      getConData() {
-          axios.get('https://www.maomin.club/fy/get', {}).then(res => {
-              if (res.data) {
-                  this.ConData = res.data
-                  console.log(this.ConData)
-              }
-          }).catch(err => {
-              console.log(err)
-          })
-      },
       login() {
           //重定向路由
           if (this.userName == 'zhuzhu' && this.userPwd == 'pigpig') {