diff --git a/src/views/components/chartsComponents/OperatingTrendsChart.vue b/src/views/components/chartsComponents/OperatingTrendsChart.vue
index 9fa0523..f1935ed 100644
--- a/src/views/components/chartsComponents/OperatingTrendsChart.vue
+++ b/src/views/components/chartsComponents/OperatingTrendsChart.vue
@@ -40,6 +40,22 @@
seriesData: SeriesDataItem[];
}
+ function makeCheckSvg(color: string) {
+ return ``;
+}
+
+// 2. 做 URL 编码(百分号编码),再拼成 data URI
+function svgToPercentEncodedDataUrl(svg: string) {
+ // encodeURIComponent 会把 < > # " 等都转成 %3C %3E %23 %22……
+ const encoded = encodeURIComponent(svg);
+ return `image://data:image/svg+xml;charset=utf-8,${encoded}`;
+}
// 处理图表数据
const processChartData = (dataArray: ChartTypeData[], mode: string): ChartDataFormat => {
if (!dataArray || dataArray.length === 0) return {
@@ -139,17 +155,11 @@
const legendIcons = ref<{ [key: string]: string }>({});
- // 生成SVG图标
- const generateSvgIcon = (color: string) => {
- return encodeURIComponent(`
- `);
- };
// 初始化图例图标
const initLegendIcons = () => {
chartData.value.seriesData.forEach((item) => {
- legendIcons.value[item.name] = generateSvgIcon(item.color);
+ legendIcons.value[item.name] = svgToPercentEncodedDataUrl(makeCheckSvg(item.color));
});
};
@@ -157,7 +167,7 @@
const getLegendIcon = (name: string, isSelected = true) => {
const seriesItem = chartData.value.seriesData.find((item) => item.name === name);
const color = isSelected ? seriesItem?.color || "#555" : "#555";
- return `image://data:image/svg+xml;charset=utf-8,${generateSvgIcon(color)}`;
+ return svgToPercentEncodedDataUrl(makeCheckSvg(color));
};
// 更新图例图标颜色
@@ -194,7 +204,7 @@
symbol: "circle",
symbolSize: 8,
itemStyle: {
- color: "#111", // 中心填充颜色
+ // color: "#111", // 中心填充颜色
borderColor: item.color, // 边框颜色
borderWidth: 2,
},
@@ -254,11 +264,7 @@
},
data: chartData.value.seriesData.map((item) => ({
name: item.name,
- icon:
- "image://data:image/svg+xml;charset=utf-8," +
- encodeURIComponent(`
- `),
+ icon: svgToPercentEncodedDataUrl(makeCheckSvg(item.color)) ,
textStyle: {
color: "#C0EEFF",
verticalAlign: "middle",