소스 검색

fix: 环形图文本超出换行

zhangying 8 달 전
부모
커밋
893590c8c8

+ 16 - 2
vue/src/views/dataScreen/echarts.ts

@@ -293,7 +293,7 @@ export function initStripBarImageTable(yAxisList: any, seriesList: any, domId: a
  * @param domId 目标DOM元素ID
  * @param seriesName 注解信息的名称
  */
-export function initRingPieImageTable(seriesDataList: any, graphicChildren: any, domId: any, seriesName: any) {
+export function initRingPieImageTable(seriesDataList: any, graphicChildren: any, domId: any, seriesName: any, maxTextNum: any) {
   const chartDom = document.getElementById(domId);
   let myChart = echarts.init(chartDom);
   if (myChart != null) {
@@ -321,7 +321,21 @@ export function initRingPieImageTable(seriesDataList: any, graphicChildren: any,
           color: 'inherit',
           position: 'outer',
           borderWidth: 0,
-          formatter: '{b}:{d}%'
+          fontSize: 12, // 缩小字体
+          formatter: function (params) {
+            const name = params.name;
+            const percent = params.percent;
+            let formattedName = '';
+            for (let i = 0; i < name.length; i += maxTextNum) {
+              // 如果是最后一行,则不添加换行符
+              if (i + maxTextNum >= name.length) {
+                formattedName += name.slice(i, i + maxTextNum);
+              } else {
+                formattedName += name.slice(i, i + maxTextNum) + '\n';
+              }
+            }
+            return `${formattedName}:${percent}%`;
+          }
         },
         data: seriesDataList
       }

+ 2 - 2
vue/src/views/dataScreen/html/company.vue

@@ -201,8 +201,8 @@ function setPieTable(result: any) {
     }
   ]);
 
-  initRingPieImageTable(companyArr, createTextConfig('企业数', companyTotal), "companyPieBox", "企业数");
-  initRingPieImageTable(postArr, createTextConfig('岗位数', postTotal), "postPieBox", "岗位数");
+  initRingPieImageTable(companyArr, createTextConfig('企业数', companyTotal), "companyPieBox", "企业数", 10);
+  initRingPieImageTable(postArr, createTextConfig('岗位数', postTotal), "postPieBox", "岗位数", 10);
   initDataSetBarImageTable(barTableArr, [
     {type: 'bar', barMaxWidth: '10px', color: "#0062cc"},
     {type: 'bar', barMaxWidth: '10px', color: '#73ecf3'}

+ 1 - 1
vue/src/views/dataScreen/html/index.vue

@@ -388,7 +388,7 @@ function loadEmployedUser() {
     ]
 
     // 生成图表
-    initRingPieImageTable(arr, graphicChildren, "employedCountBox", "已就业人数");
+    initRingPieImageTable(arr, graphicChildren, "employedCountBox", "已就业人数", 10);
   })
 }
 

+ 1 - 1
vue/src/views/dataScreen/html/jobUser.vue

@@ -267,7 +267,7 @@ function loadDifficultyPersonTypeCount() {
         style: {fill: '#77F8FF', text: jobUserTotal, font: 'bold 16px Arial', textAlign: 'center'}
       }
     ];
-    initRingPieImageTable(jobUserArr, graphicChildren, "difficultyPersonTypeCountBox", "就业困难人数");
+    initRingPieImageTable(jobUserArr, graphicChildren, "difficultyPersonTypeCountBox", "就业困难人数", 6);
   })
 }