修改bug

src/views/OperationalOverview/components/PieChart.vue

@@ -0,0 +1,221 @@
+<!--
+ * @Author: zwq
+ * @Date: 2022-01-21 14:43:06
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-01-24 09:12:18
+ * @Description:
+-->
+<template>
+  <div :id="id" :class="className" :style="{ height: computedHeight, width: width }" />
+</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: 'DefaultPieChart'
+    },
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    },
+    height: {
+      type: String,
+      default: '300px'
+    },
+    showCenterTitle: {
+      type: Boolean,
+      default: false
+    },
+    showLegend: {
+      type: Boolean,
+      default: false
+    },
+    legendConfig: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    },
+    seriesConfig: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    },
+    seriesData: {
+      type: Array,
+      default: () => []
+    },
+    barColor: {
+      type: Array,
+      default: () => [
+        '#5fe1d2',
+        '#ffb2b0',
+        '#8e90ff',
+        '#f058aa',
+        '#8652da',
+        '#87fb84',
+        '#61b9ff',
+        '#fdf6a6',
+        '#ffc465',
+        '#98d9ff'
+      ]
+    }
+  },
+  data() {
+    const lData = this.seriesData
+    return {
+      chart: null,
+      defaultConfig: {
+        // 默认的legend配置
+        legend: {
+          orient: 'vertical',
+          left: '75%',
+          bottom: 0,
+          itemHeight: 10,
+          itemWidth: 10,
+          formatter: function(name) {
+            let pieLegendVale = {}
+            lData.filter((item, index) => {
+              if (item.name === name) {
+                pieLegendVale = item
+              }
+            })
+            const arr = ['{b|' + pieLegendVale.name + '}', '{a|' + pieLegendVale.value + '}']
+            return arr.join(' ')
+          },
+          textStyle: {
+            rich: {
+              a: {
+                align: 'center',
+                fontSize: 10,
+                color: '#f988bf',
+                lineHeight: 16
+              },
+              b: {
+                // verticalAlign: 'top',
+                align: 'center',
+                fontSize: 10,
+                color: '#dddfe1'
+              }
+            }
+          }
+        },
+        // 默认的series配置
+        series: {
+          center: ['35%', '50%'],
+          radius: ['40%', '70%'],
+          avoidLabelOverlap: false,
+          emphasis: {
+            label: {
+              show: true,
+              fontSize: '20',
+              fontWeight: 'bold'
+            }
+          }
+        }
+      }
+    }
+  },
+  computed: {
+    computedHeight: function() {
+      if (/[0-9]+%$/.test(this.height)) {
+        // 如果是百分比
+        return this.height
+      }
+      return this.height * this.beilv + 'px'
+    }
+  },
+  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({
+        title: this.showCenterTitle
+          ? {
+            text: '总共',
+            subtext: this.seriesData.reduce((pre, cur) => pre + cur.value, 0),
+            top: '32%',
+            left: '49%',
+            textAlign: 'center',
+            itemGap: 5,
+            textStyle: {
+              color: '#c0c0c0',
+              fontSize: 16,
+              fontWeight: 'lighter',
+              lineHeight: 15
+            },
+            subtextStyle: {
+              color: '#fff',
+              fontSize: 24,
+              lineHeight: 20
+            }
+          }
+          : {},
+        tooltip: {
+          trigger: 'item'
+        },
+        grid: {
+          top: '0px',
+          right: '0px',
+          bottom: '0px',
+          left: '0px',
+          containLabel: true
+        },
+        legend: {
+          // 默认配置
+          ...this.defaultConfig.legend,
+          // 外部传入配置
+          ...this.legendConfig
+        },
+        color: this.barColor,
+        series: [
+          {
+            name: 'default name',
+            type: 'pie',
+            // 默认series配置
+            ...this.defaultConfig.series,
+            // 外部传入配置
+            ...this.seriesConfig,
+            data: this.seriesData
+          }
+        ]
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* .chart >>> div:first-child{
+  background-color: red;
+  height: 100% !important;
+} */
+</style>