update

src/views/3DOverview/components/FadianChart.vue

@@ -0,0 +1,161 @@
+<template>
+  <div :id="id" ref="techy-line-chart" class="techy-chart" />
+</template>
+
+<script>
+import echarts from 'echarts'
+import resize from '@/views/OperationalOverview/components/mixins/resize'
+
+export default {
+  name: 'FadianLineChart',
+  mixins: [resize],
+  /** Fn.1: 保证全屏切换时也刷新图表 ，应该在每个父组件为flex:1的echarts组件里都加上，以确保能正确地伸缩 */
+  inject: ['resizeStatus'],
+  /** End Fn.1 */
+  props: {
+    id: {
+      type: String,
+      default: 'default-id'
+    },
+    title: {
+      type: String,
+      default: 'default-title'
+    },
+    xData: {
+      type: Array,
+      default: () => []
+    },
+    seriesData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      option: {
+        legend: {
+          itemGap: 8,
+          itemWidth: 10,
+          itemHeight: 10,
+          right: '5%',
+          textStyle: {
+            color: '#fff9'
+          }
+        },
+        color: ['#59CBE8', '#E93CAC', '#FF7345', '#9452FF', '#6A6E87', '#52FFF1'],
+        grid: {
+          top: '30%',
+          left: 0,
+          right: '5%',
+          bottom: 0,
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          data: Array(12)
+            .fill(0)
+            .map((_, idx) => (idx >= 10 ? idx : '0' + idx) + ':00'),
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            fontSize: 8,
+            color: '#fffa'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#fff3'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: '压力/MPa',
+          nameTextStyle: {
+            fontSize: 10,
+            color: '#fff9',
+            align: 'right'
+          },
+          axisLine: {
+            show: false
+          },
+          axisLabel: {
+            fontSize: 8,
+            color: '#fffa'
+            // formatter: '{value} %'
+          },
+          axisTick: { show: false },
+          splitLine: {
+            lineStyle: {
+              color: '#fff3'
+            }
+          }
+        },
+        series: [
+          {
+            name: '天然气',
+            type: 'line',
+            symbol: 'none',
+            data: Array(12)
+              .fill(0)
+              .map(_ => Math.floor(Math.random() * 100))
+          },
+          {
+            name: '氧气',
+            type: 'line',
+            symbol: 'none',
+            data: Array(12)
+              .fill(0)
+              .map(_ => Math.floor(Math.random() * 100))
+          },
+          {
+            name: 'CDA',
+            type: 'line',
+            symbol: 'none',
+            data: Array(12)
+              .fill(0)
+              .map(_ => Math.floor(Math.random() * 100))
+          }
+        ]
+      }
+    }
+  },
+  computed: {
+    shouldResize() {
+      return this.resizeStatus()
+    }
+  },
+  watch: {
+    shouldResize(val, oldVal) {
+      setTimeout(() => {
+        this.chart.resize()
+      }, 250)
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
+      this.chart.setOption(this.option)
+    })
+  },
+  beforeDestroy() {
+    if (this.chart) this.chart.dispose()
+    this.chart = null
+  },
+  methods: {}
+}
+</script>
+<style scoped>
+.techy-chart {
+  height: 100%;
+  width: 100%;
+}
+
+.techy-chart >>> div {
+  width: 100% !important;
+  height: 100% !important;
+}
+</style>