feat: 图标修改

src/modules/target/components/student-target/DetailStudentTarget.vue

@@ -63,6 +63,7 @@
 </template>
 
 <script>
+import { splitContent } from "@/plugins/utils";
 import { studentTargetDetail } from "../../api";
 
 export default {
@@ -114,6 +115,7 @@ export default {
     updateChartOption() {
       const option = {
         color: ["#3a5ae5", "#fe5d4e"],
+        tooltip: { show: true },
         grid: {
           left: 30,
           top: 60,
@@ -127,21 +129,26 @@ export default {
           itemWidth: 16,
           itemHeight: 4,
           itemGap: 22,
-          left: "center",
+          left: 30,
+          textStyle: {
+            fontSize: 14,
+          },
         },
         xAxis: {
           type: "category",
           nameTextStyle: {
             color: "#363D59",
           },
-          data: this.dataList.map(
-            (item, index) => `${index + 1}.${item.requirementName}`
-          ),
+          data: this.dataList.map((item) => item.requirementName),
           axisLabel: {
             color: "#6F7482",
             interval: 0,
-            fontSize: 12,
-            margin: 12,
+            fontSize: 14,
+            formatter: function (value, index) {
+              const vals = splitContent(value, 6);
+              vals[0] = `${index + 1}.${vals[0]} `;
+              return vals.join("\n");
+            },
           },
           axisLine: {
             show: true,

src/plugins/utils.js

@@ -462,3 +462,15 @@ export function removeRichTextValue(data) {
     '"type":"text","value":""'
   );
 }
+
+export function splitContent(content, countPerGroup) {
+  if (!countPerGroup) return content;
+  const gCount = Math.ceil(content.length / countPerGroup);
+  const cpg = Math.ceil(content.length / gCount);
+
+  const groups = [];
+  for (let i = 0; i < gCount; i++) {
+    groups.push(content.substr(i * cpg, (i + 1) * cpg));
+  }
+  return groups;
+}