gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
hyx
2022-05-06 11:29:13 +08:00
parent 9af61333bc
commit 79c003a33a
7 changed files with 251 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/layout/Home.vue
View File

@@ -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>

13
src/utils/constants.js
View File

@@ -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: [
{

101
src/utils/tools.js
View File

@@ -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个数组对应的指针相同，那么肯定相等，同时也对比一下类型

2
src/views/charts/charts/ChartEchartWithStatistics.vue
View File

@@ -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',

113
src/views/charts/charts/chart-echart-mixin.js
View File

@@ -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)
}
})
},
setTimeoutResize () {
setTimeout(() => {
this.chartResize()
this.isResizing = false
}, 200)
}
},
setTimeoutResize (e) {
setTimeout(() => {
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 {

30
src/views/charts/charts/options/line.js
View File

@@ -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: [
{

10
src/views/charts/charts/options/pie.js
View File

@@ -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
}