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

src/components/layout/Home.vue

@@ -12,6 +12,8 @@
 import Header from './Header'
 import LeftMenu from './LeftMenu'
 import Container from './Container'
+import { getEchartsFontSize } from '@/utils/tools'
+
 export default {
   name: 'Home',
   components: {
@@ -29,6 +31,9 @@ export default {
       this.containerShow = false
       this.$nextTick(() => { this.containerShow = true })
     }
+  },
+  created () {
+    getEchartsFontSize()
   }
 }
 </script>

src/utils/constants.js

@@ -22,7 +22,9 @@ export const storageKey = {
   tablePageSizePrefix: 'cn-page-size',
   leftMenuShrink: 'cn-left-menu-shrink',
   unsavedChange: 'cn-unsaved-change',
-  entitySearchHistory: 'cn-entity-search-history'
+  entitySearchHistory: 'cn-entity-search-history',
+  echartLegendFontSize: 'echartLegendFontSize',
+  echartLabelFontSize: 'echartLabelFontSize'
 }
 
 // 统一定义跳转来源
@@ -66,6 +68,15 @@ export const entityType = {
   ip: 'IP'
 }
 
+export const echartsFontSize = {
+  legendFirstFontSize: 12, // <1920
+  legendSecondFontSize: 14, // >=1920 && <2560
+  legendThirdFontSize: 16, // >=2560
+  labelFirstFontSize: 12, // <1920
+  labelSecondFontSize: 12, // >=1920 && <2560
+  labelThirdFontSize: 14// >=2560
+}
+
 export const entityFilterType = {
   ip: [
     {

src/utils/tools.js

@@ -1,7 +1,7 @@
 import { ElMessageBox, ElMessage } from 'element-plus'
 import i18n from '@/i18n'
 import _ from 'lodash'
-import { storageKey, iso36112, topDomain } from '@/utils/constants'
+import { storageKey, iso36112, topDomain, echartsFontSize } from '@/utils/constants'
 import { getIso36112JsonData } from '@/utils/api'
 import { format } from 'echarts'
 import router from '@/router'
@@ -635,6 +635,105 @@ export function getCurrentRoute () {
   return router.currentRoute && router.currentRoute.path
 }
 
+export function getEchartsFontSize (e) {
+  let clientWidth
+  if (e) {
+    clientWidth = e.currentTarget.innerWidth
+  } else {
+    clientWidth = document.getElementsByTagName('html')[0].clientWidth
+  }
+
+  let echartLegendFontSize = echartsFontSize.legendFirstFontSize
+  let echartLabelFontSize = echartsFontSize.labelFirstFontSize
+  if (clientWidth < 1920) {
+    echartLegendFontSize = echartsFontSize.legendFirstFontSize
+    echartLabelFontSize = echartsFontSize.labelFirstFontSize
+  } else if (clientWidth >= 1920 && clientWidth < 2560) {
+    echartLegendFontSize = echartsFontSize.legendSecondFontSize
+    echartLabelFontSize = echartsFontSize.labelSecondFontSize
+  } else if (clientWidth >= 2560) {
+    echartLegendFontSize = echartsFontSize.legendThirdFontSize
+    echartLabelFontSize = echartsFontSize.labelThirdFontSize
+  }
+  localStorage.setItem(storageKey.echartLegendFontSize, echartLegendFontSize)
+  localStorage.setItem(storageKey.echartLabelFontSize, echartLabelFontSize)
+}
+
+export function handleEchartFontSize (option) {
+  // echarts相关图表文字动态调整大小
+  getEchartsFontSize()
+  const echartLegendFontSize = localStorage.getItem(storageKey.echartLegendFontSize)
+  const echartLabelFontSize = localStorage.getItem(storageKey.echartLabelFontSize)
+  let chartOption = option
+  try {
+    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,
+        legend: {
+          ...chartOption.legend,
+          textStyle: {
+            fontSize: echartLegendFontSize
+          }
+        },
+        axisLabel: {
+          ...chartOption.axisLabel,
+          fontSize: echartLabelFontSize
+        },
+        series: newSeries
+      }
+    } else {
+      chartOption = {
+        ...chartOption,
+        legend: {
+          ...chartOption.legend,
+          textStyle: {
+            fontSize: echartLegendFontSize
+          }
+        },
+        xAxis: {
+          ...chartOption.xAxis,
+          axisLabel: {
+            fontSize: echartLabelFontSize
+          }
+        },
+        yAxis: {
+          ...chartOption.yAxis,
+          axisLabel: {
+            fontSize: echartLabelFontSize
+          }
+        },
+        axisLabel: {
+          ...chartOption.axisLabel,
+          fontSize: echartLabelFontSize
+        },
+        series: newSeries
+      }
+    }
+  } catch (e) {
+    console.error(e)
+  }
+  return chartOption
+}
+
 // 判断数据相等
 export function arrayIsEqual (arr1, arr2) {
   if (arr1 === arr2) { // 如果2个数组对应的指针相同，那么肯定相等，同时也对比一下类型

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 () {
+    chartResize (e) {
-      this.$store.getters.getChartList.forEach(chart => {
+      if (!this.isResizing) {
-        if (chart) {
+        this.isResizing = true
-          chart.resize()
+        // 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
     }