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",