⬆️ fix https://github.com/siyuan-note/siyuan/issues/4992

app/src/protyle/markdown/chartRender.ts

@@ -14,42 +14,44 @@ export const chartRender = (element: Element, cdn = Constants.PROTYLE_CDN) => {
         return;
     }
     if (echartsElements.length > 0) {
-        addScript(`${cdn}/js/echarts/echarts.min.js?v=0.0.0`, "protyleEchartsScript").then(() => {
-            let width: number = undefined;
-            if (echartsElements[0].firstElementChild.clientWidth === 0) {
-                const tabElement = hasClosestByClassName(echartsElements[0], "layout-tab-container", true);
-                if (tabElement) {
-                    Array.from(tabElement.children).find(item => {
-                        if (item.classList.contains("protyle") && !item.classList.contains("fn__none")) {
-                            width = item.querySelector(".protyle-wysiwyg").firstElementChild.clientWidth;
-                            return true;
-                        }
-                    });
-                }
-            }
-            echartsElements.forEach((e: HTMLDivElement) => {
-                const text = Lute.UnEscapeHTMLStr(e.getAttribute("data-content"));
-                if (!text || e.getAttribute("data-render") === "true") {
-                    return;
-                }
-                if (!e.firstElementChild.classList.contains("protyle-icons")) {
-                    e.insertAdjacentHTML("afterbegin", '<div class="protyle-icons"><span class="protyle-icon protyle-icon--first protyle-action__edit"><svg><use xlink:href="#iconEdit"></use></svg></span><span class="protyle-icon protyle-action__menu protyle-icon--last"><svg><use xlink:href="#iconMore"></use></svg></span></div>');
-                }
-                const renderElement = e.firstElementChild.nextElementSibling as HTMLElement;
-                try {
-                    renderElement.style.height = e.style.height;
-                    const option = JSON.parse(text);
-                    echarts.init(renderElement, window.siyuan.config.appearance.mode === 1 ? "dark" : undefined, {width}).setOption(option);
-                    e.setAttribute("data-render", "true");
-                    renderElement.classList.remove("ft__error");
-                    if (!renderElement.textContent.endsWith(Constants.ZWSP)) {
-                        renderElement.firstElementChild.insertAdjacentText("beforeend", Constants.ZWSP);
+        addScript(`${cdn}/js/echarts/echarts.min.js?v=5.3.2`, "protyleEchartsScript").then(() => {
+            addScript(`${cdn}/js/echarts/echarts-gl.min.js?v=2.0.9`, "protyleEchartsGLScript").then(() => {
+                let width: number = undefined;
+                if (echartsElements[0].firstElementChild.clientWidth === 0) {
+                    const tabElement = hasClosestByClassName(echartsElements[0], "layout-tab-container", true);
+                    if (tabElement) {
+                        Array.from(tabElement.children).find(item => {
+                            if (item.classList.contains("protyle") && !item.classList.contains("fn__none")) {
+                                width = item.querySelector(".protyle-wysiwyg").firstElementChild.clientWidth;
+                                return true;
+                            }
+                        });
                     }
-                } catch (error) {
-                    echarts.dispose(renderElement);
-                    renderElement.classList.add("ft__error");
-                    renderElement.innerHTML = `echarts render error: <br>${error}`;
                 }
+                echartsElements.forEach((e: HTMLDivElement) => {
+                    const text = Lute.UnEscapeHTMLStr(e.getAttribute("data-content"));
+                    if (!text || e.getAttribute("data-render") === "true") {
+                        return;
+                    }
+                    if (!e.firstElementChild.classList.contains("protyle-icons")) {
+                        e.insertAdjacentHTML("afterbegin", '<div class="protyle-icons"><span class="protyle-icon protyle-icon--first protyle-action__edit"><svg><use xlink:href="#iconEdit"></use></svg></span><span class="protyle-icon protyle-action__menu protyle-icon--last"><svg><use xlink:href="#iconMore"></use></svg></span></div>');
+                    }
+                    const renderElement = e.firstElementChild.nextElementSibling as HTMLElement;
+                    try {
+                        renderElement.style.height = e.style.height;
+                        const option = JSON.parse(text);
+                        echarts.init(renderElement, window.siyuan.config.appearance.mode === 1 ? "dark" : undefined, {width}).setOption(option);
+                        e.setAttribute("data-render", "true");
+                        renderElement.classList.remove("ft__error");
+                        if (!renderElement.textContent.endsWith(Constants.ZWSP)) {
+                            renderElement.firstElementChild.insertAdjacentText("beforeend", Constants.ZWSP);
+                        }
+                    } catch (error) {
+                        echarts.dispose(renderElement);
+                        renderElement.classList.add("ft__error");
+                        renderElement.innerHTML = `echarts render error: <br>${error}`;
+                    }
+                });
             });
         });
     }