修改bug

2023-11-15 09:08:20 +08:00
parent f7846f2767
commit 95f7004d1c
86 changed files with 7750 additions and 64 deletions
--- a/src/views/OperationalOverview/components/BarChart.vue
+++ b/src/views/OperationalOverview/components/BarChart.vue
@@ -0,0 +1,127 @@
+
+<template>
+  <div>
+    <div :id="id" :class="className" :style="{ height: height, width:width}" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import 'echarts/theme/macarons' // echarts theme
+import resize from './mixins/resize'
+
+export default {
+  name: 'OverviewBar',
+  mixins: [resize],
+  props: {
+    id: {
+      type: String,
+      default: 'OverviewLine'
+    },
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    },
+    height: {
+      type: String,
+      default: '300px'
+    },
+    showLegend: {
+      type: Boolean,
+      default: false
+    },
+    legendData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById(this.id))
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        grid: {
+          top: 10,
+          left: '2%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              type: 'solid',
+              color: '#123341', // 左边线的颜色
+              width: '1'// 坐标线的宽度
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#666a74' // 坐标值得具体的颜色
+
+            }
+          },
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        },
+        yAxis: {
+          axisLine: {
+            lineStyle: {
+              type: 'solid',
+              color: '#123341', // 左边线的颜色
+              width: '1'// 坐标线的宽度
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#666a74' // 坐标值得具体的颜色
+
+            }
+          },
+          type: 'value'
+        },
+        series: [
+          {
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: 'bar',
+            showBackground: true,
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          }
+        ]
+      })
+    }
+  }
+}
+</script>