2025.9.20 数据产品（待完成）

riku

2025-09-20 0796eebe3520fafb0ac5d36ee584af81506d7e9c

 src/utils/echart-util.js

@@ -69,6 +69,79 @@
  };
}

function barChartOption() {
  return {
    title: {
      text: `柱状图默认名称`,
      left: 'center' // 标题居中显示
    },
    // 添加工具栏配置，包含下载功能
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {
          show: true,
          title: '下载图表',
          type: 'png',
          pixelRatio: 2 // 提高图片清晰度
        }
      }
    },
    tooltip: {
      trigger: 'axis', // 柱状图使用axis触发tooltip
      axisPointer: {
        type: 'shadow' // 显示阴影指示器
      },
      formatter: '{b}: {c}' // 显示格式：名称: 数量
    },
    legend: {
      show: true,
      orient: 'horizontal',
      bottom: '0%', // 图例底部水平排列
    },
    grid: {
      // left: '3%',
      // right: '4%',
      bottom: '10%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      name: '坐标轴',
      type: 'category',
      data: ['sample1', 'sample2', 'sample3'], // X轴数据
      axisTick: {
        alignWithLabel: true
      },
      axisLabel: {
        rotate: 45,
      }
    },
    yAxis: {
      type: 'value',
      name: '数量', // Y轴名称
      axisLine: {
        show: true
      },
      axisLabel: {
        formatter: '{value}'
      }
    },
    series: [
      {
        name: 'sample',
        type: 'bar', // 图表类型改为柱状图
        data: [100, 200, 300], // 数据值
        label: {
          show: true,
          position: 'top', // 标签显示在柱子顶部
          formatter: '{c}' // 标签格式：数量
        }
      }
    ]
  };
}

// 通过 ECharts API 下载图片的函数
function downloadChartImage(chart, fileName) {
  if (!chart) return; // 确保图表已初始化
@@ -92,4 +165,4 @@
  document.body.removeChild(link);
}

export { pieChartOption, downloadChartImage };
export { pieChartOption, barChartOption, downloadChartImage };