增加饼图和玫瑰图的接口数据

echarts-screen/src/components/PieCon.vue

@@ -1,196 +1,204 @@
 <template>
-  <div class="wrap-container sn-container">
-    <div class="sn-content">
-      <div class="sn-title">饼图</div>
-      <div class="sn-body">
-    <div class="wrap-container">
-      <div class="chart" id="chart_left2"></div>
-       </div>
-      </div>
-     </div>
+    <div class="wrap-container sn-container">
+        <div class="sn-content">
+            <div class="sn-title">饼图
+                <span>{{asymptomaticRelative}}</span></div>
+
+            <div class="sn-body">
+                <div class="wrap-container">
+                    <div class="chart" id="chart_left2"></div>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
-import screenfull from "screenfull";
+    import screenfull from "screenfull";
 
-export default {
-  name: "PieCon",
-  data() {
-    return {
-        asymptomaticRelative: null,
-        overseasInputRelative: ''
-    }
-  },
-  mounted() {
-    this.getEchartLeft2();
-  },
-  methods: {
-      getEchartLeft2() {
-          let myChart = echarts.init(document.getElementById('chart_left2'));
-          //数据
+    export default {
+        name: "PieCon",
+        data() {
+            return {
+                asymptomaticRelative: '',
+                overseasInputRelative: '',
+                wuzhengzhuang: ''
+            }
+        },
+        created() {
 
-          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]
-              console.log(data)
+        },
+        mounted() {
+            this.getConData();
+            setTimeout(this.getEchartLeft2, 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]
+                    this.asymptomaticRelative = data.summaryDataIn.asymptomaticRelative
+                    this.overseasInputRelative = data.summaryDataIn.overseasInputRelative
+                }).catch(err => {
+                    console.log(err)
+                })
+            },
+            //绘制图表
+            getEchartLeft2() {
+                let myChart = echarts.init(document.getElementById('chart_left2'));
+                let scaleData = [{
+                    name: '本地新增',
+                    value: this.asymptomaticRelative
+                }, {
+                    name: '境外输入',
+                    value: this.overseasInputRelative
+                }];
+                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 = [];
+                console.log(data)
+                //饼图颜色
+                let color = ['#006ced', '#ff3000']
+                console.log(this.asymptomaticRelative)
+                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
+                    });
+                }
 
-              this.asymptomaticRelative = data.summaryDataIn.asymptomaticRelative
-              this.overseasInputRelative = data.summaryDataIn.overseasInputRelative
-              console.log(this.asymptomaticRelative)
-              console.log(this.overseasInputRelative)
-          }).catch(err => {
-              console.log(err)
-          })
-          let scaleData = [{
-              name: '本地新增',
-              value: data.summaryDataIn.asymptomaticRelative
-          }, {
-              name: '境外输入',
-              value: 9
-          }];
-          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=['#006ced', '#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 = {
+                    //工具栏
+                    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_left2');
+                                    if (!screenfull.isEnabled) {//判断是否支持全屏
+                                        this.$message({
+                                            message: '您的浏览器暂时不支持全屏切换',
+                                            type: 'warning'
+                                        })
+                                        return false
+                                    }
+                                    screenfull.toggle(element)
 
-      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_left2');
-                if (!screenfull.isEnabled) {//判断是否支持全屏
-                  this.$message({
-                    message: '您的浏览器暂时不支持全屏切换',
-                    type: 'warning'
-                  })
-                  return false
+                                },
+                            }
+                        },
+                    },
+                    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 + ":" + '  ' + params.value + '人' + '\n' + '\n' + '占百分比：' + percent + '%';
+                                        } else {
+                                            return '';
+                                        }
+                                    },
+                                    rich: rich
+                                },
+                                //是否显示视觉引导线。
+                                labelLine: {
+                                    length: 10,
+                                    length2: 30,
+                                    show: true,
+                                    color: '#00ffff'
+                                }
+                            }
+                        },
+                        data: data
+                    }]
                 }
-                screenfull.toggle(element)
 
