diff --git a/src/components/layout/Home.vue b/src/components/layout/Home.vue index f9f0392a..e19d39ce 100644 --- a/src/components/layout/Home.vue +++ b/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() } } diff --git a/src/utils/constants.js b/src/utils/constants.js index e6e448d5..c2827127 100644 --- a/src/utils/constants.js +++ b/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: [ { diff --git a/src/utils/tools.js b/src/utils/tools.js index 0f850dba..2c8ddb4f 100644 --- a/src/utils/tools.js +++ b/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个数组对应的指针相同,那么肯定相等,同时也对比一下类型 diff --git a/src/views/charts/charts/ChartEchartWithStatistics.vue b/src/views/charts/charts/ChartEchartWithStatistics.vue index 2648085e..94cb8a41 100644 --- a/src/views/charts/charts/ChartEchartWithStatistics.vue +++ b/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', diff --git a/src/views/charts/charts/chart-echart-mixin.js b/src/views/charts/charts/chart-echart-mixin.js index f7e2b5e6..79b0f859 100644 --- a/src/views/charts/charts/chart-echart-mixin.js +++ b/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 { diff --git a/src/views/charts/charts/options/line.js b/src/views/charts/charts/options/line.js index 0e9fbbc2..da68f8c9 100644 --- a/src/views/charts/charts/options/line.js +++ b/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: [ { diff --git a/src/views/charts/charts/options/pie.js b/src/views/charts/charts/options/pie.js index 3194bb0d..2053a916 100644 --- a/src/views/charts/charts/options/pie.js +++ b/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 }