新增最终数据产品月度巡查简报

riku

2025-10-11 925b485e661682a2fcfc8b8a47a8148d16ec818e

 src/utils/echart-util.js

@@ -1,3 +1,5 @@
import * as echarts from 'echarts';

function pieChartOption() {
  return {
    color: [
@@ -97,7 +99,7 @@
    legend: {
      show: true,
      orient: 'horizontal',
      bottom: '0%', // 图例底部水平排列
      bottom: '0%' // 图例底部水平排列
    },
    grid: {
      // left: '3%',
@@ -114,7 +116,7 @@
        alignWithLabel: true
      },
      axisLabel: {
        rotate: 45,
        rotate: 45
      }
    },
    yAxis: {
@@ -165,4 +167,38 @@
  document.body.removeChild(link);
}

export { pieChartOption, barChartOption, downloadChartImage };
function getChartUrl(option) {
  // 1. 创建临时DOM元素
  const div = document.createElement('div');
  // div.style.width = '330px';
  // div.style.height = '160px';
  div.style.width = '800px';
  div.style.height = '400px';
  document.body.appendChild(div);

  // 2. 初始化echarts实例
  const myChart = echarts.init(div);

  // 4. 设置图表配置项
  myChart.setOption(option);

  return new Promise((resolve, reject) => {
    // 延迟执行确保绘制完成
    setTimeout(() => {
      // 5. 将图表转换为base64图片
      const imageBase64 = myChart.getDataURL({
        type: 'png',
        pixelRatio: 2, // 提高图片清晰度
        backgroundColor: '#fff',
        excludeComponents: ['toolbox']
      });

      // 6. 销毁实例并移除临时DOM
      myChart.dispose();
      document.body.removeChild(div);
      resolve(imageBase64);
    }, 1000);
  });
}

export { pieChartOption, barChartOption, downloadChartImage, getChartUrl };