-              },
-            }
-          },
+                myChart.setOption(option, true);
+                window.addEventListener('resize', () => {
+                    myChart.resize();
+                });
+            },
         },
-        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 + ":" + '  ' + params.value + '人' + '\n' + '\n' + '占百分比：' + 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() {
+        beforeDestroy() {
 
-  }
-};
+        }
+    };
 </script>
 
 <style lang="scss" scoped>
-.sn-container {
-  width: 99%;
-  height: 98.5%;
-  .chart {
-    height: 90%;
-    width: 90%;
-    //margin-top: 1%;
-    margin-left: 4%;
-  }
-}
+    .sn-container {
+        width: 99%;
+        height: 98.5%;
+
+        .chart {
+            height: 90%;
+            width: 90%;
+            //margin-top: 1%;
+            margin-left: 4%;
+        }
+    }
 
 </style>

echarts-screen/src/components/RoseCon.vue

@@ -17,17 +17,34 @@ export default {
   name: "RoseCon",
   data() {
     return {
-      option: null
+      option: null,
+      HKcur: '',
+      TWcur: ''
     }
   },
   mounted() {
-    let myChart = echarts.init(document.getElementById('chart_right2'));
-    this.getEchartRight2();
-    window.addEventListener('resize', () => {
-      myChart.resize()
-    })
+    this.getConData();
+    setTimeout(this.getEchartRight2, 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]
+        this.HKcur = data.caseList[4].curConfirm
+        this.TWcur = data.caseList[3].curConfirm
+        console.log(this.caselist)
+        this.overseasInputRelative = data.summaryDataIn.overseasInputRelative
+      }).catch(err => {
+        console.log(err)
+      })
+    },
+    //绘制图表
     getEchartRight2() {
       let myChart = echarts.init(document.getElementById('chart_right2'));
       let option = {
@@ -220,10 +237,10 @@ export default {
             }
           },
           data: [{
-            value: 1173,
+            value: this.HKcur,
             name: '香港'
-          },{
-            value: 131,
+          }, {
+            value: this.TWcur,
             name: '台湾'
           },{
             value: 108,

echarts-screen/src/views/Brand.vue

@@ -6,8 +6,6 @@
                     <img :src="imgSrc">
                     <span class="tem">{{ weatcherData.tem }}°C</span>
                     <span class="wea">{{ weatcherData.wea }}</span>
-                    <!--                    测试，获取疫情接口中的更新时间-->
-                    <span>{{ConData.page}}</span>
                 </div>
                 <h2>疫情数据分析</h2>
               <div class="showTime">
@@ -82,7 +80,7 @@
                     </div>
                     <div class="panel">
                         <h2>现存确诊</h2>
-                        <waterPolo/>
+                        <RoseCon/>
                         <div class="panel-footer"></div>
                     </div>
                     <div class="panel">
@@ -120,23 +118,26 @@
                 ConData: {},
                 newConfirm: null,
                 TotalConfirm: null,
-                Cured: null
+                Cured: null,
+                time: null
             }
         },
         computed: {},
         created() {
         },
         mounted() {
+            this.getConData();
             this.getWeather();
-            this.getConData()
             this.timer = setInterval(() => {
                 this.getWeather();
+                this.getConData()
             }, 1000 * 60 * 60)
 
             this.nowTimes();
-            this.getEchart();
+            this.time = setTimeout(this.getEchart, 2000)
         },
         methods: {
+
             timeFormate(timeStamp) { //显示当前时间
                 let newDate = new Date(timeStamp);
                 let year = newDate.getFullYear();
@@ -211,14 +212,11 @@
                     this.newConfirm = Number(data.summaryDataIn.curConfirm)
                     this.TotalConfirm = Number(data.summaryDataIn.confirmed)
                     this.Cured = Number(data.summaryDataIn.cured)
-                    console.log('我是' + this.newConfirm)
-                    console.log(data.summaryDataIn.curConfirm)
                     this.ConData = data
                 }).catch(err => {
                     console.log(err)
                 })
             },
-
             // 初始化地图数据
             getEchart() {
                 let myChart = echarts.init(document.getElementById('chart_map'));