CN-525 echarts图内文字动态调整大小

src/views/charts/charts/ChartEchartWithStatistics.vue

@@ -12,7 +12,7 @@ import {
 } from '@/views/charts/charts/tools'
 import chartEchartMixin from './chart-echart-mixin'
 import unitConvert from '@/utils/unit-convert'
-import {unitTypes} from "@/utils/constants";
+import { unitTypes } from '@/utils/constants'
 
 export default {
   name: 'ChartEchartWithStatistics',

src/views/charts/charts/chart-echart-mixin.js

@@ -1,5 +1,6 @@
 import { shallowRef } from 'vue'
 import * as echarts from 'echarts'
+import { storageKey, echartsFontSize } from '@/utils/constants'
 import {
   isEchartsLine,
   isEchartsPie,
@@ -9,6 +10,7 @@ import {
   isAppRelatedDomain,
   getOption
 } from './tools'
+import { handleEchartFontSize, getEchartsFontSize } from '@/utils/tools'
 export default {
   props: {
     chartInfo: Object,
@@ -32,7 +34,8 @@ export default {
   data () {
     return {
       chartOption: null,
-      chartOption2: null
+      chartOption2: null,
+      isResizing: false
     }
   },
   methods: {
@@ -77,25 +80,115 @@ export default {
         return allZero
       }
     },
-    chartResize () {
-      this.$store.getters.getChartList.forEach(chart => {
-        if (chart) {
-          chart.resize()
-        }
-      })
+    chartResize (e) {
+      if (!this.isResizing) {
+        this.isResizing = true
+        // echarts相关图表文字动态调整大小
+        const oldLegendFontSize = localStorage.getItem(storageKey.echartLegendFontSize)
+        const oldLabelFontSize = localStorage.getItem(storageKey.echartLabelFontSize)
+        getEchartsFontSize(e)
+        const echartLegendFontSize = localStorage.getItem(storageKey.echartLegendFontSize)
+        const echartLabelFontSize = localStorage.getItem(storageKey.echartLabelFontSize)
+
+        const chartList = this.$store.getters.getChartList
+        chartList.forEach((item, index, arr) => {
+          try {
+            if (item) {
+              const chart = echarts.init(item.getDom())
+              let chartOption = item.getOption()
+
+              if (oldLegendFontSize != echartLegendFontSize) {
+                console.log('updateLegend....')
+                chartOption = {
+                  ...chartOption,
+                  legend: {
+                    ...chartOption.legend,
+                    textStyle: {
+                      fontSize: echartLegendFontSize
+                    }
+                  }
+                }
+              }
+              if (oldLabelFontSize != echartLabelFontSize) {
+                console.log('updateLabel....')
+                const newSeries = []
+                const chartType = chartOption.series[0].type
+                chartOption.series.forEach((series) => {
+                  const seriesNew = {
+                    ...series,
+                    label: {
+                      ...series.label,
+                      fontSize: echartLabelFontSize
+                    },
+                    markLine: {
+                      ...series.markLine,
+                      label: {
+                        fontSize: echartLabelFontSize
+                      }
+                    }
+                  }
+                  newSeries.push(seriesNew)
+                })
+
+                if (chartType === 'pie') {
+                  chartOption = {
+                    ...chartOption,
+                    axisLabel: {
+                      ...chartOption.axisLabel,
+                      fontSize: echartLabelFontSize
+                    },
+                    series: newSeries
+                  }
+                } else {
+                  chartOption = {
+                    ...chartOption,
+                    xAxis: {
+                      ...chartOption.xAxis,
+                      axisLabel: {
+                        fontSize: echartLabelFontSize
+                      }
+                    },
+                    yAxis: {
+                      ...chartOption.yAxis,
+                      axisLabel: {
+                        fontSize: echartLabelFontSize
+                      }
+                    },
+                    axisLabel: {
+                      ...chartOption.axisLabel,
+                      fontSize: echartLabelFontSize
+                    },
+                    series: newSeries
+                  }
+                }
+              }
+              if (oldLegendFontSize != echartLegendFontSize || oldLabelFontSize != echartLabelFontSize) {
+                chart.setOption(chartOption)
+              }
+              item.resize()
+            }
+          } catch (e) {
+            console.error(e)
+          }
+        })
+
+        setTimeout(() => {
+          this.isResizing = false
+        }, 200)
+      }
     },
-    setTimeoutResize () {
+    setTimeoutResize (e) {
       setTimeout(() => {
-        this.chartResize()
+        this.chartResize(e)
       }, 400)
     },
     loadEchart (chartNum, refresh = false) {
       this.$emit('showLoading', true)
       try {
-        this.myChart.setOption(this.chartOption, refresh)
+        this.myChart.setOption(handleEchartFontSize(this.chartOption), refresh)
         this.$store.commit('setChartList', this.$_.cloneDeep(this.myChart))
         if (chartNum && chartNum == 2) {
-          this.myChart2.setOption(this.chartOption2, refresh)
+          this.myChart2.setOption(handleEchartFontSize(this.chartOption2), refresh)
           this.$store.commit('setChartList', this.$_.cloneDeep(this.myChart2))
         }
       } finally {

src/views/charts/charts/options/line.js

@@ -1,7 +1,9 @@
 import unitConvert from '@/utils/unit-convert'
-import { unitTypes, chartColor } from '@/utils/constants'
+import { unitTypes, chartColor, storageKey } from '@/utils/constants'
 import { axisFormatter, tooLongFormatter } from '@/views/charts/charts/tools'
 
+const legendFontSize = localStorage.getItem(storageKey.echartLegendFontSize)
+const labelFontSize = localStorage.getItem(storageKey.echartLabelFontSize)
 export const line = {
   tooltip: {
     appendToBody: true,
@@ -49,12 +51,12 @@ export const line = {
     itemWidth: 10,
     textStyle: {
       padding: [0, 0, 0, 2],
-      fontSize: 14
+      fontSize: legendFontSize
     },
     formatter: tooLongFormatter
   },
   axisLabel: {
-    fontSize: 14
+    fontSize: labelFontSize
   },
   series: [
     {
@@ -99,10 +101,13 @@ export const lineWithStatistics = {
     right: 20
   },
   legend: {
-    show: false
+    show: false,
+    textStyle: {
+      fontSize: legendFontSize
+    }
   },
   axisLabel: {
-    fontSize: 14
+    fontSize: labelFontSize
   },
   series: [
     {
@@ -156,11 +161,11 @@ export const lineStack = {
     formatter: tooLongFormatter,
     textStyle: {
       padding: [0, 0, 0, 5],
-      fontSize: 14
+      fontSize: legendFontSize
     }
   },
   axisLabel: {
-    fontSize: 14
+    fontSize: labelFontSize
   },
   series: [
     {
@@ -180,7 +185,6 @@ export const singleValueLine = {
     showContent: true,
     appendToBody: true,
     trigger: 'axis',
-    formatter: axisFormatter,
     textStyle: {
       width: '20px',
       overflow: 'truncate'
@@ -203,7 +207,10 @@ export const singleValueLine = {
   },
   color: chartColor,
   legend: {
-    show: false
+    show: false,
+    textStyle: {
+      fontSize: legendFontSize
+    }
   },
   series: [
     {
@@ -253,7 +260,10 @@ export const entityListLine = {
   },
   color: chartColor,
   legend: {
-    show: false
+    show: false,
+    textStyle: {
+      fontSize: legendFontSize
+    }
   },
   series: [
     {

src/views/charts/charts/options/pie.js

@@ -1,7 +1,9 @@
 import unitConvert from '@/utils/unit-convert'
 import { tooLongFormatter } from '../tools'
-import { chartColor } from '@/utils/constants'
+import { chartColor, storageKey } from '@/utils/constants'
 
+const legendFontSize = localStorage.getItem(storageKey.echartLegendFontSize)
+const labelFontSize = localStorage.getItem(storageKey.echartLabelFontSize)
 export const pieWithTable = {
   tooltip: {
     appendToBody: true
@@ -20,6 +22,9 @@ export const pieWithTable = {
     formatter: tooLongFormatter,
     tooltip: {
       show: true
+    },
+    textStyle: {
+      fontSize: legendFontSize
     }
   },
   series: [
@@ -65,6 +70,9 @@ export const ipHostedDomain = {
     tooltip: {
       show: true
     },
+    textStyle: {
+      fontSize: legendFontSize
+    },
     formatter: function (name) {
       return name.length > 9 ? name.substr(0, 9) + '...' : name
     }