'init'

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

@@ -0,0 +1,98 @@
+<template>
+  <div class="right-content-quality-analysis">
+    <div :id="id" ref="fault-pie-chart" class="fault-pie-chart" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import resize from '@/views/OperationalOverview/components/mixins/resize'
+
+export default {
+  name: 'RightContentFaultAnalysis',
+  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: {
+        title: {
+          left: 'center',
+          top: '30%',
+          text: '总共',
+          textStyle: {
+            color: '#888',
+            fontSize: 10
+          },
+          subtext: 880,
+          subtextStyle: {
+            color: '#fff',
+            fontSize: 24
+          }
+        },
+        series: [
+          {
+            name: 'Fault Analysis Chart',
+            type: 'pie',
+            radius: ['50%', '70%'],
+            avoidLabelOverlap: false,
+            label: {},
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '12'
+              }
+            },
+            data: Array(7)
+              .fill(0)
+              .map((_, index) => ({ value: Math.floor(Math.random() * 100), name: '设备' + index }))
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      console.log('here...')
+      if (!this.chart) this.chart = echarts.init(this.$refs['fault-pie-chart'])
+      this.chart.setOption(this.option)
+    })
+  },
+  beforeDestroy() {
+    if (this.chart) this.chart.dispose()
+    this.chart = null
+  },
+  methods: {}
+}
+</script>
+<style scoped>
+.right-content-quality-analysis {
+  height: calc(100% - 32px);
+}
+
+.fault-pie-chart {
+  height: 100%;
+  width: 100%;
+}
+
+.fault-pie-chart >>> div {
+  width: 100% !important;
+}
+</style>