@ued_fpi/data-visual 1.2.6 → 1.2.7

package/dist/es/wgms/src/WaterQualityRainfall/index.vue.mjs

@@ -1,6 +1,6 @@
-import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs, openBlock, createElementBlock, createElementVNode } from 'vue';
+import { defineComponent, ref, reactive, watch, onMounted, nextTick, openBlock, createElementBlock, createElementVNode, createVNode } from 'vue';
 import dayjs from 'dayjs';
-import echarts from '../../utils/echarts/index.mjs';
+import _sfc_main$1 from '../../utils/echarts/BaseECharts.vue.mjs';
 import { rainHydrologyAnalyse, waterSurfaceListAll } from './api/index.mjs';
 
 const _hoisted_1 = { class: "dv-wgms-water-quality-rainfall" };
@@ -43,6 +43,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const chartQualityRainfall = ref();
+    const option = ref(void 0);
     const data = reactive({
       title: "水质-雨量-水位趋势对比图",
       unit: "mg/L",
@@ -76,7 +77,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     const getData = async () => {
       const res = await rainHydrologyAnalyse(data.params);
-      console.log(res);
       const resData = res.data || [];
       const xData = [];
       const seriesData = {
@@ -95,14 +95,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         seriesData.factorValue.push(item.factorValue);
         seriesData.quality.push(item.quality);
       });
-      const lineOptions = await initWaterQuality(xData, seriesData, data.unit, data.factorName);
-      echarts.draw(chartQualityRainfall.value, lineOptions);
+      option.value = await initWaterQuality(xData, seriesData, data.unit, data.factorName);
     };
     const initWaterQuality = async (xAxis, data2, unit, factorName) => {
       const { hydrology, factorValue, rain, quality } = data2;
       const res = await waterSurfaceListAll({});
       const gradeList = res?.entries ?? [];
-      const option = {
+      const option2 = {
         grid: {
           top: 55,
           right: 26,
@@ -135,7 +134,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           bottom: 0,
           inactiveColor: "rgba(255,255,255,0.5)",
           textStyle: {
-            color: "rgba(255,255,255,1)"
+            color: "var(--dv-color-text-primary)"
           },
           itemHeight: 2,
           itemWidth: 16,
@@ -160,15 +159,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           axisLine: {
             show: false,
             lineStyle: {
-              color: "rgba(255,255,255,0.5)"
+              color: "var(--dv-color-fill-lighter)"
             }
           },
           axisLabel: {
             show: true,
             textStyle: {
-              fontFamily: "Bebas Neue",
-              fontSize: "12",
-              color: "rgba(255,255,255,0.6)"
+              fontFamily: "var(--dv-font-family-number)",
+              fontSize: "var(--dv-text-number2)",
+              color: "var(--dv-color-text-primary)"
             }
           },
           axisTick: {
@@ -184,21 +183,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             nameLocation: "start",
             nameTextStyle: {
               align: "right",
-              color: "rgba(255,255,255,1)"
+              fontFamily: "var(--dv-font-family-number)",
+              fontSize: "var(--dv-text-body2)",
+              color: "var(--dv-color-text-secondary)"
             },
             axisLabel: {
               formatter: "{value}",
               textStyle: {
                 fontFamily: "var(--dv-font-family-number)",
-                fontSize: "12",
-                color: "#909399"
+                fontSize: "var(--dv-text-number2)",
+                color: "var(--dv-color-text-secondary)"
               }
             },
             axisLine: {
-              show: false,
-              lineStyle: {
-                color: "rgba(255,255,255,1)"
-              }
+              show: false
             },
             axisPointer: {
               snap: true
@@ -206,7 +204,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             splitLine: {
               show: true,
               lineStyle: {
-                color: "rgba(255, 255, 255, 0.15)"
+                color: "var(--dv-color-fill-lighter)"
               }
             },
             axisTick: { show: false },
@@ -219,7 +217,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 (${unit})`,
             nameTextStyle: {
               align: "right",
-              color: "rgba(255,255,255,1)"
+              fontFamily: "var(--dv-font-family-number)",
+              fontSize: "var(--dv-text-body2)",
+              color: "var(--dv-color-text-secondary)"
             },
             position: "left",
             offset: 40,
@@ -227,24 +227,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               formatter: "{value}",
               textStyle: {
                 fontFamily: "var(--dv-font-family-number)",
-                fontSize: "12",
-                color: "#909399"
+                fontSize: "var(--dv-text-number2)",
+                color: "var(--dv-color-text-secondary)"
               }
             },
             axisLine: {
-              show: false,
-              lineStyle: {
-                color: "rgba(255,255,255,0.5)"
-              }
+              show: false
             },
             axisPointer: {
               snap: true
             },
             splitArea: {
-              show: false,
-              areaStyle: {
-                color: ["transparent", "rgba(255, 255, 255, 0.05)"]
-              }
+              show: false
             },
             splitLine: { show: false },
             axisTick: { show: false }
@@ -254,21 +248,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             type: "value",
             name: "水位(m)",
             nameTextStyle: {
-              color: "rgba(255,255,255,1)"
+              fontFamily: "var(--dv-font-family-number)",
+              fontSize: "var(--dv-text-body2)",
+              color: "var(--dv-color-text-secondary)"
             },
             axisLabel: {
               formatter: "{value}",
               textStyle: {
-                fontFamily: "Bebas Neue",
-                fontSize: "12",
-                color: "rgba(255,255,255,0.6)"
+                fontFamily: "var(--dv-font-family-number)",
+                fontSize: "var(--dv-text-number2)",
+                color: "var(--dv-color-text-secondary)"
               }
             },
             axisLine: {
-              show: false,
-              lineStyle: {
-                color: "rgba(255,255,255,0.5)"
-              }
+              show: false
             },
             axisPointer: {
               snap: true
@@ -309,14 +302,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             markPoint: {
               show: false,
               itemStyle: {
-                color: ["#f00"]
+                color: ["var(--dv-color-danger)"]
               }
             },
             label: {
               show: true,
-              fontFamily: "Bebas Neue",
-              fontSize: "12",
-              color: "rgba(255,255,255,0.6)"
+              fontFamily: "var(--dv-font-family-number)",
+              fontSize: "var(--dv-text-number2)",
+              color: "var(--dv-color-text-secondary)"
             },
             // data: factorValue.map((item, index) => {
             //     return {
@@ -379,16 +372,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }
         ]
       };
-      return option;
+      return option2;
     };
-    toRefs(data);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createElementVNode("div", {
           ref_key: "chartQualityRainfall",
           ref: chartQualityRainfall,
           class: "chart"
-        }, null, 512)
+        }, [
+          createVNode(_sfc_main$1, { options: option.value }, null, 8, ["options"])
+        ], 512)
       ]);
     };
   }

package/dist/es/wgms/src/WaterQualityStatus/index.vue.mjs

@@ -1,10 +1,9 @@
-import __vite_glob_0_0 from './images/down.svg.mjs';
-import __vite_glob_0_1 from './images/right.svg.mjs';
-import __vite_glob_0_2 from './images/up.svg.mjs';
-import { defineComponent, reactive, onMounted, watch, toRefs, openBlock, createElementBlock, Fragment, renderList, unref, createElementVNode, toDisplayString, createVNode, normalizeStyle, createCommentVNode } from 'vue';
+import { defineComponent, reactive, onMounted, watch, toRefs, openBlock, createElementBlock, Fragment, renderList, unref, createElementVNode, toDisplayString, createVNode, normalizeStyle, createBlock, createCommentVNode } from 'vue';
 import dayjs from 'dayjs';
 import _sfc_main$1 from '../common/ProgressBar.vue.mjs';
 import '../common/ProgressBar.vue2.mjs';
+import _sfc_main$2 from '../common/common-arrow.vue.mjs';
+import '../common/common-arrow.vue2.mjs';
 import { getReachStandardData } from './api/index.mjs';
 
 const _hoisted_1 = { class: "dv-wgms-water-quality" };
@@ -15,9 +14,8 @@ const _hoisted_5 = { class: "dv-wgms-water-quality-status-bottom dv-wgms-flex-be
 const _hoisted_6 = { class: "dv-wgms-target" };
 const _hoisted_7 = /* @__PURE__ */ createElementVNode("span", { class: "dv-wgms-text" }, "目标", -1);
 const _hoisted_8 = { class: "dv-wgms-value" };
-const _hoisted_9 = { class: "dv-wgms-same" };
+const _hoisted_9 = { class: "dv-wgms-same flex-left-center" };
 const _hoisted_10 = /* @__PURE__ */ createElementVNode("span", { class: "dv-wgms-text" }, "同比", -1);
-const _hoisted_11 = ["src"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
@@ -45,9 +43,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const { data: res } = await getReachStandardData(props.params);
       res && (wgmsData.list = res);
     };
-    const getAssetsFile = (url) => {
-      return new URL((/* #__PURE__ */ Object.assign({"./images/down.svg": __vite_glob_0_0,"./images/right.svg": __vite_glob_0_1,"./images/up.svg": __vite_glob_0_2}))[`./images/${url}`], self.location).href;
-    };
     onMounted(() => {
       getResData();
     });
@@ -79,13 +74,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               createElementVNode("div", _hoisted_9, [
                 _hoisted_10,
                 createElementVNode("span", {
-                  style: normalizeStyle({ color: item.yoy === null ? "#fff" : item.yoy > 0 ? "#15F3A3" : item.yoy < 0 ? "#F84439" : "#33E5FF" }),
+                  style: normalizeStyle({ color: item.yoy === null ? "var(--dv-color-text-placeholder)" : item.yoy > 0 ? "var(--dv-color-success)" : item.yoy < 0 ? "var(--dv-color-danger)" : "var(--dv-color-index)" }),
                   class: "dv-wgms-value"
                 }, toDisplayString(item.yoy === null ? "--" : item.yoy === 0 ? "持平" : `${item.yoy}%`), 5),
-                item.yoy !== null ? (openBlock(), createElementBlock("img", {
+                item.yoy !== null ? (openBlock(), createBlock(_sfc_main$2, {
                   key: 0,
-                  src: getAssetsFile(`${item.yoy > 0 ? "up" : item.yoy < 0 ? "down" : "right"}.svg`)
-                }, null, 8, _hoisted_11)) : createCommentVNode("", true)
+                  direction: item.yoy > 0 ? "up" : item.yoy < 0 ? "down" : "flat"
+                }, null, 8, ["direction"])) : createCommentVNode("", true)
               ])
             ])
           ]);

package/dist/es/wgms/src/common/ProgressBar.vue.mjs

@@ -15,14 +15,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
      */
     bgColor: {
       type: String,
-      default: "rgba(255, 255, 255, 0.1)"
+      default: "var(--dv-color-fill-lighter)"
     },
     /**
      * 激活部分背景色
      */
     activeColor: {
       type: String,
-      default: "linear-gradient(270deg, #00DEFF 0%, rgba(0,222,255,0.20) 100%)"
+      default: "linear-gradient(270deg, var(--dv-color-index) 0%, var(--dv-color-index-30) 100%)"
     },
     /**
      * 百分比
@@ -38,7 +38,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       type: Object,
       default: () => {
         return {
-          background: "#00DEFF",
+          background: "var(--dv-color-index)",
           width: "2px",
           height: "12px"
         };

package/dist/{lib/ipes/src/Level3AirDefense/components/EmptyData.vue.d.ts → es/wgms/src/common/common-arrow.vue.d.ts}

@@ -1,14 +1,15 @@
+import type { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
-    emptyText: {
-        type: StringConstructor;
+    direction: {
+        type: PropType<"flat" | "up" | "down">;
         default: string;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    emptyText: {
-        type: StringConstructor;
+    direction: {
+        type: PropType<"flat" | "up" | "down">;
         default: string;
     };
 }>>, {
-    emptyText: string;
+    direction: "flat" | "up" | "down";
 }, {}>;
 export default _default;

package/dist/es/wgms/src/common/common-arrow.vue.mjs

@@ -0,0 +1,26 @@
+import { defineComponent, openBlock, createElementBlock, normalizeClass, createElementVNode } from 'vue';
+
+const _hoisted_1 = /* @__PURE__ */ createElementVNode("div", { class: "bar" }, null, -1);
+const _hoisted_2 = /* @__PURE__ */ createElementVNode("div", { class: "triangle" }, null, -1);
+const _hoisted_3 = [
+  _hoisted_1,
+  _hoisted_2
+];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "common-arrow",
+  props: {
+    direction: {
+      type: String,
+      default: "up"
+    }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["arrow", __props.direction])
+      }, _hoisted_3, 2);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/es/wgms/src/common/common-arrow.vue2.mjs

@@ -0,0 +1,3 @@
+/* unplugin-vue-components disabled */const commonArrow_vue_vue_type_style_index_0_lang = '';
+
+export { commonArrow_vue_vue_type_style_index_0_lang as default };

package/dist/es/wgms/src/common/common-arrow.vue3.mjs

@@ -0,0 +1,6 @@
+import _sfc_main from './common-arrow.vue.mjs';
+import './common-arrow.vue2.mjs';
+
+
+
+export { _sfc_main as default };

package/dist/es/wgms/utils/echarts/BaseECharts.vue.d.ts

@@ -0,0 +1,41 @@
+declare const _default: import("vue").DefineComponent<{
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    options: {
+        type: ObjectConstructor;
+        default: null;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    options: {
+        type: ObjectConstructor;
+        default: null;
+    };
+}>>, {
+    width: string;
+    height: string;
+    options: Record<string, any>;
+    loading: boolean;
+}, {}>;
+export default _default;

package/dist/es/wgms/utils/echarts/BaseECharts.vue.mjs

@@ -0,0 +1,103 @@
+import { defineComponent, ref, onMounted, nextTick, onUnmounted, watch, openBlock, createElementBlock, normalizeStyle, createElementVNode } from 'vue';
+import { useThemeHook, replaceVarStrings } from '../../../utils.mjs';
+import echarts from './index.mjs';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "BaseECharts",
+  props: {
+    width: {
+      type: String,
+      default: "100%"
+    },
+    height: {
+      type: String,
+      default: "100%"
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    options: {
+      type: Object,
+      default: null
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const { isDark } = useThemeHook();
+    const domRef = ref(null);
+    const domBox = ref(null);
+    let chartObj = null;
+    let observer = null;
+    onMounted(() => {
+      if (!chartObj && domRef.value)
+        chartObj = echarts.init(domRef.value);
+      if (!chartObj)
+        return;
+      chartObj.showLoading({
+        text: "",
+        color: "#409eff",
+        textColor: "#000",
+        maskColor: "rgba(255, 255, 255, .95)",
+        zlevel: 0,
+        lineWidth: 2
+      });
+      if (!props.loading) {
+        chartObj.hideLoading();
+        drawOption();
+      }
+      if (props.options)
+        drawOption();
+      observer = new MutationObserver((mutationsList) => {
+        for (const mutation of mutationsList)
+          if (mutation.target === domBox.value)
+            chartObj && chartObj.resize();
+      });
+      nextTick(() => {
+        domBox.value && observer.observe(domBox.value, {
+          attributes: true,
+          childList: false,
+          characterData: true,
+          subtree: true
+        });
+      });
+      setTimeout(() => {
+        chartObj && chartObj.resize();
+      }, 1e3);
+    });
+    onUnmounted(() => {
+      if (chartObj) {
+        chartObj.dispose();
+        chartObj = null;
+      }
+      observer && observer.disconnect();
+    });
+    watch(
+      () => props.options,
+      () => {
+        drawOption();
+      }
+    );
+    watch(() => isDark.value, () => {
+      drawOption();
+    });
+    const drawOption = () => {
+      chartObj && chartObj.setOption(replaceVarStrings(props.options));
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "domBox",
+        ref: domBox,
+        style: normalizeStyle({ width: __props.width, height: __props.height })
+      }, [
+        createElementVNode("div", {
+          ref_key: "domRef",
+          ref: domRef,
+          style: normalizeStyle({ width: __props.width, height: __props.height })
+        }, null, 4)
+      ], 4);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/es/wgms/utils/echarts/BaseECharts.vue2.mjs

@@ -0,0 +1,5 @@
+import _sfc_main from './BaseECharts.vue.mjs';
+
+
+
+export { _sfc_main as default };

package/dist/es/wgms/utils/echarts/echartsOptions.mjs

@@ -36,7 +36,7 @@ const pieChartOptions = (seriesData, colorList, total) => {
                 fontWeight: "500",
                 lineHeight: "26",
                 fontSize: 16,
-                color: "#fff"
+                color: "var(--dv-color-text-primary)"
               }
             }
           },

package/dist/es/wgms/utils/echarts/index.d.ts

@@ -1,14 +1,2 @@
-import 'echarts/lib/chart/line';
-import 'echarts/lib/chart/pie';
-import 'echarts/lib/chart/bar';
-import 'echarts/lib/chart/boxplot';
-import 'echarts/lib/component/legend';
-import 'echarts/lib/component/grid';
-import 'echarts/lib/component/title';
-import 'echarts/lib/component/tooltip';
-import 'echarts/lib/component/graphic';
-import 'echarts/lib/component/dataZoom';
-import 'echarts/lib/component/visualMap';
-import 'echarts/lib/component/markLine';
 declare const _default: any;
 export default _default;

package/dist/es/wgms/utils/echarts/index.mjs

@@ -1,40 +1,30 @@
-import * as echarts$1 from 'echarts/lib/echarts.js';
-import 'echarts/lib/chart/line';
-import 'echarts/lib/chart/pie';
-import 'echarts/lib/chart/bar';
-import 'echarts/lib/chart/boxplot';
-import 'echarts/lib/component/legend';
-import 'echarts/lib/component/grid';
-import 'echarts/lib/component/title';
-import 'echarts/lib/component/tooltip';
-import 'echarts/lib/component/graphic';
-import 'echarts/lib/component/dataZoom';
-import 'echarts/lib/component/visualMap';
-import 'echarts/lib/component/markLine';
+import * as echarts$1 from 'echarts/core';
+import { GraphicComponent, GridComponent, TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components';
+import { LineChart, BarChart, PieChart, BoxplotChart } from 'echarts/charts';
+import { UniversalTransition } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
 
-let allChart = [];
-const init = (dom) => {
-  const echartsChance = echarts$1.init(dom);
-  allChart.push(echartsChance);
-  return echartsChance;
-};
+echarts$1.use([
+  GraphicComponent,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  TitleComponent,
+  LineChart,
+  BarChart,
+  PieChart,
+  BoxplotChart,
+  CanvasRenderer,
+  UniversalTransition
+]);
 const draw = (dom, option) => {
-  const chart = init(dom);
+  const chart = echarts$1.init(dom);
   chart.clear();
   chart.setOption(option);
   return chart;
 };
-window.addEventListener("resize", () => {
-  allChart.forEach((item, index) => {
-    if (!item._dom.offsetWidth)
-      allChart[index] = void 0;
-    item && item.resize && item._dom.offsetWidth && item.resize();
-  });
-  allChart = allChart.filter((item) => item);
-});
 const echarts = {
   ...echarts$1,
-  init,
   draw
 };
 

package/dist/lib/aims/src/AirQualityCalendar/index.vue.js

@@ -184,6 +184,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           vue.createVNode(_component_el_date_picker, {
             modelValue: dateTime.value,
             "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => dateTime.value = $event),
+            teleported: false,
             type: "month",
             clearable: false,
             "disabled-date": pickerOptions,

package/dist/lib/aims/src/common/BasicEcharts/index.vue.js

@@ -3,26 +3,8 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
 const vue = require('vue');
-const echarts = require('echarts');
-
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
-  if (e) {
-    for (const k in e) {
-      if (k !== 'default') {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-const echarts__namespace = /*#__PURE__*/_interopNamespaceDefault(echarts);
+const index = require('../../../../wgms/utils/echarts/index.js');
+const utils = require('../../../../utils.js');
 
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
@@ -53,6 +35,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const props = __props;
     let myChart;
     const echartsDomRef = vue.ref(null);
+    const { isDark } = utils.useThemeHook();
     const resizeHandler = () => {
       myChart.resize();
     };
@@ -68,7 +51,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
     const cancalDebounce = debounce(resizeHandler, 50);
     vue.onMounted(() => {
-      myChart = echarts__namespace.init(echartsDomRef.value, { renderer: "svg" });
+      myChart = index.default.init(echartsDomRef.value, { renderer: "svg" });
       myChart.showLoading({
         text: "",
         color: "#409eff",
@@ -79,7 +62,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       });
       if (!props.loading) {
         myChart.hideLoading();
-        props.fullOptions.options && myChart.setOption(props.fullOptions.options, true);
+        props.fullOptions.options && myChart.setOption(utils.replaceVarStrings(props.fullOptions.options), true);
       }
       window.addEventListener("resize", cancalDebounce);
     });
@@ -87,10 +70,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       window.removeEventListener("resize", cancalDebounce);
       myChart.dispose();
     });
-    vue.watch(() => [props.fullOptions.options, props.loading], () => {
+    vue.watch(() => [props.fullOptions.options, props.loading, isDark.value], () => {
       if (!props.loading) {
         myChart.hideLoading();
-        myChart.setOption(props.fullOptions.options, false);
+        myChart.setOption(utils.replaceVarStrings(props.fullOptions.options), false);
       }
     }, { deep: true });
     return (_ctx, _cache) => {