xjs
/
payment-statistics
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: firfox浏览器修复图标

master
xjs 2025-06-09 13:33:00 +08:00
parent 6abea9dffe
commit 8d43083d71
1 changed files with 20 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/views/components/chartsComponents/OperatingTrendsChart.vue
View File

@ -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:
"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>`),
icon: svgToPercentEncodedDataUrl(makeCheckSvg(item.color)) ,
textStyle: {
color: "#C0EEFF",
verticalAlign: "middle",