10.19

src/views/OperationalOverview/components/ProductionAndOperationCenterCockpit/BarChartOne.vue

@@ -0,0 +1,158 @@
+<!--
+ * @Author: zhp
+ * @Date: 2022-01-23 16:50:39
+ * @LastEditTime: 2022-01-25 15:44:26
+ * @LastEditors: zhp
+ * @Description:
+-->
+
+<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
+        },
+        legend: {
+          itemHeight: 10,
+          x: 'right', // 可设定图例在左、右、居中
+          y: 'top', // 可设定图例在上、下、居中
+          itemWidth: 10,
+          show: this.showLegend,
+          data: this.legendData,
+          right: '1%',
+          textStyle: {
+            fontSize: 12,
+            color: '#ced1d5'
+          }
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              type: 'solid',
+              color: '#123341', // 左边线的颜色
+              width: '1'// 坐标线的宽度
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#666a74' // 坐标值得具体的颜色
+            }
+          },
+          data: ['钢一线', '钢二线', '钢三线', '钢四线', '钢五线', '钢六线']
+        },
+        yAxis: {
+          type: 'value',
+          scale: true,
+          max: 12,
+          min: 0,
+          splitNumber: 5,
+          splitLine: {
+            lineStyle: {
+              color: '#213259'
+            }
+          },
+          boundaryGap: [0.2, 0.2],
+          axisLabel: {
+            formatter: '{value} h',
+            textStyle: {
+              color: 'white'
+            }
+          }
+        },
+        series: [
+          {
+            name: this.legendData[0].name,
+            type: 'bar',
+            data: this.legendData[0].data,
+            markLine: {
+              data: [{ type: 'average', name: 'Avg' }]
+            },
+            barWidth: '10%',
+            itemStyle: this.legendData[0].itemStyle
+          },
+          {
+            name: this.legendData[1].name,
+            type: 'bar',
+            data: this.legendData[1].data,
+            barWidth: '10%',
+            itemStyle: this.legendData[1].itemStyle
+          }
+        ]
+      })
+    }
+  }
+}
+</script>