shalu-dashboard-ui/components/charts/utils/transChartOption.ts

// import { EChartsOption } from "echarts";
// import { isArray } from "element-plus/es/utils";
// import { set } from "lodash-es";

// /* 配置表单 转 echartsOption */
// export const config2Option = (config: Record<string, any>) => {
//   const option: EChartsOption = {};

//   option.grid = {};
//   // 标题
//   option.title = {};
//   option.title.show = isArray(config.showTitle)
//     ? !!config.showTitle?.[0]
//     : !!config.showTitle;
//   option.title.text = `title|${config.titleText}`;
//   option.title.left = config.titlePosition;
//   option.title.textStyle = {
//     rich: {
//       title: {
//         color: config.titleStyle.color,
//         fontSize: config.titleStyle.size,
//         fontWeight: config.titleStyle.bold ? "bold" : "normal",
//         fontStyle: config.titleStyle.italic ? "italic" : "normal",
//       },
//     },
//   };
//   option.title.backgroundColor = config.titleBackground.color;
//   option.title.textStyle.opacity = config.titleOpacity / 100;
//   option.title.borderRadius = config.titleBorderRadius;

//   // 图例
//   option.legend = {};
//   option.legend.show = isArray(config.showLegend)
//     ? !!config.showLegend?.[0]
//     : !!config.showLegend;
//   switch (config.legendPosition) {
//     case "top":
//       option.legend.top = 0;
//       option.legend.left = "center";
//       break;
//     case "bottom":
//       option.legend.bottom = 0;
//       option.legend.left = "center";
//       break;
//     case "left":
//       option.legend.orient = "vertical";
//       option.legend.left = 0;
//       option.legend.top = "middle";
//       break;
//     case "right":
//       option.legend.orient = "vertical";
//       option.legend.right = 0;
//       option.legend.top = "middle";
//       break;
//   }
//   option.legend.formatter = `{legendTitle|{name}}`;
//   option.legend.textStyle = {
//     rich: {
//       legendTitle: {
//         color: config.legendStyle.color,
//         fontSize: config.legendStyle.size,
//         fontWeight: config.legendStyle.bold ? "bold" : "normal",
//         fontStyle: config.legendStyle.italic ? "italic" : "normal",
//       },
//     },
//   };
//   option.legend.borderWidth = config.legendBorderWidth;
//   option.legend.borderColor = config.legendBorderColor;
//   option.legend.borderRadius = config.legendBorderRadius;
//   option.legend.backgroundColor = config.legendBackground.color;
//   if (config.legendShadow) {
//     option.legend.shadowBlur = 10;
//     option.legend.shadowColor = "rgba(0, 0, 0, 0.5)";
//     option.legend.shadowOffsetX = 0;
//     option.legend.shadowOffsetY = 0;
//   }

//   // 标签
//   // TODO 标签加入到series中
//   const optionLabel: Record<string, any> = {};
//   optionLabel.show = isArray(config.showLabel)
//     ? !!config.showLabel?.[0]
//     : !!config.showLabel;
//   optionLabel.formatter = (res: any) => {
//     let str: string = "";
//     (config.labelValueType || []).forEach((key: string) => {
//       str += res[key] + " ";
//     });

//     return `{labelTitle|{${str}}}`;
//   };
//   optionLabel.color = config.labelColor;
//   optionLabel.rich = {
//     labelTitle: {
//       color: config.labelColor,
//       fontSize: config.labelStyle.size,
//       fontWeight: config.labelStyle.bold ? "bold" : "normal",
//       fontStyle: config.labelStyle.italic ? "italic" : "normal",
//     },
//   };
//   optionLabel.position = config.labelPosition;
//   optionLabel.rotate = config.labelDirection === "vertical" ? 90 : 0;
//   optionLabel.borderWidth = config.labelBorderWidth;
//   optionLabel.borderColor = config.labelBorderColor;
//   optionLabel.borderRadius = config.labelBorderRadius;

//   // 系列--暂时只配置颜色方案，其他配置组件内部处理
//   option.series = {};
//   option.series.color = config.colorScheme;

//   // X 轴
//   option.xAxis = {};
//   option.xAxis.type = config.xAxisType;
//   if (config.xAliasShowTitle && config.xAliasTitle) {
//     option.xAxis.name = config.xAliasTitle;
//     option.grid.bottom = 40; // 给标题留出空间
//   }
//   let positionMap = {
//     left: "start",
//     center: "middle",
//     right: "end",
//   };
//   type Position = "start" | "middle" | "end";
//   option.xAxis.nameLocation = (
//     config.xAliasPosition
//       ? positionMap[config.xAliasPosition as "left" | "center" | "right"]
//       : "middle"
//   ) as Position;
//   option.xAxis.nameTextStyle = {
//     color: config.xAliasStyle.color,
//     fontSize: config.xAliasStyle.size,
//     fontWeight: config.xAliasStyle.bold ? "bold" : "normal",
//     fontStyle: config.xAliasStyle.italic ? "italic" : "normal",
//   }
//   set(option, 'xAxias.axisLine.lineStyle.width', config.xAxisLineWidth);
//   set(option, 'xAxias.axisLine.lineStyle.color', config.xAxisLineColor);
//   set(option, 'xAxias.axisLine.axisTick.color', config.xAxisTickColor);
// };

// /* echartsOption 转 配置表单 */
// export const option2Config = (option: EChartsOption) => {};