diff --git a/src/views/Jyh/security/components/IndustryDistribution.vue b/src/views/Jyh/security/components/IndustryDistribution.vue index 6d30568..9635b9e 100644 --- a/src/views/Jyh/security/components/IndustryDistribution.vue +++ b/src/views/Jyh/security/components/IndustryDistribution.vue @@ -50,16 +50,25 @@ const initChart = () => { myChart = echarts.init(chartDiv.value); + // 构建图例数据,对于较长的名称才在图例中显示数值 + const legendData = internalData.value.map(item => ({ + name: item.name, + icon: 'circle' + })); + const option: echarts.EChartsOption = { tooltip: { trigger: 'item', - formatter: (params: any) => `${params.name}: ${params.percent}% (${params.value}%)` + formatter: (params: any) => `${params.name}: ${params.value} (${params.percent}%)` }, legend: { bottom: '0', - textStyle: { fontSize: 12 }, + textStyle: { fontSize: 10 }, itemWidth: 10, - itemHeight: 10 + itemHeight: 10, + orient: 'horizontal', + padding: [5, 0, 0, 0], + data: legendData }, series: [ { @@ -69,8 +78,18 @@ const initChart = () => { data: internalData.value, label: { show: true, - formatter: '{b}: {d}%', - fontSize: 10 + formatter: '{b}\n{d}%', + fontSize: 10, + rich: { + b: { + fontSize: 10, + lineHeight: 12 + }, + d: { + fontSize: 10, + lineHeight: 12 + } + } }, itemStyle: { color: (params: any) => {