diff --git a/src/views/charts/charts/tools.js b/src/views/charts/charts/tools.js index 49c3f800..210cdd21 100644 --- a/src/views/charts/charts/tools.js +++ b/src/views/charts/charts/tools.js @@ -338,7 +338,10 @@ export function axisFormatter (params) { return str } export function tooLongFormatter (name) { - return format.truncateText(name, 110, '12px') + return format.truncateText(name, 150, '12px') +} +export function tooLongFormatterFor2Columns (name) { + return format.truncateText(name, 83, '12px') } export function timeHorizontalFormatter (params) { let str = '
' diff --git a/src/views/detections/Index.vue b/src/views/detections/Index.vue index 15999dba..7eb19bb1 100644 --- a/src/views/detections/Index.vue +++ b/src/views/detections/Index.vue @@ -138,6 +138,7 @@ import { useRoute } from 'vue-router' import Loading from '@/components/common/Loading' import ChartTabs from '@/components/common/ChartTabs' import { useStore } from 'vuex' +import { tooLongFormatterFor2Columns } from '@/views/charts/charts/tools' export default { name: 'Index', @@ -478,6 +479,9 @@ export default { securityTypeOption.series[0].data = data.map(d => { return { value: d.count, name: d.eventType, itemStyle: { color: getAttackColor(d.eventType) } } }) + if(data.length > 6){ + securityTypeOption.legend.formatter = tooLongFormatterFor2Columns + } detectionChart.setOption(securityTypeOption) const vm = this diff --git a/src/views/detections/options/detectionOptions.js b/src/views/detections/options/detectionOptions.js index 8c909b0e..86368359 100644 --- a/src/views/detections/options/detectionOptions.js +++ b/src/views/detections/options/detectionOptions.js @@ -187,7 +187,7 @@ export const pieForSeverity = { legend: { orient: 'vertical', type: 'plain', - left: '60%', + left: '52%', top: 'middle', icon: 'circle', itemWidth: 10, // 设置宽度 @@ -203,7 +203,7 @@ export const pieForSeverity = { type: 'pie', selectedMode: 'single', radius: ['43%', '65%'], - center: ['30%', '50%'], + center: ['26%', '50%'], data: [], label: { show: false