首页数据统计图

src/components/Echarts/Cisualmap.vue

@@ -1,7 +1,8 @@
 <template>
   <!-- <div>数据统计组件</div> -->
-  <div style="width: 100%; height: 300px" class="chart-box">
+  <div style="width: 100%; height: 300px" class="chart-box d-flex">
-    <div id="Cisualmap" style="height: 350px"></div>
+    <div id="Cisualmap1" style="width: 50%; height: 300px"></div>
+    <div id="Cisualmap2" style="width: 50%; height: 300px"></div>
   </div>
 </template>
 <script>
@@ -34,130 +35,56 @@ export default {
       })();
     };
   },
-  destroyed() {
-    clearInterval(this.timer);
-  },
   methods: {
     async drawLine() {
       // 基于准备好的dom，初始化echarts实例
-      let myChart = this.$echarts.init(document.getElementById('Cisualmap'));
+      let myChart1 = this.$echarts.init(document.getElementById('Cisualmap1'));
-      var data = [
+      let myChart2 = this.$echarts.init(document.getElementById('Cisualmap2'));
-        ['2000-06-05', 116],
-        ['2000-06-06', 129],
-        ['2000-06-07', 135],
-        ['2000-06-08', 86],
-        ['2000-06-09', 73],
-        ['2000-06-10', 85],
-        ['2000-06-11', 73],
-        ['2000-06-12', 68],
-        ['2000-06-13', 92],
-        ['2000-06-14', 130],
-        ['2000-06-15', 245],
-        ['2000-06-16', 139],
-        ['2000-06-17', 115],
-        ['2000-06-18', 111],
-        ['2000-06-19', 309],
-        ['2000-06-20', 206],
-        ['2000-06-21', 137],
-        ['2000-06-22', 128],
-        ['2000-06-23', 85],
-        ['2000-06-24', 94],
-        ['2000-06-25', 71],
-        ['2000-06-26', 106],
-        ['2000-06-27', 84],
-        ['2000-06-28', 93],
-        ['2000-06-29', 85],
-        ['2000-06-30', 73],
-        ['2000-07-01', 83],
-        ['2000-07-02', 125],
-        ['2000-07-03', 107],
-        ['2000-07-04', 82],
-        ['2000-07-05', 44],
-        ['2000-07-06', 72],
-        ['2000-07-07', 106],
-        ['2000-07-08', 107],
-        ['2000-07-09', 66],
-        ['2000-07-10', 91],
-        ['2000-07-11', 92],
-        ['2000-07-12', 113],
-        ['2000-07-13', 107],
-        ['2000-07-14', 131],
-        ['2000-07-15', 111],
-        ['2000-07-16', 64],
-        ['2000-07-17', 69],
-        ['2000-07-18', 88],
-        ['2000-07-19', 77],
-        ['2000-07-20', 83],
-        ['2000-07-21', 111],
-        ['2000-07-22', 57],
-        ['2000-07-23', 55],
-        ['2000-07-24', 60],
-      ];
-
-      var dateList = data.map(function(item) {
-        return item[0];
-      });
-      var valueList = data.map(function(item) {
-        return item[1];
-      });
       // 绘制图表
-      var option = {
+      var option1 = {
-        // Make gradient line here
+        title: {
-        visualMap: [
+          left: 'center',
-          {
+          text: '新建病例',
-            show: false,
+        },
-            type: 'continuous',
+        xAxis: {
-            seriesIndex: 0,
+          type: 'category',
-            min: 0,
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-            max: 400,
+        },
-          },
+        yAxis: { type: 'value' },
-          {
-            show: false,
-            type: 'continuous',
-            seriesIndex: 1,
-            dimension: 0,
-            min: 0,
-            max: dateList.length - 1,
-          },
-        ],
-
-        title: [
-          {
-            left: 'center',
-            text: '新建病例',
-          },
-          {
-            top: '55%',
-            left: 'center',
-            text: '已完成病例',
-          },
-        ],
-        tooltip: { trigger: 'axis' },
-        xAxis: [
-          { data: dateList },
-          {
-            data: dateList,
-            gridIndex: 1,
-          },
-        ],
-        yAxis: [{}, { gridIndex: 1 }],
-        grid: [{ bottom: '60%' }, { top: '60%' }],
         series: [
           {
+            data: [820, 932, 901, 934, 1290, 1330, 1320],
             type: 'line',
-            showSymbol: false,
+            areaStyle: { color: 'rgba(229,244,254,1)' },
-            data: valueList,
+            lineStyle: { color: 'rgb(45,151,213)' },
+            itemStyle: { color: 'rgb(45,151,213)' },
+            smooth: true,
           },
+        ],
+      };
+      var option2 = {
+        title: {
+          left: 'center',
+          text: '已完成病例',
+        },
+        xAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        },
+        yAxis: { type: 'value' },
+        series: [
           {
+            data: [820, 932, 901, 934, 1290, 1330, 1320],
             type: 'line',
-            showSymbol: false,
+            areaStyle: { color: 'rgba(229,244,254,1)' },
-            data: valueList,
+            lineStyle: { color: 'rgb(45,151,213)' },
-            xAxisIndex: 1,
+            itemStyle: { color: 'rgb(45,151,213)' },
-            yAxisIndex: 1,
+            smooth: true,
           },
         ],
       };
-      myChart.setOption(option);
+      myChart1.setOption(option1);
+      myChart2.setOption(option2);
     },
   },
 };

src/components/Echarts/Piemap.vue

@@ -43,6 +43,7 @@ export default {
       let myChart = this.$echarts.init(document.getElementById('Piemap'));
       // 绘制图表
       var option = {
+        color: ['#FE9C58', '#7AEBFF', '#FFCC00', '#744CFF'],
         legend: { top: 'bottom' },
         series: [
           {