Ver Fonte

613可视化图标题

tangjunhao há 3 meses atrás
pai
commit
51671153e0
2 ficheiros alterados com 34 adições e 4 exclusões
  1. 17 2
      src/views/echart/echartLine.vue
  2. 17 2
      src/views/echart/scatter.vue

+ 17 - 2
src/views/echart/echartLine.vue

@@ -281,7 +281,8 @@ const selectshuju = (listcbval,listcbval2,dataheader, data) => {
 
   const xAxisLabel = dataheader.find(item => item.prop === xColumns[0])?.label || xColumns[0];
   const yAxisLabel = getFormattedYLabels(yColumns, dataheader);
-  const chartTitle = `${xAxisLabel} - ${yAxisLabel}`;
+  const yAxisLabel1 = getFormattedYLabels1(yColumns, dataheader);
+  const chartTitle = `${xAxisLabel} - ${yAxisLabel1}`;
 
   myChart.setOption({
     title: {
@@ -321,12 +322,26 @@ const getFormattedYLabels = (columns, header, maxLength = 20) => {
 
   return fullLabel;
 };
+// 不换行
+const getFormattedYLabels1 = (columns, header, maxLength = 20) => {
+  const labels = columns.map(col => {
+    return header.find(item => item.prop === col)?.label || col;
+  });
+  const fullLabel = labels.join(',');
+
+  // 若总字符数超出 maxLength,则截断
+  if (fullLabel.length > maxLength) {
+    return fullLabel.slice(0, maxLength) + '...';
+  }
+
+  return fullLabel;
+};
 
 const linechart = () => {
   option.value = {
     title: {
       text: " ",
-      left: "7%",
+      left: "center",
       top: "5%",
       textStyle: {
         color: "#333333",

+ 17 - 2
src/views/echart/scatter.vue

@@ -264,7 +264,8 @@ const selectshuju = (listcbval,listcbval2,dataheader, data) => {
 
   const xAxisLabel = dataheader.find(item => item.prop === xColumns[0])?.label || xColumns[0];
   const yAxisLabel = getFormattedYLabels(yColumns, dataheader);
-  const chartTitle = `${xAxisLabel} - ${yAxisLabel}`;
+  const yAxisLabel1 = getFormattedYLabels1(yColumns, dataheader);
+  const chartTitle = `${xAxisLabel} - ${yAxisLabel1}`;
 
   myChart.setOption({
     title: {
@@ -303,12 +304,26 @@ const getFormattedYLabels = (columns, header, maxLength = 20) => {
 
   return fullLabel;
 };
+// 不换行
+const getFormattedYLabels1 = (columns, header, maxLength = 20) => {
+  const labels = columns.map(col => {
+    return header.find(item => item.prop === col)?.label || col;
+  });
+  const fullLabel = labels.join(',');
+
+  // 若总字符数超出 maxLength,则截断
+  if (fullLabel.length > maxLength) {
+    return fullLabel.slice(0, maxLength) + '...';
+  }
+
+  return fullLabel;
+};
 
 const setOptionfunc = async () => {
   option.value = {
     title: {
       text: "",
-      left: "7%",
+      left: "center",
       top: "5%",
       textStyle: {
         color: "#333333",