c96b4b18f3
* 新增BI圖標功能-柱狀圖 * 新增BI图表功能-柱狀圖，优化代码，删除无用代码 * 优化生成逻辑，支持插件手动选择图表类型：目前支持柱状图，折线图，饼图 * 修改包名称，完成基础图表
94 lines
2.3 KiB
TypeScript
94 lines
2.3 KiB
TypeScript
import * as echarts from 'echarts';
|
||
|
||
type Props = {
|
||
title: string;
|
||
xAxis: string;
|
||
yAxis: string;
|
||
chartType: string;
|
||
};
|
||
|
||
type Response = Promise<{
|
||
result: string;
|
||
}>;
|
||
|
||
type SeriesData = {
|
||
name: string;
|
||
type: 'bar' | 'line' | 'pie'; // 只允许这三种类型
|
||
data: number[] | { value: number; name: string }[]; // 根据图表类型的数据结构
|
||
};
|
||
type Option = {
|
||
backgroundColor: string;
|
||
title: { text: string };
|
||
tooltip: {};
|
||
xAxis: { data: string[] };
|
||
yAxis: {};
|
||
series: SeriesData[]; // 使用定义的类型
|
||
};
|
||
|
||
const generateChart = (title: string, xAxis: string, yAxis: string, chartType: string) => {
|
||
// @ts-ignore 无法使用dom，如使用jsdom会出现生成图片无法正常展示，有高手可以帮忙解决
|
||
const chart = echarts.init(undefined, undefined, {
|
||
renderer: 'svg', // 必须使用 SVG 模式
|
||
ssr: true, // 开启 SSR
|
||
width: 400, // 需要指明高和宽
|
||
height: 300
|
||
});
|
||
|
||
let parsedXAxis: string[] = [];
|
||
let parsedYAxis: number[] = [];
|
||
try {
|
||
parsedXAxis = JSON.parse(xAxis);
|
||
parsedYAxis = JSON.parse(yAxis);
|
||
} catch (error: unknown) {
|
||
console.error('解析数据时出错:', error);
|
||
}
|
||
|
||
const option: Option = {
|
||
backgroundColor: '#f5f5f5',
|
||
title: { text: title },
|
||
tooltip: {},
|
||
xAxis: { data: parsedXAxis },
|
||
yAxis: {},
|
||
series: [] // 初始化为空数组
|
||
};
|
||
|
||
// 根据 chartType 生成不同的图表
|
||
switch (chartType) {
|
||
case '柱状图':
|
||
option.series.push({ name: 'Sample', type: 'bar', data: parsedYAxis });
|
||
break;
|
||
case '折线图':
|
||
option.series.push({ name: 'Sample', type: 'line', data: parsedYAxis });
|
||
break;
|
||
case '饼图':
|
||
option.series.push({
|
||
name: 'Sample',
|
||
type: 'pie',
|
||
data: parsedYAxis.map((value, index) => ({
|
||
value,
|
||
name: parsedXAxis[index] // 使用 xAxis 作为饼图的名称
|
||
}))
|
||
});
|
||
break;
|
||
default:
|
||
console.error('不支持的图表类型:', chartType);
|
||
return '';
|
||
}
|
||
|
||
chart.setOption(option);
|
||
// 生成 Base64 图像
|
||
const base64Image = chart.getDataURL({ type: 'png' });
|
||
// 释放图表实例
|
||
chart.dispose();
|
||
|
||
return base64Image;
|
||
};
|
||
|
||
const main = async ({ title, xAxis, yAxis, chartType }: Props): Response => {
|
||
return {
|
||
result: generateChart(title, xAxis, yAxis, chartType)
|
||
};
|
||
};
|
||
|
||
export default main;
|