态势感知平台-全球开源风险态势感知监控中心-行业分布样式修改

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) => {