fix: firfox浏览器修复图标

src/views/components/chartsComponents/OperatingTrendsChart.vue

@@ -40,6 +40,22 @@
     seriesData: SeriesDataItem[];
   }
 
+  function makeCheckSvg(color: string) {
+  return `<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'>
+      <path
+        d="M0,2L0,14C0,15.1046,0.89543,16,2,16L14,16C15.1046,16,16,15.1046,16,14L16,2C16,0.89543,15.1046,0,14,0L2,0C0.89543,0,0,0.89543,0,2ZM13.949,6.32574L7.64171,11.99Q7.35295,12.25,6.94914,12.25Q6.54551,12.25,6.25625,11.9902L2.05119,8.2139Q1.75,7.94411,1.75,7.55595Q1.75,7.16798,2.05072,6.89792Q2.33947,6.63794,2.74329,6.63794Q3.14692,6.63794,3.43617,6.89771L6.94886,10.0523L12.5636,5.00998Q12.8523,4.75,13.2562,4.75Q13.6598,4.75,13.9488,5.00955Q14.25,5.27935,14.25,5.66751Q14.25,6.05547,13.949,6.32574Z"
+        fill-rule="evenodd"
+        fill="${color}"
+      />
+  </svg>`;
+}
+
+// 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(`
-      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" viewBox="0 0 16 16">
-      <g><g><path d="M0,2L0,14C0,15.1046,0.89543,16,2,16L14,16C15.1046,16,16,15.1046,16,14L16,2C16,0.89543,15.1046,0,14,0L2,0C0.89543,0,0,0.89543,0,2ZM13.949,6.32574L7.64171,11.99Q7.35295,12.25,6.94914,12.25Q6.54551,12.25,6.25625,11.9902L2.05119,8.2139Q1.75,7.94411,1.75,7.55595Q1.75,7.16798,2.05072,6.89792Q2.33947,6.63794,2.74329,6.63794Q3.14692,6.63794,3.43617,6.89771L6.94886,10.0523L12.5636,5.00998Q12.8523,4.75,13.2562,4.75Q13.6598,4.75,13.9488,5.00955Q14.25,5.27935,14.25,5.66751Q14.25,6.05547,13.949,6.32574Z" fill-rule="evenodd" fill="${color}" fill-opacity="1"/></g></g></svg>`);
-  };
 
   // 初始化图例图标
   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:
+          icon: svgToPercentEncodedDataUrl(makeCheckSvg(item.color)) ,
-            "image://data:image/svg+xml;charset=utf-8," +
-            encodeURIComponent(`
-              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" viewBox="0 0 16 16">
-              <g><g><path d="M0,2L0,14C0,15.1046,0.89543,16,2,16L14,16C15.1046,16,16,15.1046,16,14L16,2C16,0.89543,15.1046,0,14,0L2,0C0.89543,0,0,0.89543,0,2ZM13.949,6.32574L7.64171,11.99Q7.35295,12.25,6.94914,12.25Q6.54551,12.25,6.25625,11.9902L2.05119,8.2139Q1.75,7.94411,1.75,7.55595Q1.75,7.16798,2.05072,6.89792Q2.33947,6.63794,2.74329,6.63794Q3.14692,6.63794,3.43617,6.89771L6.94886,10.0523L12.5636,5.00998Q12.8523,4.75,13.2562,4.75Q13.6598,4.75,13.9488,5.00955Q14.25,5.27935,14.25,5.66751Q14.25,6.05547,13.949,6.32574Z" fill-rule="evenodd" fill="${item.color}" fill-opacity="1"/></g></g></svg>`),
           textStyle: {
             color: "#C0EEFF",
             verticalAlign: "middle",