修改bug

src/views/OperationalOverview/components/linearBarChart.vue

@@ -0,0 +1,237 @@
+<template>
+  <div>
+    <div :id="id" :class="className" :style="{ height: height + 'px', width: width }" />
+  </div>
+</template>
+
+<script>
+import * as 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: 'linearBarChart'
+    },
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    borderRadius: {
+      type: Array,
+      default: () => [9, 9, 0, 0]
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    },
+    height: {
+      type: Number,
+      default: 200
+    },
+    showLegend: {
+      type: Boolean,
+      default: false
+    },
+    nameList: {
+      type: Array,
+      default: () => []
+    },
+    dataList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      series: []
+    }
+  },
+  mounted() {
+    console.log('mounted')
+    console.log('borderRadius: ', this.borderRadius)
+
+    this.series = [
+      {
+        name: this.dataList[0].name,
+        type: 'bar',
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: this.dataList[0].topColor },
+            { offset: 1, color: this.dataList[0].bottomColor }
+          ]),
+          barBorderRadius: this.borderRadius
+        },
+        data: this.dataList[0].data,
+        barWidth: 6
+      },
+      {
+        name: this.dataList[1].name,
+        type: 'bar',
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: this.dataList[1].topColor },
+            { offset: 1, color: this.dataList[1].bottomColor }
+          ]),
+          barBorderRadius: this.borderRadius
+        },
+        data: this.dataList[1].data,
+        barWidth: 6
+      },
+      {
+        name: this.dataList[2].name,
+        type: 'bar',
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: this.dataList[2].topColor },
+            { offset: 1, color: this.dataList[2].bottomColor }
+          ]),
+          // borderRadius: [5, 5, 0, 0]
+          barBorderRadius: this.borderRadius
+        },
+        data: this.dataList[2].data,
+        barWidth: 6
+      },
+      {
+        name: this.dataList[3].name,
+        type: 'bar',
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: this.dataList[3].topColor },
+            { offset: 1, color: this.dataList[3].bottomColor }
+          ]),
+          // borderRadius: [5, 5, 0, 0]
+          barBorderRadius: this.borderRadius
+        },
+        data: this.dataList[3].data,
+        barWidth: 6
+      },
+      {
+        name: this.dataList[4].name,
+        type: 'bar',
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: this.dataList[4].topColor },
+            { offset: 1, color: this.dataList[4].bottomColor }
+          ]),
+          // borderRadius: [5, 5, 0, 0]
+          barBorderRadius: this.borderRadius
+        },
+        data: this.dataList[4].data,
+        barWidth: 6
+      },
+      {
+        name: this.dataList[5].name,
+        type: 'bar',
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: this.dataList[5].topColor },
+            { offset: 1, color: this.dataList[5].bottomColor }
+          ]),
+          // borderRadius: [5, 5, 0, 0]
+          barBorderRadius: this.borderRadius
+        },
+        data: this.dataList[5].data,
+        barWidth: 6
+      }
+    ]
+
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      console.log(1)
+      this.chart = echarts.init(document.getElementById(this.id))
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        grid: {
+          top: 30,
+          left: '2%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              type: 'solid',
+              color: '#213259', // 左边线的颜色
+              width: '1' // 坐标线的宽度
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#213259'
+            }
+          },
+          data: this.nameList
+        },
+        yAxis: {
+          axisLine: {
+            lineStyle: {
+              type: 'solid',
+              color: '#213259', // 左边线的颜色
+              width: '1' // 坐标线的宽度
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#213259'
+            }
+          },
+          type: 'value'
+        },
+        legend: {
+          itemHeight: 10,
+          itemWidth: 10,
+          x: 'center', // 可设定图例在左、右、居中
+          y: 'top', // 可设定图例在上、下、居中
+          show: this.showLegend,
+          data: this.dataList,
+          right: '1%',
+          textStyle: {
+            fontSize: 12 * this.beilv,
+            color: '#ced1d5'
+          }
+        },
+        series: this.series
+      })
+    }
+  }
+}
+</script>