tangjunhao 3 mesi fa
parent
commit
553c9b86c6
2 ha cambiato i file con 48 aggiunte e 2 eliminazioni
  1. 24 1
      src/views/echart/echartLine.vue
  2. 24 1
      src/views/echart/scatter.vue

+ 24 - 1
src/views/echart/echartLine.vue

@@ -279,17 +279,26 @@ const selectshuju = (listcbval,listcbval2,dataheader, data) => {
   // 处理 ECharts 图表配置
   const myChart = echarts.init(chartContainer.value);
 
+  const xAxisLabel = dataheader.find(item => item.prop === xColumns[0])?.label || xColumns[0];
+  const yAxisLabel = getFormattedYLabels(yColumns, dataheader);
+  const chartTitle = `${xAxisLabel} - ${yAxisLabel}`;
+
   myChart.setOption({
+    title: {
+      text: chartTitle,
+    },
     legend: {
       data: yColumns,  // 图例数据使用 Y 轴的列名
     },
     xAxis: {
       type: "value",  
       data: xdata.value, // x 轴数据为 X 轴数据
+      name: xAxisLabel,
       scale: true,
     },
     yAxis: {
       type: "value",  // y 轴是数值型
+      name: yAxisLabel,
       scale: true,
     },
     series: series.value,  // 使用生成的 series 数据
@@ -299,6 +308,20 @@ const selectshuju = (listcbval,listcbval2,dataheader, data) => {
   console.log("初始化后的 series:", series.value);
 };
 
+const getFormattedYLabels = (columns, header, maxLength = 20) => {
+  const labels = columns.map(col => {
+    return header.find(item => item.prop === col)?.label || col;
+  });
+  const fullLabel = labels.join(',\n');
+
+  // 若总字符数超出 maxLength,则截断
+  if (fullLabel.length > maxLength) {
+    return fullLabel.slice(0, maxLength) + '...';
+  }
+
+  return fullLabel;
+};
+
 const linechart = () => {
   option.value = {
     title: {
@@ -370,7 +393,7 @@ const linechart = () => {
     yAxis: {
       type: "value",
       name:"",
-      nameGap:30,
+      nameGap:50,
       nameTextStyle:{
         fontsize:16,
         color:'#333333',

+ 24 - 1
src/views/echart/scatter.vue

@@ -262,17 +262,26 @@ const selectshuju = (listcbval,listcbval2,dataheader, data) => {
   // 处理 ECharts 图表配置
   const myChart = echarts.init(chartContainer.value);
 
+  const xAxisLabel = dataheader.find(item => item.prop === xColumns[0])?.label || xColumns[0];
+  const yAxisLabel = getFormattedYLabels(yColumns, dataheader);
+  const chartTitle = `${xAxisLabel} - ${yAxisLabel}`;
+
   myChart.setOption({
+    title: {
+      text: chartTitle,
+    },
     legend: {
       data: yColumns,  // 图例数据使用 Y 轴的列名
     },
     xAxis: {
       type: "value",  // 设置为 "category" 表示 x 轴为分类数据
       data: xdata.value, // x 轴数据为 X 轴数据
+      name: xAxisLabel,
       scale: true,  // 自动缩放
     },
     yAxis: {
       type: "value",  // y 轴是数值型
+      name: yAxisLabel,
       // scale: true,
     },
     series: series.value,  // 使用生成的 series 数据
@@ -281,6 +290,20 @@ const selectshuju = (listcbval,listcbval2,dataheader, data) => {
   console.log("初始化后的 series:", series.value);
 };
 
+const getFormattedYLabels = (columns, header, maxLength = 20) => {
+  const labels = columns.map(col => {
+    return header.find(item => item.prop === col)?.label || col;
+  });
+  const fullLabel = labels.join(',\n');
+
+  // 若总字符数超出 maxLength,则截断
+  if (fullLabel.length > maxLength) {
+    return fullLabel.slice(0, maxLength) + '...';
+  }
+
+  return fullLabel;
+};
+
 const setOptionfunc = async () => {
   option.value = {
     title: {
@@ -351,7 +374,7 @@ const setOptionfunc = async () => {
     yAxis: {
       type: "value",
       name:' ',
-      nameGap:40,
+      nameGap:50,
       nameTextStyle:{
         fontSize: 16,
         color:'#333333',