@8btc/mditor 0.0.1

package/src/ts/markdown/chartRender.ts

@@ -0,0 +1,1153 @@
+import { Constants } from "../constants";
+import { addScript } from "../util/addScript";
+import { addStyle } from "../util/addStyle";
+import { chartRenderAdapter } from "./adapterRender";
+import { hasClosestByClassName } from "../util/hasClosest";
+import { looseJsonParse } from "../util/function";
+
+declare const echarts: {
+    init(element: HTMLElement, theme?: string): IEChart;
+};
+
+export const chartRender = (
+    element: HTMLElement | Document = document,
+    cdn = Constants.CDN,
+    theme: string
+) => {
+    const echartsElements = chartRenderAdapter.getElements(element);
+    if (echartsElements.length > 0) {
+        addScript(
+            `${cdn}/dist/js/echarts/echarts.min.js?v=5.5.1`,
+            "vditorEchartsScript"
+        ).then(() => {
+            echartsElements.forEach(async (e: HTMLDivElement) => {
+                if (
+                    e.parentElement.classList.contains("vditor-wysiwyg__pre") ||
+                    e.parentElement.classList.contains("vditor-ir__marker--pre")
+                ) {
+                    return;
+                }
+
+                const text = chartRenderAdapter.getCode(e).trim();
+                if (!text) {
+                    return;
+                }
+                try {
+                    if (e.getAttribute("data-processed") === "true") {
+                        return;
+                    }
+                    const option = await looseJsonParse(text);
+                    const ensureDefaultSeriesColors = (opt: any) => {
+                        const palette = [
+                            "#5470C6",
+                            "#91CC75",
+                            "#FAC858",
+                            "#EE6666",
+                            "#73C0DE",
+                            "#3CA9CF",
+                            "#FC8452",
+                            "#9A60B4",
+                            "#ea7ccc",
+                        ];
+                        if (
+                            !Array.isArray(opt?.color) ||
+                            opt.color.length === 0
+                        ) {
+                            opt.color = palette.slice();
+                        }
+                        const series = Array.isArray(opt?.series)
+                            ? opt.series
+                            : [];
+                        series.forEach((s: any, idx: number) => {
+                            if (!s || typeof s !== "object") return;
+                            const type = s.type;
+                            if (
+                                type === "line" ||
+                                type === "bar" ||
+                                type === "scatter" ||
+                                type === "effectScatter" ||
+                                type === "radar"
+                            ) {
+                                const color = palette[idx % palette.length];
+                                s.itemStyle = s.itemStyle || {};
+                                if (!s.itemStyle.color) {
+                                    s.itemStyle.color = color;
+                                }
+                                if (type === "radar") {
+                                    s.lineStyle = s.lineStyle || {};
+                                    if (!s.lineStyle.color) {
+                                        s.lineStyle.color = s.itemStyle.color;
+                                    }
+                                }
+                            }
+                        });
+                    };
+                    ensureDefaultSeriesColors(option);
+                    const chart = echarts.init(
+                        e,
+                        theme === "dark" ? "dark" : undefined
+                    );
+                    chart.setOption(option);
+                    attachEchartsContextMenu(e, option, chart, cdn);
+                    e.setAttribute("data-processed", "true");
+                } catch (error) {
+                    e.className = "vditor-reset--error";
+                    e.innerHTML = `echarts render error: <br>${error}`;
+                }
+            });
+        });
+    }
+};
+
+/**
+ * 为 ECharts 容器添加右键菜单与颜色选择面板，仅针对 language-echarts 类型。
+ * 点击菜单后弹出颜色面板，
+ * 选择颜色立即更新对应系列的 itemStyle.color 并刷新显示。
+ * @param el 图表容器元素
+ * @param option ECharts 的配置项，需包含 series 数组
+ * @param chart ECharts 实例，用于实时更新配置
+ */
+const attachEchartsContextMenu = (
+    el: HTMLElement,
+    option: any,
+    chart: IEChart,
+    cdn: string
+) => {
+    // 防重复绑定
+    if (el.getAttribute("data-context-menu") === "true") {
+        return;
+    }
+    el.setAttribute("data-context-menu", "true");
+
+    /**
+     * 在预览模式或分屏预览（SV）模式禁用图表右键菜单
+     * 通过 DOM 位置判断：位于 .vditor-preview 或 .vditor-sv 下的渲染内容视为预览环境
+     */
+    const inPreview = !!(
+        el.closest(".vditor-preview") || el.closest(".vditor-sv")
+    );
+    if (inPreview) {
+        return;
+    }
+
+    // 解析 series 数据映射
+    const seriesList: Array<any> = Array.isArray(option?.series)
+        ? option.series
+        : [];
+    const seriesMap: Record<string, any> = {};
+    seriesList.forEach((s) => {
+        if (s && typeof s.name === "string") {
+            seriesMap[s.name] = s;
+        }
+    });
+
+    /**
+     * 检测图表类型：
+     * - 当存在 pie 系列时优先走饼图专项处理；
+     * - 若存在 radar 系列则走雷达专项处理；
+     * - 若存在 funnel 系列则走漏斗专项处理；
+     * - 若存在 scatter 系列则走散点专项处理；
+     * - 否则统一走 line/bar 默认处理。
+     */
+    const chartType: "pie" | "radar" | "funnel" | "scatter" | "default" =
+        (() => {
+            const hasPie = seriesList.some((s) => s && s.type === "pie");
+            if (hasPie) return "pie";
+            const hasRadar = seriesList.some((s) => s && s.type === "radar");
+            if (hasRadar) return "radar";
+            const hasFunnel = seriesList.some((s) => s && s.type === "funnel");
+            if (hasFunnel) return "funnel";
+            const hasScatter = seriesList.some(
+                (s) => s && (s.type === "scatter" || s.type === "effectScatter")
+            );
+            return hasScatter ? "scatter" : "default";
+        })();
+
+    // 饼图支持：优先使用 legend.data 或 series.data[].name 生成菜单项
+    const pieSeries = seriesList.find(
+        (s) => s && s.type === "pie" && Array.isArray(s.data)
+    );
+    const labelIndexMap: Record<string, number> = {};
+    let pieMenuLabels: string[] = [];
+    if (pieSeries) {
+        const legendData = Array.isArray(option?.legend?.data)
+            ? option.legend.data.filter((d: any) => typeof d === "string")
+            : [];
+        const dataNames = pieSeries.data
+            .map((d: any) => (d && typeof d.name === "string" ? d.name : null))
+            .filter((n: any): n is string => !!n);
+        // 构建 name -> index 映射
+        dataNames.forEach((name: string, idx: number) => {
+            labelIndexMap[name] = idx;
+        });
+        // 菜单项优先 legend.data，否则用数据项名称
+        pieMenuLabels = legendData.length > 0 ? legendData : dataNames;
+    }
+
+    // 雷达图支持：优先使用 legend.data 或 radarSeries.data[].name 生成菜单项
+    const radarSeries = seriesList.find(
+        (s) => s && s.type === "radar" && Array.isArray(s.data)
+    );
+    let radarMenuLabels: string[] = [];
+    if (radarSeries) {
+        const legendData = Array.isArray(option?.legend?.data)
+            ? option.legend.data.filter((d: any) => typeof d === "string")
+            : [];
+        const dataNames = radarSeries.data
+            .map((d: any) => (d && typeof d.name === "string" ? d.name : null))
+            .filter((n: any): n is string => !!n);
+        // 构建 name -> index 映射（与饼图共享）
+        dataNames.forEach((name: string, idx: number) => {
+            labelIndexMap[name] = idx;
+        });
+        radarMenuLabels = legendData.length > 0 ? legendData : dataNames;
+    }
+
+    // 漏斗图支持：优先使用 legend.data 或各漏斗系列 data[].name 的并集生成菜单项
+    const funnelSeriesList = seriesList.filter(
+        (s) => s && s.type === "funnel" && Array.isArray(s.data)
+    );
+    let funnelMenuLabels: string[] = [];
+    if (funnelSeriesList.length > 0) {
+        const legendData = Array.isArray(option?.legend?.data)
+            ? option.legend.data.filter((d: any) => typeof d === "string")
+            : [];
+        const nameSet = new Set<string>();
+        funnelSeriesList.forEach((fs) => {
+            fs.data.forEach((d: any, idx: number) => {
+                if (d && typeof d.name === "string") {
+                    nameSet.add(d.name);
+                }
+            });
+        });
+        const dataNames = Array.from(nameSet);
+        // 构建 name -> index 映射（以第一个漏斗系列为准，其他系列按名称查找）
+        if (funnelSeriesList[0]) {
+            funnelSeriesList[0].data.forEach((d: any, idx: number) => {
+                if (d && typeof d.name === "string") {
+                    labelIndexMap[d.name] = idx;
+                }
+            });
+        }
+        funnelMenuLabels = legendData.length > 0 ? legendData : dataNames;
+    }
+
+    /**
+     * 散点图支持：当系列为 scatter 时，生成菜单标签与 label -> seriesIndex 映射。
+     * 优先 legend.data，其次使用系列 name；若都缺失，则按出现顺序生成 "散点系列N"。
+     */
+    const scatterMenuLabels: string[] = [];
+    if (chartType === "scatter") {
+        const legendData = Array.isArray(option?.legend?.data)
+            ? option.legend.data.filter((d: any) => typeof d === "string")
+            : [];
+        // 收集所有散点系列的索引与名称
+        const scatterIndices: number[] = [];
+        const scatterNames: Array<string | null> = [];
+        seriesList.forEach((s, idx) => {
+            if (s && (s.type === "scatter" || s.type === "effectScatter")) {
+                scatterIndices.push(idx);
+                scatterNames.push(
+                    s && typeof s.name === "string" ? s.name : null
+                );
+            }
+        });
+        if (legendData.length > 0) {
+            let used = 0;
+            legendData.forEach((label: string) => {
+                const nameIdx = scatterNames.findIndex((n) => n === label);
+                if (nameIdx >= 0) {
+                    labelIndexMap[label] = scatterIndices[nameIdx];
+                } else if (used < scatterIndices.length) {
+                    labelIndexMap[label] = scatterIndices[used++];
+                }
+            });
+            scatterMenuLabels.push(...legendData);
+        } else if (scatterNames.filter(Boolean).length > 0) {
+            scatterNames.forEach((n, i) => {
+                if (n) {
+                    scatterMenuLabels.push(n);
+                    labelIndexMap[n] = scatterIndices[i];
+                }
+            });
+        } else {
+            scatterIndices.forEach((si, i) => {
+                const label = `散点系列${i + 1}`;
+                scatterMenuLabels.push(label);
+                labelIndexMap[label] = si;
+            });
+        }
+    }
+
+    // 创建菜单 DOM（按需创建）
+    let menuEl: HTMLDivElement | null = null;
+    let pickerEl: HTMLDivElement | null = null;
+    let pickerInstance: any = null;
+    let currentSeriesName: string | null = null;
+    // 记录打开 color-picker 时的原始颜色，以及滑动选择中的待确认颜色
+    let openingOriginalColor: string | null = null;
+    // 点击外部隐藏的全局处理器（在菜单或面板显示时注册，隐藏后移除）
+    let outsideHandler: ((ev: MouseEvent | TouchEvent) => void) | null = null;
+
+    /**
+     * 注册点击外部隐藏菜单与颜色面板。
+     * 当在面板外点击时，若正在选择颜色，则还原为打开面板时的原始颜色（等同 clear）。
+     */
+    const ensureOutsideHandler = () => {
+        if (outsideHandler) return;
+        outsideHandler = (ev: MouseEvent | TouchEvent) => {
+            const target = ev.target as Node | null;
+            if (!target) return;
+            // 如果点击在菜单或面板内部，则不隐藏
+            if (
+                menuEl &&
+                menuEl.style.display !== "none" &&
+                menuEl.contains(target)
+            )
+                return;
+            if (
+                pickerEl &&
+                pickerEl.style.display !== "none" &&
+                pickerEl.contains(target)
+            )
+                return;
+            // 外部点击时，若色板处于展示且记录了原始颜色，恢复原色
+            try {
+                if (
+                    pickerEl &&
+                    pickerEl.style.display !== "none" &&
+                    currentSeriesName &&
+                    openingOriginalColor
+                ) {
+                    const targetSeries = seriesMap[currentSeriesName];
+                    if (targetSeries) {
+                        targetSeries.itemStyle = targetSeries.itemStyle || {};
+                        targetSeries.itemStyle.color = openingOriginalColor;
+                    }
+                    chart.setOption({
+                        series: [
+                            {
+                                name: currentSeriesName,
+                                itemStyle: { color: openingOriginalColor },
+                            },
+                        ],
+                    });
+                }
+            } catch {}
+            hidePicker();
+            hideMenu();
+        };
+        document.addEventListener("mousedown", outsideHandler, true);
+        document.addEventListener("touchstart", outsideHandler, true);
+    };
+
+    /**
+     * 展示右键菜单
+     * @param x 页面 X 坐标
+     * @param y 页面 Y 坐标
+     */
+    const showMenu = (x: number, y: number) => {
+        if (!menuEl) {
+            menuEl = document.createElement("div");
+            menuEl.className = "vditor-echarts-context-menu";
+            menuEl.style.position = "fixed";
+            menuEl.style.zIndex = "9999";
+            menuEl.style.background = "#fff";
+            menuEl.style.border = "1px solid #e5e7eb";
+            menuEl.style.boxShadow = "0 2px 8px rgba(0,0,0,0.15)";
+            menuEl.style.borderRadius = "4px";
+            menuEl.style.padding = "4px 0";
+            menuEl.style.fontSize = "12px";
+            menuEl.style.minWidth = "120px";
+            // 阻止菜单内的鼠标事件冒泡到 document
+            menuEl.addEventListener("mousedown", (ev) => {
+                ev.stopPropagation();
+            });
+
+            // 菜单项：根据图表类型选择来源
+            let items: string[] = [];
+            switch (chartType) {
+                case "pie":
+                    items = pieMenuLabels;
+                    break;
+                case "radar":
+                    items = radarMenuLabels;
+                    break;
+                case "funnel":
+                    items = funnelMenuLabels;
+                    break;
+                case "scatter":
+                    items = scatterMenuLabels;
+                    break;
+                default:
+                    items = Array.from(
+                        new Set(
+                            seriesList
+                                .map((s) =>
+                                    s && typeof s.name === "string"
+                                        ? s.name
+                                        : null
+                                )
+                                .filter((n): n is string => !!n && n.length > 0)
+                        )
+                    );
+            }
+            items.forEach((label: string) => {
+                const item = document.createElement("div");
+                item.textContent = `修改${label}配色`;
+                item.style.padding = "6px 12px";
+                item.style.cursor = "pointer";
+                item.style.userSelect = "none";
+                item.addEventListener("mouseenter", () => {
+                    item.style.background = "#f5f7fa";
+                });
+                item.addEventListener("mouseleave", () => {
+                    item.style.background = "transparent";
+                });
+                item.addEventListener("mousedown", (ev) => {
+                    ev.stopPropagation();
+                    ev.preventDefault();
+                });
+                item.addEventListener("click", (ev) => {
+                    ev.stopPropagation();
+                    ev.preventDefault();
+                    const r = (
+                        ev.currentTarget as HTMLElement
+                    ).getBoundingClientRect();
+                    const x = r.right + 8;
+                    const y = r.top;
+                    showColorPicker(label, x, y);
+                });
+                menuEl!.appendChild(item);
+            });
+            document.body.appendChild(menuEl);
+        }
+        menuEl.style.left = `${x}px`;
+        menuEl.style.top = `${y}px`;
+        menuEl.style.display = "block";
+        ensureOutsideHandler();
+    };
+
+    /**
+     * 隐藏右键菜单
+     */
+    const hideMenu = () => {
+        if (menuEl) {
+            menuEl.style.display = "none";
+            // 若两者都隐藏，移除外部点击处理器
+            if (
+                pickerEl &&
+                pickerEl.style.display === "none" &&
+                outsideHandler
+            ) {
+                document.removeEventListener("mousedown", outsideHandler, true);
+                document.removeEventListener(
+                    "touchstart",
+                    outsideHandler,
+                    true
+                );
+                outsideHandler = null;
+            }
+        }
+    };
+
+    /**
+     * 确保引入 Color Picker 的 CSS/JS 资源
+     * @param cdnRoot 静态资源根路径
+     */
+    const ensureColorPickerAssets = (cdnRoot: string): Promise<void> => {
+        const cssUrl = `${cdnRoot}/dist/js/color-picker/color-picker.nano.css`;
+        const jsUrl = `${cdnRoot}/dist/js/color-picker/color-picker.nano.js`;
+        addStyle(cssUrl, "vditorColorPickerStyle");
+        return new Promise((resolve) => {
+            if ((window as any).Pickr) {
+                resolve();
+                return;
+            }
+            addScript(jsUrl, "vditorColorPickerScript").then(() => resolve());
+        });
+    };
+
+    /**
+     * 确保加载中文 i18n（使用本项目 CDN 的 zh_CN.js）。
+     * 若全局已有 `window.VditorI18n`，则直接使用，否则动态加载。
+     * @param cdnRoot 静态资源根路径
+     */
+    const ensureI18nAssets = (cdnRoot: string): Promise<void> => {
+        return new Promise((resolve) => {
+            if ((window as any).VditorI18n) {
+                resolve();
+                return;
+            }
+            addScript(
+                `${cdnRoot}/dist/js/i18n/zh_CN.js`,
+                "vditorI18nScriptzh_CN"
+            ).then(() => resolve());
+        });
+    };
+
+    /** 派发编辑器输入事件 */
+    const dispatchEditorInput = () => {
+        const root = el.closest(
+            ".vditor-ir, .vditor-sv, .vditor-wysiwyg"
+        ) as HTMLElement | null;
+        if (!root) return;
+        let target: HTMLElement | null = null;
+        if (root.classList.contains("vditor-ir")) {
+            target = root.querySelector("pre.vditor-reset");
+        } else if (root.classList.contains("vditor-sv")) {
+            target = root as HTMLElement;
+        } else {
+            target = root.querySelector("pre.vditor-reset");
+        }
+        try {
+            (target || root)?.focus();
+            const sel = getSelection();
+            if (sel && sel.rangeCount === 0) {
+                const range = document.createRange();
+                const anchor = (target || root) as Node;
+                range.selectNodeContents(anchor);
+                range.collapse(false);
+                sel.removeAllRanges();
+                sel.addRange(range);
+            }
+        } catch {}
+        const ev = new InputEvent("input", {
+            bubbles: true,
+            cancelable: true,
+            data: "",
+            inputType: "insertText",
+        } as any);
+        (target || root).dispatchEvent(ev);
+    };
+
+    /**
+     * 显示颜色选择面板（2x4 网格，含动画与边界处理）。
+     * @param seriesName 目标系列名称
+     * @param x 页面坐标 X
+     * @param y 页面坐标 Y
+     */
+    const showColorPicker = (seriesName: string, x: number, y: number) => {
+        // 并行加载 Color Picker 与中文 i18n 资源
+        Promise.all([ensureColorPickerAssets(cdn), ensureI18nAssets(cdn)]).then(
+            () => {
+                if (!pickerEl) {
+                    pickerEl = document.createElement("div");
+                    pickerEl.className = "vditor-echarts-color-picker";
+                    pickerEl.style.position = "fixed";
+                    pickerEl.style.zIndex = "10000";
+                    pickerEl.style.background = "#fff";
+                    pickerEl.style.border = "1px solid #e5e7eb";
+                    pickerEl.style.boxShadow = "0 4px 12px rgba(0,0,0,0.15)";
+                    pickerEl.style.borderRadius = "6px";
+                    pickerEl.style.padding = "8px";
+                    pickerEl.style.display = "none";
+                    pickerEl.style.opacity = "0";
+                    pickerEl.style.transform = "scale(0.96)";
+                    pickerEl.style.transition =
+                        "opacity 120ms ease, transform 120ms ease";
+                    pickerEl.tabIndex = -1;
+
+                    pickerEl.addEventListener("mousedown", (ev) => {
+                        ev.preventDefault();
+                        ev.stopPropagation();
+                    });
+
+                    const pickerContainer = document.createElement("div");
+
+                    pickerEl.appendChild(pickerContainer);
+                    document.body.appendChild(pickerEl);
+
+                    try {
+                        const PickrAny = (window as any).Pickr;
+                        if (!PickrAny || !PickrAny.create) {
+                            throw new Error("Pickr 未正确加载");
+                        }
+                        // 记录当前目标项与原始颜色
+                        currentSeriesName = seriesName;
+                        switch (chartType) {
+                            case "pie": {
+                                const idx = labelIndexMap[seriesName];
+                                try {
+                                    const colorFn = pieSeries?.itemStyle?.color;
+                                    if (typeof colorFn === "function") {
+                                        openingOriginalColor = colorFn({
+                                            dataIndex: idx,
+                                            data: pieSeries.data[idx],
+                                        });
+                                    } else {
+                                        openingOriginalColor =
+                                            pieSeries?.data?.[idx]?.itemStyle
+                                                ?.color || null;
+                                    }
+                                } catch {
+                                    openingOriginalColor = null;
+                                }
+                                break;
+                            }
+                            case "radar": {
+                                const idx = labelIndexMap[seriesName];
+                                try {
+                                    const d = radarSeries?.data?.[idx];
+                                    openingOriginalColor =
+                                        d?.itemStyle?.color ||
+                                        d?.lineStyle?.color ||
+                                        null;
+                                } catch {
+                                    openingOriginalColor = null;
+                                }
+                                break;
+                            }
+                            case "funnel": {
+                                const idx = labelIndexMap[seriesName];
+                                try {
+                                    const first = funnelSeriesList[0];
+                                    let d = first?.data?.[idx];
+                                    if (!d && first) {
+                                        d = first.data.find(
+                                            (it: any) => it?.name === seriesName
+                                        );
+                                    }
+                                    if (d?.itemStyle?.color) {
+                                        openingOriginalColor =
+                                            d.itemStyle.color;
+                                    } else if (
+                                        Array.isArray(option?.color) &&
+                                        typeof idx === "number"
+                                    ) {
+                                        const palette =
+                                            option.color as string[];
+                                        openingOriginalColor =
+                                            palette[idx] || null;
+                                    } else {
+                                        openingOriginalColor = null;
+                                    }
+                                } catch {
+                                    openingOriginalColor = null;
+                                }
+                                break;
+                            }
+                            case "scatter": {
+                                const si = labelIndexMap[seriesName];
+                                try {
+                                    const s = seriesList[si];
+                                    openingOriginalColor =
+                                        s?.itemStyle?.color || null;
+                                } catch {
+                                    openingOriginalColor = null;
+                                }
+                                break;
+                            }
+                            default:
+                                openingOriginalColor =
+                                    seriesMap[seriesName]?.itemStyle?.color ||
+                                    null;
+                        }
+
+                        // 组装 Pickr 中文文案（使用 zh_CN.js 映射）
+                        const dict = (window as any).VditorI18n || {};
+                        const pickerI18n = {
+                            // 对话标题：Pickr 内部用于 aria 文案
+                            "ui:dialog": "颜色选择",
+                            // 保存、取消、清除按钮文案映射
+                            "btn:save": dict["confirm"] || "确定",
+                            "btn:cancel": dict["close"] || "取消",
+                            "btn:clear": dict["remove"] || "清除",
+                        } as Record<string, string>;
+
+                        // 初始化 Pickr（Nano 主题）
+                        pickerInstance = PickrAny.create({
+                            el: pickerContainer,
+                            theme: "nano",
+                            default: openingOriginalColor || "#409EFF",
+                            inline: true,
+                            useAsButton: true,
+                            i18n: pickerI18n,
+                            swatches: [
+                                "#F44336",
+                                "#E91E63",
+                                "#9C27B0",
+                                "#673AB7",
+                                "#3F51B5",
+                                "#2196F3",
+                                "#03A9F4",
+                                "#00BCD4",
+                                "#009688",
+                                "#4CAF50",
+                                "#8BC34A",
+                                "#CDDC39",
+                                "#FFEB3B",
+                                "#FFC107",
+                            ],
+                            components: {
+                                preview: true,
+                                opacity: true,
+                                hue: true,
+                                interaction: {
+                                    hex: false,
+                                    rgba: false,
+                                    hsla: false,
+                                    hsva: false,
+                                    cmyk: false,
+                                    input: true,
+                                    clear: true,
+                                    save: true,
+                                },
+                            },
+                        });
+
+                        pickerInstance?.show?.();
+                        /**
+                         * 将当前 option 序列化并写回同级别的源代码（vditor-wysiwyg__pre > code）。
+                         * 只更新源码，不直接改动渲染区域。
+                         */
+                        const updateMdCodeFromOption = () => {
+                            try {
+                                // 使用适配器的 setCode，确保“一个字段一行”的格式化且只更新源代码
+                                const updated = JSON.stringify(option);
+                                chartRenderAdapter.setCode(el, updated);
+                            } catch {}
+                        };
+                        /**
+                         * 应用当前系列颜色到 ECharts，并记录到元素 dataset
+                         * @param colorHex 颜色十六进制值，如 #409EFF
+                         * @param finalize 是否为最终提交（保存/点击色块），用于必要时收起面板
+                         */
+                        const applySeriesColor = (
+                            colorHex: string,
+                            finalize = false,
+                            persist = false
+                        ) => {
+                            if (!currentSeriesName || !colorHex) return;
+                            switch (chartType) {
+                                case "pie": {
+                                    // 饼图：更新对应数据项的颜色
+                                    const idx =
+                                        labelIndexMap[currentSeriesName];
+                                    const d = pieSeries.data[idx];
+                                    if (d) {
+                                        d.itemStyle = d.itemStyle || {};
+                                        d.itemStyle.color = colorHex;
+                                    }
+                                    break;
+                                }
+                                case "radar": {
+                                    // 雷达图：更新对应数据项颜色（线条与点）
+                                    const idx =
+                                        labelIndexMap[currentSeriesName];
+                                    const d = radarSeries?.data?.[idx];
+                                    if (d) {
+                                        d.itemStyle = d.itemStyle || {};
+                                        d.lineStyle = d.lineStyle || {};
+                                        d.itemStyle.color = colorHex;
+                                        d.lineStyle.color = colorHex;
+                                        // 若存在面积色，保留透明度并替换 RGB
+                                        if (
+                                            d.areaStyle &&
+                                            typeof d.areaStyle === "object"
+                                        ) {
+                                            const prev = d.areaStyle
+                                                .color as string;
+                                            const m =
+                                                typeof prev === "string" &&
+                                                prev.match(
+                                                    /^rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([0-9.]+)\s*\)$/
+                                                );
+                                            if (m) {
+                                                const alpha = m[4];
+                                                const hex = colorHex.replace(
+                                                    "#",
+                                                    ""
+                                                );
+                                                const r = parseInt(
+                                                    hex.substring(0, 2),
+                                                    16
+                                                );
+                                                const g = parseInt(
+                                                    hex.substring(2, 4),
+                                                    16
+                                                );
+                                                const b = parseInt(
+                                                    hex.substring(4, 6),
+                                                    16
+                                                );
+                                                d.areaStyle.color = `rgba(${r}, ${g}, ${b}, ${alpha})`;
+                                            }
+                                        }
+                                    }
+                                    break;
+                                }
+                                case "funnel": {
+                                    // 漏斗图：对所有漏斗系列中匹配名称的数据项应用颜色
+                                    funnelSeriesList.forEach((fs) => {
+                                        let idx =
+                                            labelIndexMap[currentSeriesName];
+                                        // 保障不同系列内索引不一致时的名称查找
+                                        if (
+                                            (idx == null ||
+                                                fs.data[idx]?.name !==
+                                                    currentSeriesName) &&
+                                            Array.isArray(fs.data)
+                                        ) {
+                                            idx = fs.data.findIndex(
+                                                (it: any) =>
+                                                    it &&
+                                                    it.name ===
+                                                        currentSeriesName
+                                            );
+                                        }
+                                        if (idx != null && idx >= 0) {
+                                            const d = fs.data[idx];
+                                            if (d) {
+                                                d.itemStyle = d.itemStyle || {};
+                                                d.itemStyle.color = colorHex;
+                                            }
+                                        }
+                                    });
+                                    break;
+                                }
+                                case "scatter": {
+                                    // 散点图：按系列更新颜色（数据点继承系列颜色）
+                                    const si = labelIndexMap[currentSeriesName];
+                                    const s = seriesList[si];
+                                    if (s) {
+                                        s.itemStyle = s.itemStyle || {};
+                                        s.itemStyle.color = colorHex;
+                                    }
+                                    break;
+                                }
+                                default: {
+                                    // line/bar：默认更新系列颜色
+                                    const target = seriesMap[currentSeriesName];
+                                    if (target) {
+                                        target.itemStyle =
+                                            target.itemStyle || {};
+                                        target.itemStyle.color = colorHex;
+                                    }
+                                    break;
+                                }
+                            }
+                            if (persist) {
+                                try {
+                                    const key = "data-echarts-colors";
+                                    const raw = el.getAttribute(key);
+                                    const saved: Record<string, string> = raw
+                                        ? JSON.parse(raw)
+                                        : {};
+                                    saved[currentSeriesName] = colorHex;
+                                    el.setAttribute(key, JSON.stringify(saved));
+                                } catch {}
+                            }
+                            // 更新图表
+                            switch (chartType) {
+                                case "pie":
+                                    chart.setOption({
+                                        series: [
+                                            {
+                                                name: pieSeries.name,
+                                                type: "pie",
+                                                data: pieSeries.data,
+                                            },
+                                        ],
+                                    });
+                                    break;
+                                case "radar":
+                                    chart.setOption({
+                                        series: [
+                                            {
+                                                name: radarSeries?.name,
+                                                type: "radar",
+                                                data: radarSeries?.data,
+                                            },
+                                        ],
+                                    });
+                                    break;
+                                case "funnel":
+                                    // 漏斗图：直接刷新整个 series 数组，确保多系列同时生效
+                                    chart.setOption({ series: option.series });
+                                    break;
+                                case "scatter":
+                                    // 散点图：直接刷新整个 series 数组，确保无 name 时也能匹配
+                                    chart.setOption({ series: option.series });
+                                    break;
+                                default:
+                                    chart.setOption({
+                                        series: [
+                                            {
+                                                name: currentSeriesName,
+                                                itemStyle: { color: colorHex },
+                                            },
+                                        ],
+                                    });
+                            }
+                            if (finalize) {
+                                // 结束一次选择交互，收起面板与菜单
+                                hidePicker();
+                                hideMenu();
+                            }
+                        };
+
+                        // 轻量节流：拖动过程中每帧最多一次更新，保证实时且不拖慢
+                        let rafPendingColor: string | null = null;
+                        let rafId: number | null = null;
+                        const scheduleFrameUpdate = () => {
+                            if (rafId != null) return;
+                            rafId = requestAnimationFrame(() => {
+                                if (rafPendingColor) {
+                                    applySeriesColor(
+                                        rafPendingColor,
+                                        false,
+                                        false
+                                    );
+                                    rafPendingColor = null;
+                                }
+                                rafId = null;
+                            });
+                        };
+
+                        // 事件：滑动变化实时更新
+                        pickerInstance.on("change", (color: any) => {
+                            try {
+                                const hex = color.toHEXA().toString();
+                                rafPendingColor = hex;
+                                scheduleFrameUpdate();
+                            } catch {}
+                        });
+                        // 事件：点击预设色块应用但不关闭面板与菜单
+                        pickerInstance.on("swatchselect", (color: any) => {
+                            try {
+                                const hex = color.toHEXA().toString();
+                                applySeriesColor(hex, false, false);
+                            } catch {}
+                        });
+                        // 事件：保存按钮，确认当前选择
+                        pickerInstance.on("save", (color: any) => {
+                            try {
+                                const hex = color?.toHEXA?.().toString?.();
+                                if (hex) {
+                                    applySeriesColor(hex, true, true);
+                                    updateMdCodeFromOption();
+                                    dispatchEditorInput();
+                                } else if (openingOriginalColor) {
+                                    applySeriesColor(
+                                        openingOriginalColor,
+                                        true,
+                                        true
+                                    );
+                                    updateMdCodeFromOption();
+                                    dispatchEditorInput();
+                                } else {
+                                    hidePicker();
+                                    hideMenu();
+                                }
+                            } catch {
+                                hidePicker();
+                                hideMenu();
+                            }
+                        });
+                        pickerInstance.on("cancel", () => {
+                            try {
+                                if (openingOriginalColor && currentSeriesName) {
+                                    applySeriesColor(
+                                        openingOriginalColor,
+                                        true,
+                                        false
+                                    );
+                                } else {
+                                    hidePicker();
+                                    hideMenu();
+                                }
+                            } catch {
+                                hidePicker();
+                                hideMenu();
+                            }
+                        });
+                        // 事件：清空（等同取消），恢复原色但不持久、不触发事件
+                        pickerInstance.on("clear", () => {
+                            if (openingOriginalColor) {
+                                applySeriesColor(
+                                    openingOriginalColor,
+                                    true,
+                                    false
+                                );
+                            }
+                            hidePicker();
+                            hideMenu();
+                        });
+                    } catch (err) {
+                        pickerContainer.innerHTML = `<div class=\"vditor-reset--error\">Color Picker 加载失败：${err}</div>`;
+                    }
+                }
+
+                // 记录当前目标系列名与打开时的原始颜色，并清空待确认色
+                currentSeriesName = seriesName;
+                try {
+                    switch (chartType) {
+                        case "pie": {
+                            const idx = labelIndexMap[seriesName];
+                            const colorFn = pieSeries?.itemStyle?.color;
+                            if (typeof colorFn === "function") {
+                                openingOriginalColor = colorFn({
+                                    dataIndex: idx,
+                                    data: pieSeries.data[idx],
+                                });
+                            } else {
+                                openingOriginalColor =
+                                    pieSeries?.data?.[idx]?.itemStyle?.color ||
+                                    null;
+                            }
+                            break;
+                        }
+                        case "radar": {
+                            const idx = labelIndexMap[seriesName];
+                            const d = radarSeries?.data?.[idx];
+                            openingOriginalColor =
+                                d?.itemStyle?.color ||
+                                d?.lineStyle?.color ||
+                                null;
+                            break;
+                        }
+                        case "funnel": {
+                            const idx = labelIndexMap[seriesName];
+                            const first = funnelSeriesList[0];
+                            let d = first?.data?.[idx];
+                            if (!d && first) {
+                                d = first.data.find(
+                                    (it: any) => it?.name === seriesName
+                                );
+                            }
+                            if (d?.itemStyle?.color) {
+                                openingOriginalColor = d.itemStyle.color;
+                            } else if (
+                                Array.isArray(option?.color) &&
+                                typeof idx === "number"
+                            ) {
+                                const palette = option.color as string[];
+                                openingOriginalColor = palette[idx] || null;
+                            } else {
+                                openingOriginalColor = null;
+                            }
+                            break;
+                        }
+                        case "scatter": {
+                            const si = labelIndexMap[seriesName];
+                            const s = seriesList[si];
+                            openingOriginalColor =
+                                (s && s.itemStyle && s.itemStyle.color) || null;
+                            break;
+                        }
+                        default: {
+                            const origin = seriesMap[seriesName];
+                            openingOriginalColor =
+                                (origin &&
+                                    origin.itemStyle &&
+                                    origin.itemStyle.color) ||
+                                null;
+                            break;
+                        }
+                    }
+                } catch {
+                    openingOriginalColor = null;
+                }
+                pickerEl.style.left = `${x}px`;
+                pickerEl.style.top = `${y}px`;
+                pickerEl.style.display = "block";
+                // 重新激活时确保内部元素渲染与当前色值
+                try {
+                    if (pickerInstance && pickerInstance.show) {
+                        pickerInstance.show();
+                        if (openingOriginalColor) {
+                            pickerInstance.setColor(openingOriginalColor, true);
+                        }
+                    }
+                } catch {}
+                ensureOutsideHandler();
+
+                const rect = pickerEl.getBoundingClientRect();
+                let adjustLeft = x;
+                let adjustTop = y;
+                if (rect.right > window.innerWidth) {
+                    adjustLeft = Math.max(
+                        8,
+                        window.innerWidth - rect.width - 8
+                    );
+                }
+                if (rect.bottom > window.innerHeight) {
+                    adjustTop = Math.max(
+                        8,
+                        window.innerHeight - rect.height - 8
+                    );
+                }
+                pickerEl.style.left = `${adjustLeft}px`;
+                pickerEl.style.top = `${adjustTop}px`;
+
+                requestAnimationFrame(() => {
+                    pickerEl!.style.opacity = "1";
+                    pickerEl!.style.transform = "scale(1)";
+                });
+            }
+        );
+    };
+
+    /** 隐藏颜色面板（含收起动画） */
+    const hidePicker = () => {
+        if (pickerEl && pickerEl.style.display !== "none") {
+            // 调用 Pickr 的隐藏方法，确保内部状态一致
+            try {
+                (pickerInstance as any)?.hide?.();
+            } catch {}
+            pickerEl.style.opacity = "0";
+            pickerEl.style.transform = "scale(0.96)";
+            window.setTimeout(() => {
+                if (pickerEl) {
+                    pickerEl.style.display = "none";
+                    // 若两者都隐藏，移除外部点击处理器
+                    if (
+                        menuEl &&
+                        menuEl.style.display === "none" &&
+                        outsideHandler
+                    ) {
+                        document.removeEventListener(
+                            "mousedown",
+                            outsideHandler,
+                            true
+                        );
+                        document.removeEventListener(
+                            "touchstart",
+                            outsideHandler,
+                            true
+                        );
+                        outsideHandler = null;
+                    }
+                }
+            }, 120);
+        }
+    };
+
+    // 判断是否开启自定义右键：仅支持 pie / radar / funnel / scatter / line / bar
+    const supportedTypes = new Set([
+        "pie",
+        "radar",
+        "funnel",
+        "scatter",
+        "effectScatter",
+        "line",
+        "bar",
+    ]);
+    const isCustomMenuSupported =
+        seriesList.length > 0 &&
+        seriesList.every((s) => s && supportedTypes.has(s.type));
+
+    // 绑定右键事件，仅在图表区域生效；不支持时保留原生右键
+    el.addEventListener("contextmenu", (event: MouseEvent) => {
+        if (!isCustomMenuSupported) {
+            // 不拦截，使用浏览器原生右键菜单
+            return;
+        }
+        event.preventDefault();
+        // 使用视口坐标，配合 position:fixed，避免产生滚动相关问题
+        const x = event.clientX;
+        const y = event.clientY;
+        showMenu(x, y);
+    });
+};