'init'

2022-11-07 08:45:49 +08:00
commit 4d1231adc2
1222 changed files with 194552 additions and 0 deletions
--- a/src/views/3DOverview/components/RightContentProductRate.vue
+++ b/src/views/3DOverview/components/RightContentProductRate.vue
@@ -0,0 +1,149 @@
+<template>
+  <div style="height: 10vh; width: 100%; ">
+    <div :id="id" ref="techy-line-chart" class="techy-chart" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import resize from '@/views/OperationalOverview/components/mixins/resize'
+
+export default {
+  name: 'ProductRateLineChart',
+  mixins: [resize],
+  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: {
+        color: ['#59CBE8', '#E93CAC', '#E93CAC', '#FF7345', '#9452FF', '#6A6E87', '#52FFF1'],
+        grid: {
+          top: '5%',
+          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',
+          axisLine: {
+            show: false
+          },
+          axisLabel: {
+            fontSize: 10,
+            color: '#fffa',
+            formatter: '{value} %'
+          },
+          axisTick: { show: false },
+          splitLine: {
+            lineStyle: {
+              color: '#fff3'
+            }
+          }
+        },
+        series: [
+          {
+            name: '产线1',
+            type: 'line',
+            symbol: 'none',
+            data: Array(12)
+              .fill(0)
+              .map(_ => Math.floor(Math.random() * 100))
+          },
+          {
+            name: '产线2',
+            type: 'line',
+            symbol: 'none',
+            data: Array(12)
+              .fill(0)
+              .map(_ => Math.floor(Math.random() * 100))
+          },
+          {
+            name: '产线3',
+            type: 'line',
+            symbol: 'none',
+            data: Array(12)
+              .fill(0)
+              .map(_ => Math.floor(Math.random() * 100))
+          },
+          {
+            name: '产线4',
+            type: 'line',
+            symbol: 'none',
+            data: Array(12)
+              .fill(0)
+              .map(_ => Math.floor(Math.random() * 100))
+          },
+          {
+            name: '产线5',
+            type: 'line',
+            symbol: 'none',
+            data: Array(12)
+              .fill(0)
+              .map(_ => Math.floor(Math.random() * 100))
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      console.log('here...')
+      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;
+}
+</style>