运行管控调试

src/components/e-charts/bar-chartTwo.vue → src/components/e-charts/bar-chart-two.vue

@@ -7,73 +7,72 @@ import { graphic } from "echarts/lib/export";
 export default {
   props: {
     data: {
-      type: Array,
+      type: Object,
       default: () => {
-        return [];
-      }
+        return null;
+      },
     },
     bar_width: {
       type: Number,
-      default: 12
+      default: 12,
     },
     colors: {
       type: Array,
       default: () => {
         return ["#515fe7", "#e56600"];
-      }
+      },
     },
     bar_border_radius: {
       type: Array,
       default: () => {
         return [10, 10, 10, 10];
-      }
+      },
     },
     show_split: {
       type: Boolean,
-      default: false
+      default: false,
     },
     x_router: {
       type: Number,
-      default: 0
-    }
+      default: 0,
+    },
   },
-  data: () => ({}),
-  mounted() {},
   methods: {
     bar() {
-      let self = this;
+      let _self = this;
+      let xAxis = (_self.data && _self.data.xAxis) || [];
+      let series = (_self.data && _self.data.series) || [{}, {}];
+
       return {
         grid: {
           left: 10,
           right: 10,
           bottom: 25,
           top: 25,
-          containLabel: true
+          containLabel: true,
         },
         legend: {
           left: "right",
           itemWidth: 10,
           itemHeight: 10,
           orient: "horizontal",
-          backgroundColor: "#f4f7fc"
+          backgroundColor: "#f4f7fc",
+          data: series.map((item) => item.name),
         },
-        color: this.colors,
-        tooltip: {},
-        dataset: {
-          source: self.data
+        tooltip: {
+          trigger: "axis",
         },
         xAxis: {
           type: "category",
-          //   data: self.data.legendData,
           axisLabel: {
             margin: 20,
             color: "#0d1847",
             textStyle: {
-              fontSize: 12
+              fontSize: 12,
             },
             interval: 0,
-            rotate: self.x_router,
-            formatter: function(value) {
+            rotate: _self.x_router,
+            /* formatter: function(value) {
               let valueTxt = "";
               if (value.length > 6) {
                 valueTxt = value.substring(0, 5) + "...";
@@ -81,57 +80,59 @@ export default {
                 valueTxt = value;
               }
               return valueTxt;
-            }
+            }, */
           },
           axisLine: {
             lineStyle: {
-              color: "#f2f2f2"
-            }
+              color: "#f2f2f2",
+            },
           },
           axisTick: {
-            show: false
+            show: false,
           },
           splitArea: {
             show: true,
             areaStyle: {
               color: ["#fff", "#f8f9fd"],
-              opacity: 0.5
+              opacity: 0.5,
             },
-            interval: 0
-          }
+            interval: 0,
+          },
+          axisPointer: {
+            type: "shadow",
+          },
+          data: xAxis,
         },
         yAxis: [
           {
             axisLabel: {
               color: "#a9aec0",
               textStyle: {
-                fontSize: 12
-              }
+                fontSize: 12,
+              },
             },
             minInterval: 1,
             axisLine: {
               lineStyle: {
-                color: "rgba(0, 0, 0, 0)"
-              }
+                color: "rgba(0, 0, 0, 0)",
+              },
             },
             axisTick: {
-              show: false
+              show: false,
             },
             splitLine: {
               lineStyle: {
                 color: "#f2f2f2",
-                type: "solid"
-              }
-            }
-          }
+                type: "solid",
+              },
+            },
+          },
         ],
-        // Declare several bar series, each will be mapped
-        // to a column of dataset.source by default.
         series: [
           {
             type: "bar",
             type: "bar",
-            barWidth: self.bar_width,
+            barWidth: _self.bar_width,
             itemStyle: {
               normal: {
                 color: function(params) {
@@ -143,24 +144,26 @@ export default {
                     [
                       {
                         offset: 0,
-                        color: self.colors[0] // 0% 处的颜色
+                        color: _self.colors[0], // 0% 处的颜色
                       },
                       {
                         offset: 1,
-                        color: self.colors[0] // 100% 处的颜色
-                      }
+                        color: _self.colors[0], // 100% 处的颜色
+                      },
                     ],
                     false
                   );
                 },
-                barBorderRadius: self.bar_border_radius
-              }
-            }
+                barBorderRadius: _self.bar_border_radius,
+              },
+            },
+            name: series[0].name,
+            data: series[0].data,
           },
           {
             type: "bar",
             type: "bar",
-            barWidth: self.bar_width,
+            barWidth: _self.bar_width,
             itemStyle: {
               normal: {
                 color: function(params) {
@@ -172,24 +175,26 @@ export default {
                     [
                       {
                         offset: 0,
-                        color: self.colors[1] // 0% 处的颜色
+                        color: _self.colors[1], // 0% 处的颜色
                       },
                       {
                         offset: 1,
-                        color: self.colors[1] // 100% 处的颜色
-                      }
+                        color: _self.colors[1], // 100% 处的颜色
+                      },
                     ],
                     false
                   );
                 },
-                barBorderRadius: self.bar_border_radius
-              }
-            }
-          }
-        ]
+                barBorderRadius: _self.bar_border_radius,
+              },
+            },
+            name: series[1].name,
+            data: series[1].data,
+          },
+        ],
       };
-    }
-  }
+    },
+  },
 };
 </script>
 <style scoped>

src/components/e-charts/bar-chart.vue

@@ -46,6 +46,17 @@ export default {
     bar() {
       let self = this;
       return {
+        tooltip: {
+          trigger: "axis",
+          formatter: function(params) {
+            var htmlStr = "";
+            for (var i = 0; i < params.length; i++) {
+              htmlStr += params[i].name + " : ";
+              htmlStr += params[i].value;
+            }
+            return htmlStr;
+          }
+        },
         grid: {
           left: 10,
           right: 10,
@@ -65,7 +76,7 @@ export default {
               },
               interval: 0,
               rotate: self.x_router,
-              formatter: function(value) {
+              /* formatter: function(value) {
                 let valueTxt = "";
                 if (value.length > 6) {
                   valueTxt = value.substring(0, 5) + "...";
@@ -73,7 +84,7 @@ export default {
                   valueTxt = value;
                 }
                 return valueTxt;
-              }
+              } */
             },
             axisLine: {
               lineStyle: {
@@ -91,6 +102,9 @@ export default {
               },
               interval: 0
             },
+            axisPointer: {
+              type: "shadow",
+            },
           }
         ],
         yAxis: [

src/components/e-charts/the-list.vue

@@ -56,7 +56,7 @@ export default {
       this.$el.scrollTop = 0;
 
       this.timer = setInterval(() => {
-        let itemHeight = 50;
+        let itemHeight = 60;
         let curScrollTop = this.$el.scrollTop + itemHeight;
         if (
           curScrollTop >=