update 3d 的缺陷分类分析

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

@@ -94,11 +94,11 @@ const tableProps = [
 ]
 
 const tableData = [
-  { eqName: 'A1下片机', plName: 'A', content: '123456', priority: 3, duration: 10 },
+  { eqName: 'A1下片机', plName: 'A', content: '123456', priority: 3, duration: '10min' },
-  { eqName: '磨片机', plName: 'A', content: '123456', priority: 2, duration: 20 },
+  { eqName: '磨片机', plName: 'A', content: '123456', priority: 2, duration: '20min' },
-  { eqName: 'B2钢化', plName: 'B', content: 'JQKA', priority: 1, duration: 30 },
+  { eqName: 'B2钢化', plName: 'B', content: 'JQKA', priority: 1, duration: '30min' },
-  { eqName: '上片机', plName: 'C', content: 'xxx', priority: 3, duration: 1 },
+  { eqName: '上片机', plName: 'C', content: 'xxx', priority: 3, duration: '2min' },
-  { eqName: '清洗机', plName: 'B', content: 'wowowowo', priority: 2, duration: 2 }
+  { eqName: '清洗机', plName: 'B', content: 'wowowowo', priority: 2, duration: '3min' }
 ]
 
 export default {

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

@@ -87,44 +87,47 @@ export default {
       }
     ]
 
+    const demoData = [
+      { value: 100, name: 'A' },
+      { value: 100, name: 'B' },
+      { value: 100, name: 'C' },
+      { value: 100, name: 'D' },
+      { value: 100, name: 'E' }
+    ]
+
     return {
       chart: null,
       // default configs
       configs: {
         title: {
           textAlign: 'center',
-          left: '64%',
+          left: '62%',
           top: '35%',
           text: '33039',
           textStyle: {
             color: '#fff',
-            fontSize: 14,
+            fontSize: 16,
             fontWeight: 'normal'
           },
           subtext: '总数',
           subtextStyle: {
             color: '#fff',
-            fontSize: 10,
+            fontSize: 12,
             fontWeight: 'lighter'
           }
         },
         legend: {
           top: '5%',
-          bottom: '0%',
+          bottom: 0,
-          left: '-5%',
+          left: -10,
           orient: 'vertical',
           icon: 'none',
           itemGap: 5,
           itemWidth: 10,
           formatter: function(name) {
             // test data - dynamic
-            const testData = [
+            const testData = demoData
-              { name: 'A', value: 100 },
+
-              { name: 'B', value: 200 },
-              { name: 'C', value: 300 },
-              { name: 'D', value: 400 },
-              { name: 'E', value: 500 }
-            ]
             let pieLegendVale = {}
             testData.filter((item, index) => {
               if (item.name === name) {
@@ -142,7 +145,6 @@ export default {
           textStyle: {
             rich: {
               a: {
-                // align: 'center',
                 fontSize: 10,
                 color: 'rgba(255, 255, 255, 0.7)',
                 lineHeight: 16
@@ -206,8 +208,8 @@ export default {
           {
             name: 'PieForm',
             type: 'pie',
-            center: ['65%', '50%'],
+            center: ['63%', '50%'],
-            radius: ['50%', '70%'],
+            radius: ['55%', '80%'],
             avoidLabelOverlap: true,
             label: {
               formatter: params => {
@@ -229,7 +231,7 @@ export default {
                 const colorGradient = colors[dataIndex]
                 if (totalRate + percent < 25) {
                   /** 也许这里需要完善，但目前工作良好 */
-                  (() => {})()
+                  ;(() => {})()
                 } else if (totalRate + percent < 50) {
                   colorGradient.x = 0
                   colorGradient.y = 0
@@ -237,43 +239,85 @@ export default {
                   colorGradient.y2 = 1
                 } else if (totalRate + percent < 100) {
                   /** 也许这里需要完善，但目前工作良好 */
-                  (() => {})()
+                  ;(() => {})()
                 }
 
                 totalRate += percent
                 return colorGradient
               }
             },
-            data: [
+            data: demoData
-              { value: 100, name: 'A' },
-              { value: 200, name: 'B' },
-              { value: 300, name: 'C' },
-              { value: 400, name: 'D' },
-              { value: 500, name: 'E' }
-            ]
           }
         ]
       }
     }
   },
   mounted() {
-    window.addEventListener('resize', function() {
+    window.addEventListener('resize', () => {
       if (this.chart) {
         this.chart.resize()
+        this.$nextTick(() => {
+          // 重新绘制文本大小
+          this.applyChartOption()
+        })
       }
     })
 
     this.$nextTick(() => {
       // if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer, { width: '100%', height: '100%' })
       if (!this.chart) this.chart = echarts.init(this.$refs['fault-pie-chart'])
-
+      this.applyChartOption()
-      this.chart.setOption(this.configs)
-
       this.chart.resize()
     })
   },
 
-  methods: {}
+  methods: {
+    calcFontsize(baseSize) {
+      const beilv = document.documentElement.style.getPropertyValue('--beilv')
+      return beilv * baseSize
+    },
+    applyChartOption() {
+      const fs5 = this.calcFontsize(5 /**px*/)
+      const fs8 = this.calcFontsize(8 /**px*/)
+      const fs10 = this.calcFontsize(10 /**px*/)
+      const fs12 = this.calcFontsize(12 /**px*/)
+      const fs16 = this.calcFontsize(16 /**px*/)
+
+      this.configs.title.textStyle.fontSize = fs16
+      this.configs.title.subtextStyle.fontSize = fs12
+
+      this.configs.legend.itemGap = fs5
+      this.configs.legend.itemWidth = fs10
+
+      this.configs.legend.textStyle.rich.a.fontSize = fs10
+      this.configs.legend.textStyle.rich.a.lineHeight = fs16
+      this.configs.legend.textStyle.rich.b.fontSize = fs10
+      // this.configs.legend.textStyle.rich.b.lineHeight = fs16
+      this.configs.legend.textStyle.rich.c.width = fs10
+      this.configs.legend.textStyle.rich.c.height = fs10
+      this.configs.legend.textStyle.rich.c.borderRadius = fs5
+      this.configs.legend.textStyle.rich.d.width = fs10
+      this.configs.legend.textStyle.rich.d.height = fs10
+      this.configs.legend.textStyle.rich.d.borderRadius = fs5
+      this.configs.legend.textStyle.rich.e.width = fs10
+      this.configs.legend.textStyle.rich.e.height = fs10
+      this.configs.legend.textStyle.rich.e.borderRadius = fs5
+      this.configs.legend.textStyle.rich.f.width = fs10
+      this.configs.legend.textStyle.rich.f.height = fs10
+      this.configs.legend.textStyle.rich.f.borderRadius = fs5
+      this.configs.legend.textStyle.rich.g.width = fs10
+      this.configs.legend.textStyle.rich.g.height = fs10
+      this.configs.legend.textStyle.rich.g.borderRadius = fs5
+
+      this.configs.series[0].label.rich.first.fontSize = fs8
+      this.configs.series[0].label.rich.second.fontSize = fs8
+      this.configs.series[0].label.rich.third.fontSize = fs8
+      this.configs.series[0].label.rich.fourth.fontSize = fs8
+      this.configs.series[0].label.rich.fifth.fontSize = fs8
+
+      this.chart.setOption(this.configs)
+    }
+  }
 }
 </script>