拉取代码

src/views/home/components/barChart.vue

@@ -7,7 +7,38 @@ import * as echarts from "echarts";
 export default {
   props: { feptrendIco: Object },
   data() {
-    return {};
+    return {
+      itemStyle: [
+        {
+          normal: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: "#00A7FD",
+              },
+              {
+                offset: 1,
+                color: "#00A7FD",
+              },
+            ]),
+          },
+        },
+        {
+          normal: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: "#FD8F00",
+              },
+              {
+                offset: 1,
+                color: "#FD8F00",
+              },
+            ]),
+          },
+        },
+      ],
+    };
   },
 
   computed: {
@@ -35,16 +66,32 @@ export default {
   methods: {
     //次数分布折线图
     initChart() {
-
       // 比较两个日期数组，取较长的那个
-      var chooseData=[];
+      var chooseData = [];
+      var dataAll = [];
+      var len = null;
       var aList = this.feptrendIco[0].listDate.length;
       var bList = this.feptrendIco[1].listDate.length;
-      if(aList>bList){
-        chooseData=this.feptrendIco[0].listDate
-      }else{
-         chooseData=this.feptrendIco[1].listDate
-      }
+
+      aList > bList ? (len = 0) : (len = 1);
+      chooseData = this.feptrendIco[len].listDate.map((val) => {
+        if (val.indexOf(":") == 2) {
+          return val.split(":")[0] + ":" + val.split(":")[1];
+        } else {
+          return val;
+        }
+      });
+
+      this.feptrendIco.map((val, ind) => {
+        return dataAll.push({
+          name: val.name,
+          type: "bar",
+          barWidth: "20%",
+          barGap: "0%",
+          itemStyle: this.itemStyle[ind],
+          data: val.list,
+        });
+      });
 
       var chart = echarts.init(this.$refs.barChart);
       var option;
@@ -153,53 +200,7 @@ export default {
         //     end: 35,
         //   },
         // ],
-        series: [
-          {
-            // name: "昨日",
-            name: this.feptrendIco[0].name,
-            type: "bar",
-            barWidth: "20%",
-            barGap: "0%",
-            itemStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  {
-                    offset: 0,
-                    color: "#00A7FD",
-                  },
-                  {
-                    offset: 1,
-                    color: "#00A7FD",
-                  },
-                ]),
-              },
-            },
-            // data: [40, 40, 30, 30, 30, 40, 40, 40, 30,40,50,60],
-            data: this.feptrendIco[0].list,
-          },
-          {
-            // name: "当日",
-            name: this.feptrendIco[1].name,
-            type: "bar",
-            barWidth: "20%",
-            itemStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  {
-                    offset: 0,
-                    color: "#FD8F00",
-                  },
-                  {
-                    offset: 1,
-                    color: "#FD8F00",
-                  },
-                ]),
-              },
-            },
-            // data: [40, 50, 50, 50, 50, 40, 40, 50, 50,20,40,30],
-            data: this.feptrendIco[1].list,
-          },
-        ],
+        series: dataAll,
       };
 
       chart.setOption(option);