super-page-runtime 2.0.9 → 2.0.13

package/dist/es/components/runtime/views/assemblys/chart/column-line/column-line-runtime.vue2.js

@@ -1,7 +1,7 @@
 import { defineComponent, ref, onMounted, watch, openBlock, createElementBlock, normalizeStyle, unref, normalizeClass, withDirectives, createVNode, vShow } from "vue";
-import { getCustomTheme } from "../../../../utils/charts/chart-util.js";
-import { deepCopy } from "../../../../utils/common-util.js";
-import { getChartDatasFromPage, updateChartDatasources, getValueFromSource, formatVariableValue } from "../../../../utils/page-helper-util.js";
+import { getCustomTheme, initChartOption, monitorChartClickToVariable } from "../../../../utils/charts/chart-util.js";
+import { getChartDatasFromPage, updateChartDatasources, monitorFieldChange } from "../../../../utils/page-helper-util.js";
+import { updateChartOption } from "../../../../utils/charts/chart-columnline-util.js";
 import _sfc_main$1 from "../common/common-chart-header.vue.js";
 import { use } from "echarts/core";
 import { CanvasRenderer } from "echarts/renderers";
@@ -31,50 +31,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const chartRef = ref(null);
     const headerRef = ref(null);
     const enableDrill = props.configure.props ? props.configure.props.enableDrill : null;
+    const drillEndTrigger = props.configure.props ? props.configure.props.drillEndTrigger : null;
+    const selGroupVariable = props.configure.props ? props.configure.props.selGroupVariable : null;
     const runtimeInfo = props.configure.runtime ? props.configure.runtime : {};
     const runtimeStyle = runtimeInfo.style;
     const runtimeClass = runtimeInfo.class;
     const dataConfig = runtimeInfo.dataConfig;
     const headerInfo = runtimeInfo.headerInfo ? runtimeInfo.headerInfo : {};
-    let cacheDatas = null;
     const chartOption = runtimeInfo.chartOption;
-    const defaultSeries = chartOption.series;
-    if (defaultSeries && defaultSeries.length > 0) {
-      for (let s of defaultSeries) {
-        s.data = [];
-      }
-    }
-    const defaultXaxis = chartOption.xAxis;
-    if (defaultXaxis && defaultXaxis.length > 0 && defaultXaxis[0].data) {
-      defaultXaxis[0].data = [];
-    }
-    const defaultYaxis = chartOption.yAxis;
-    if (defaultYaxis) {
-      for (let yAxis of defaultYaxis) {
-        if (yAxis.data) {
-          yAxis.data = [];
-        }
-      }
-    }
-    console.log("chartOption", chartOption);
     const configureProps = props.configure.props ? props.configure.props : {};
     const customTheme = getCustomTheme(configureProps.customTheme);
-    function updateChartDatas(resultData) {
-      if (!resultData) {
-        resultData = [];
-      }
-      resultData = resultData.length > 0 ? resultData[0] : {};
-      if (!resultData) {
-        resultData = {};
-      }
-      if (resultData.hasRender) {
-        resultData.hasRender = true;
-        console.log("重复更新!", resultData);
-        return;
-      }
-      resultData.hasRender = true;
-      updateChartOption(resultData);
-    }
+    initChartOption(props.configure, chartOption);
     onMounted(() => {
       const resultData = getChartDatasFromPage(props.pageContext, props.configure);
       if (resultData) {
@@ -83,12 +50,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (enableDrill && chartRef.value) {
         chartRef.value.chart.on("click", function(params) {
           if (headerRef.value && headerRef.value.drill) {
-            headerRef.value.drill(params, cacheDatas);
+            headerRef.value.drill(params, props.configure.cacheDatas);
           }
         });
       }
+      if (!enableDrill && selGroupVariable && chartRef.value) {
+        monitorChartClickToVariable(
+          props.pageContext,
+          props.configure,
+          chartRef.value.chart,
+          selGroupVariable
+        );
+      }
     });
     function onDrillEnd(params) {
+      if (drillEndTrigger == "clearDrill") {
+        if (headerRef.value && headerRef.value.closeDrill) {
+          headerRef.value.closeDrill(0);
+        }
+      }
     }
     let hisGroupValue = headerInfo.groupValue;
     watch(headerInfo, () => {
@@ -106,292 +86,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       dataConfig.services[0].groupValue = headerInfo.groupValue;
       updateChartDatasources(props.pageContext, [dataConfig], headerInfo.drillParams);
     }
-    function updateChartOption(resultData) {
-      if (!resultData || !resultData.result) {
-        return;
-      }
-      const result = resultData && resultData.result ? resultData.result : {};
-      const groupValue = resultData && resultData.groupValue ? resultData.groupValue : [];
-      const dataSetField = props.configure.serviceDataField;
-      let datas = null;
-      if (dataSetField) {
-        datas = result[dataSetField];
-      } else {
-        if (result) {
-          if (Array.isArray(result)) {
-            datas = result;
-          } else {
-            datas = [result];
-          }
-        }
-      }
-      if (!datas) {
-        datas = [];
-      }
-      let confGroups = props.configure.props ? props.configure.props.groups : null;
-      if (!confGroups) {
-        confGroups = [];
-      }
-      const groupMap = {};
-      const groupFields = [];
-      for (let g of confGroups) {
-        groupMap[g.group] = g.target;
-        if (g.target && !groupFields.includes(g.target)) {
-          groupFields.push(g.target);
-        }
-      }
-      let mulGroupShow = props.configure.props ? props.configure.props.mulGroupShow : "";
-      mulGroupShow = mulGroupShow == "break" ? "<br/>" : " ";
-      const xFieldName = "__x";
-      for (let d of datas) {
-        if (!d) {
-          continue;
-        }
-        const xValues2 = [];
-        for (let g of groupValue) {
-          const fieldName = groupMap[g];
-          const value = getValueFromSource(d, fieldName, void 0);
-          if (value) {
-            xValues2.push(value);
-          }
-        }
-        const xValue = xValues2.join(mulGroupShow);
-        d[xFieldName] = xValue;
-      }
-      const itemConfs = props.configure.items ? props.configure.items : [];
-      const serieValues = [];
-      const serieValueMap = {};
-      const dynamicFileds = [];
-      const dynamicValueField = {};
-      const allValueFields = [];
-      for (let item of itemConfs) {
-        const itemProps = item.props ? item.props : {};
-        const sourceType = itemProps.yaxisSource;
-        const yaxisField = itemProps.yaxisField;
-        let serieValue = null;
-        if (yaxisField && (!sourceType || sourceType == "variable")) {
-          serieValue = {
-            uuid: item.uuid,
-            type: "variable",
-            field: yaxisField,
-            data: [],
-            dynamicDatas: []
-            //动态系列数据
-          };
-          if (yaxisField && !allValueFields.includes(yaxisField)) {
-            allValueFields.push(yaxisField);
-          }
-        } else {
-          serieValue = {
-            uuid: item.uuid,
-            type: "fixed",
-            field: itemProps.yaxisFix,
-            data: [],
-            dynamicDatas: []
-            //动态系列数据
-          };
-        }
-        if (serieValue != null) {
-          serieValues.push(serieValue);
-          serieValueMap[item.uuid] = serieValue;
-        }
-        if (itemProps.dynamicSeriesField && // !groupFields.includes(itemProps.dynamicSeriesField) &&
-        !dynamicFileds.includes(itemProps.dynamicSeriesField) && serieValue && yaxisField) {
-          serieValue.dynamicField = itemProps.dynamicSeriesField;
-          serieValue.dynamicSeriesTitle = itemProps.dynamicSeriesTitle;
-          serieValue.dynamicShowStack = itemProps.dynamicShowStack;
-          dynamicFileds.push(itemProps.dynamicSeriesField);
-          dynamicValueField[itemProps.dynamicSeriesField] = yaxisField;
-        }
-      }
-      const dynamicLabelMap = {};
-      if (dynamicFileds.length > 0) {
-        const newDatas = [];
-        const dataMap = {};
-        for (let d of datas) {
-          if (!d) {
-            continue;
-          }
-          for (let valueField of allValueFields) {
-            const groupValue2 = d[xFieldName];
-            let newData = dataMap[groupValue2];
-            if (!newData) {
-              newData = {};
-              for (let gField of groupFields) {
-                newData[gField] = d[gField];
-              }
-              newData[xFieldName] = d[xFieldName];
-              dataMap[groupValue2] = newData;
-              newDatas.push(newData);
-            }
-            let newValue = getValueFromSource(d, valueField, void 0);
-            if (!isNaN(newValue)) {
-              const hisValue = newData[valueField];
-              if (!isNaN) {
-                newValue += hisValue;
-              }
-              newData[valueField] = newValue;
-            }
-          }
-        }
-        for (let dynamicField of dynamicFileds) {
-          const dynamicLabels = [];
-          for (let d of datas) {
-            if (!d) {
-              continue;
-            }
-            const groupValue2 = d[xFieldName];
-            let newData = dataMap[groupValue2];
-            if (!newData) {
-              continue;
-            }
-            let dynamicLabel = getValueFromSource(d, dynamicField, void 0);
-            dynamicLabel = dynamicLabel == null || dynamicLabel == void 0 ? "" : dynamicLabel;
-            if (!dynamicLabels.includes(dynamicLabel)) {
-              dynamicLabels.push(dynamicLabel);
-            }
-            const valueField = dynamicValueField[dynamicField];
-            let newValue = getValueFromSource(d, valueField, void 0);
-            if (!isNaN(newValue)) {
-              const hisValue = newData[dynamicLabel];
-              if (!isNaN) {
-                newValue += hisValue;
-              }
-              newData[dynamicLabel] = newValue;
-            }
-          }
-          dynamicLabelMap[dynamicField] = dynamicLabels;
-        }
-        datas = newDatas;
-      }
-      sortDatas(datas);
-      const xValues = [];
-      for (let data of datas) {
-        if (!data) {
-          continue;
-        }
-        xValues.push(data[xFieldName]);
-        for (let item of serieValues) {
-          let serieData = item.data;
-          const dynamicDatas = item.dynamicDatas;
-          if (item.dynamicField) {
-            let dynamicLabels = dynamicLabelMap[item.dynamicField];
-            dynamicLabels = dynamicLabels ? dynamicLabels : [];
-            for (let i = 0; i < dynamicLabels.length; i++) {
-              if (i >= dynamicDatas.length) {
-                dynamicDatas.push([]);
-              }
-              serieData = dynamicDatas[i];
-              const fieldName = dynamicLabels[i];
-              const value = getValueFromSource(data, fieldName, void 0);
-              serieData.push(value);
-            }
-          } else if (item.type == "fixed") {
-            serieData.push(item.field);
-          } else if (item.type == "variable") {
-            const value = getValueFromSource(data, item.field, void 0);
-            serieData.push(value);
-          } else {
-            serieData.push(void 0);
-          }
-        }
-      }
-      const tempSeries = deepCopy(defaultSeries == null ? [] : defaultSeries);
-      const newSeries = [];
-      for (let serie of tempSeries) {
-        const serieValue = serieValueMap[serie.uuid];
-        if (serieValue.dynamicField) {
-          let dynamicLabels = dynamicLabelMap[serieValue.dynamicField];
-          dynamicLabels = dynamicLabels ? dynamicLabels : [];
-          const dynamicDatas = serieValue.dynamicDatas ? serieValue.dynamicDatas : [];
-          for (let i = 0; i < dynamicLabels.length; i++) {
-            let label = dynamicLabels[i];
-            const newSerie = deepCopy(serie);
-            if (serieValue.dynamicSeriesTitle) {
-              const dynamicSeriesTitle = serieValue.dynamicSeriesTitle.replace("${name}", label);
-              newSerie.name = formatVariableValue(props.pageContext, dynamicSeriesTitle);
-            } else {
-              newSerie.name = label;
-            }
-            newSerie.data = i < dynamicDatas.length ? dynamicDatas[i] : [];
-            if (serie.type == "bar" && serieValue.dynamicShowStack) {
-              newSerie.stack = serie.uuid;
-            }
-            newSeries.push(newSerie);
-          }
-        } else {
-          serie.data = serieValue ? serieValue.data : [];
-          newSeries.push(serie);
-        }
-      }
-      chartOption.series = newSeries;
-      if (chartOption.isBar) {
-        if (defaultYaxis) {
-          for (let tempYaxis of defaultYaxis) {
-            tempYaxis.data = xValues;
-          }
-        }
-        chartOption.xAxis = defaultXaxis;
-        chartOption.yAxis = defaultYaxis;
-      } else {
-        if (defaultXaxis && defaultXaxis.length > 0) {
-          defaultXaxis[0].data = xValues;
-        }
-        chartOption.xAxis = defaultXaxis;
-        chartOption.yAxis = defaultYaxis;
+    const monitorFields = headerInfo.monitorFields;
+    monitorFieldChange(props.pageContext, monitorFields, refresh);
+    function updateChartDatas(resultData) {
+      if (!resultData) {
+        resultData = [];
       }
-      cacheDatas = datas;
-      console.log("chartOption", chartOption);
-    }
-    function sortDatas(datas) {
-      const itemConfs = props.configure.items ? props.configure.items : [];
-      let orderByTarget = props.configure.props ? props.configure.props.orderByTarget : "";
-      let orderField = null;
-      if (orderByTarget == "x" || orderByTarget == "X") {
-        orderField = "__x";
-      } else if (orderByTarget) {
-        for (let item of itemConfs) {
-          if (item.uuid == orderByTarget) {
-            const itemProps = item.props ? item.props : {};
-            const sourceType = itemProps.yaxisSource;
-            const yaxisField = itemProps.yaxisField;
-            if (yaxisField && (!sourceType || sourceType == "variable")) {
-              orderField = yaxisField;
-              break;
-            }
-          }
-        }
+      resultData = resultData.length > 0 ? resultData[0] : {};
+      if (!resultData) {
+        resultData = {};
       }
-      if (!orderField) {
+      if (resultData.hasRender) {
+        resultData.hasRender = true;
+        console.log("重复更新!", resultData);
         return;
       }
-      let orderSource = props.configure.props ? props.configure.props.orderSource : "";
-      let orderValue = props.configure.props ? props.configure.props.orderFix : "";
-      if (orderSource == "variable") {
-        let orderVariable = props.configure.props ? props.configure.props.orderVariable : "";
-        orderValue = formatVariableValue(props.pageContext, orderVariable);
-      }
-      orderValue = orderValue == "desc" || orderValue == "DESC" ? "desc" : "asc";
-      let maxLen = datas.length;
-      for (let i = 0; i < maxLen - 1; i++) {
-        let vali = getValueFromSource(datas[i], orderField, void 0);
-        for (let j = i + 1; j < maxLen; j++) {
-          let valj = getValueFromSource(datas[j], orderField, void 0);
-          let isSwap = false;
-          if ("desc" == orderValue) {
-            if (vali < valj) {
-              isSwap = true;
-            }
-          } else {
-            if (vali > valj) {
-              isSwap = true;
-            }
-          }
-          if (isSwap) {
-            [datas[i], datas[j]] = [datas[j], datas[i]];
-          }
-        }
-      }
+      resultData.hasRender = true;
+      updateChartOption(props.pageContext, props.configure, chartOption, resultData);
+      console.log("chartOption", chartOption);
     }
     __expose({
       updateChartDatas

package/dist/es/components/runtime/views/assemblys/chart/common/common-chart-header.vue.js

@@ -60,7 +60,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       props.headerInfo.groupValue = props.headerInfo.options[drillIndex].value;
     }
     __expose({
-      drill
+      drill,
+      closeDrill
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [

package/dist/es/components/runtime/views/assemblys/chart/gauge/gauge-runtime.vue2.js

@@ -1,5 +1,8 @@
-import { defineComponent, ref, openBlock, createElementBlock, normalizeStyle, unref, normalizeClass, createVNode } from "vue";
-import { getCustomTheme } from "../../../../utils/charts/chart-util.js";
+import { defineComponent, ref, onMounted, watch, openBlock, createElementBlock, normalizeStyle, unref, normalizeClass, withDirectives, createVNode, vShow } from "vue";
+import { getCustomTheme, initChartOption } from "../../../../utils/charts/chart-util.js";
+import { getChartDatasFromPage, updateChartDatasources, monitorFieldChange } from "../../../../utils/page-helper-util.js";
+import { updateChartOption } from "../../../../utils/charts/chart-gauge-util.js";
+import _sfc_main$1 from "../common/common-chart-header.vue.js";
 import { use } from "echarts/core";
 import { CanvasRenderer } from "echarts/renderers";
 import { GaugeChart } from "echarts/charts";
@@ -11,23 +14,66 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     pageContext: {},
     configure: {}
   },
-  setup(__props) {
-    use([
-      CanvasRenderer,
-      GaugeChart,
-      GridComponent,
-      TitleComponent,
-      TooltipComponent,
-      ToolboxComponent
-    ]);
+  setup(__props, { expose: __expose }) {
+    use([CanvasRenderer, GaugeChart, GridComponent, TitleComponent, TooltipComponent, ToolboxComponent]);
     const props = __props;
     const thisRef = ref(null);
+    const chartRef = ref(null);
+    const headerRef = ref(null);
     const runtimeInfo = props.configure.runtime ? props.configure.runtime : {};
     const runtimeStyle = runtimeInfo.style;
     const runtimeClass = runtimeInfo.class;
+    const dataConfig = runtimeInfo.dataConfig;
+    const headerInfo = runtimeInfo.headerInfo ? runtimeInfo.headerInfo : {};
     const chartOption = runtimeInfo.chartOption;
     const configureProps = props.configure.props ? props.configure.props : {};
     const customTheme = getCustomTheme(configureProps.customTheme);
+    initChartOption(props.configure, chartOption);
+    onMounted(() => {
+      const resultData = getChartDatasFromPage(props.pageContext, props.configure);
+      if (resultData) {
+        updateChartDatas(resultData);
+      }
+    });
+    let hisGroupValue = headerInfo.groupValue;
+    watch(headerInfo, () => {
+      if (hisGroupValue == headerInfo.groupValue) {
+        return;
+      }
+      hisGroupValue = headerInfo.groupValue;
+      refresh();
+    });
+    function refresh() {
+      if (!dataConfig) {
+        console.log("无数据源配置，不需要查询!");
+        return;
+      }
+      dataConfig.services[0].groupValue = headerInfo.groupValue;
+      updateChartDatasources(props.pageContext, [dataConfig], headerInfo.drillParams);
+    }
+    const monitorFields = headerInfo.monitorFields;
+    monitorFieldChange(props.pageContext, monitorFields, refresh);
+    function updateChartDatas(resultData) {
+      if (!resultData) {
+        resultData = [];
+      }
+      resultData = resultData.length > 0 ? resultData[0] : {};
+      if (!resultData) {
+        resultData = {};
+      }
+      if (resultData.hasRender) {
+        resultData.hasRender = true;
+        console.log("重复更新!", resultData);
+        return;
+      }
+      resultData.hasRender = true;
+      console.log("gauge resultData", resultData);
+      updateChartOption(props.pageContext, props.configure, chartOption, resultData);
+      console.log("chartOption", chartOption);
+    }
+    __expose({
+      updateChartDatas
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         style: normalizeStyle(unref(runtimeStyle)),
@@ -35,8 +81,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ref_key: "thisRef",
         ref: thisRef
       }, [
+        withDirectives(createVNode(_sfc_main$1, {
+          ref_key: "headerRef",
+          ref: headerRef,
+          headerInfo: unref(headerInfo)
+        }, null, 8, ["headerInfo"]), [
+          [vShow, unref(headerInfo).showHeader]
+        ]),
         createVNode(unref(VChart), {
-          ref: "chartRef",
+          ref_key: "chartRef",
+          ref: chartRef,
           theme: unref(customTheme),
           option: unref(chartOption),
           autoresize: ""

package/dist/es/components/runtime/views/assemblys/chart/pie/pie-runtime.vue2.js

@@ -1,5 +1,8 @@
-import { defineComponent, ref, openBlock, createElementBlock, normalizeStyle, unref, normalizeClass, createVNode } from "vue";
-import { getCustomTheme } from "../../../../utils/charts/chart-util.js";
+import { defineComponent, ref, onMounted, watch, openBlock, createElementBlock, normalizeStyle, unref, normalizeClass, withDirectives, createVNode, vShow } from "vue";
+import { getCustomTheme, initChartOption, monitorChartClickToVariable } from "../../../../utils/charts/chart-util.js";
+import { updateChartOption } from "../../../../utils/charts/chart-pie-util.js";
+import { getChartDatasFromPage, updateChartDatasources, monitorFieldChange } from "../../../../utils/page-helper-util.js";
+import _sfc_main$1 from "../common/common-chart-header.vue.js";
 import { use } from "echarts/core";
 import { CanvasRenderer } from "echarts/renderers";
 import { PieChart } from "echarts/charts";
@@ -11,7 +14,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     pageContext: {},
     configure: {}
   },
-  setup(__props) {
+  setup(__props, { expose: __expose }) {
     use([
       CanvasRenderer,
       PieChart,
@@ -23,12 +26,87 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     ]);
     const props = __props;
     const thisRef = ref(null);
+    const chartRef = ref(null);
+    const headerRef = ref(null);
+    const enableDrill = props.configure.props ? props.configure.props.enableDrill : null;
+    const drillEndTrigger = props.configure.props ? props.configure.props.drillEndTrigger : null;
+    const selGroupVariable = props.configure.props ? props.configure.props.selGroupVariable : null;
     const runtimeInfo = props.configure.runtime ? props.configure.runtime : {};
     const runtimeStyle = runtimeInfo.style;
     const runtimeClass = runtimeInfo.class;
+    const dataConfig = runtimeInfo.dataConfig;
+    const headerInfo = runtimeInfo.headerInfo ? runtimeInfo.headerInfo : {};
     const chartOption = runtimeInfo.chartOption;
     const configureProps = props.configure.props ? props.configure.props : {};
     const customTheme = getCustomTheme(configureProps.customTheme);
+    initChartOption(props.configure, chartOption);
+    onMounted(() => {
+      const resultData = getChartDatasFromPage(props.pageContext, props.configure);
+      if (resultData) {
+        updateChartDatas(resultData);
+      }
+      if (enableDrill && chartRef.value) {
+        chartRef.value.chart.on("click", function(params) {
+          if (headerRef.value && headerRef.value.drill) {
+            headerRef.value.drill(params, props.configure.cacheDatas);
+          }
+        });
+      }
+      if (!enableDrill && selGroupVariable && chartRef.value) {
+        monitorChartClickToVariable(
+          props.pageContext,
+          props.configure,
+          chartRef.value.chart,
+          selGroupVariable
+        );
+      }
+    });
+    function onDrillEnd(params) {
+      if (drillEndTrigger == "clearDrill") {
+        if (headerRef.value && headerRef.value.closeDrill) {
+          headerRef.value.closeDrill(0);
+        }
+      }
+    }
+    let hisGroupValue = headerInfo.groupValue;
+    watch(headerInfo, () => {
+      if (hisGroupValue == headerInfo.groupValue) {
+        return;
+      }
+      hisGroupValue = headerInfo.groupValue;
+      refresh();
+    });
+    function refresh() {
+      if (!dataConfig) {
+        console.log("无数据源配置，不需要查询!");
+        return;
+      }
+      dataConfig.services[0].groupValue = headerInfo.groupValue;
+      updateChartDatasources(props.pageContext, [dataConfig], headerInfo.drillParams);
+    }
+    const monitorFields = headerInfo.monitorFields;
+    monitorFieldChange(props.pageContext, monitorFields, refresh);
+    function updateChartDatas(resultData) {
+      if (!resultData) {
+        resultData = [];
+      }
+      resultData = resultData.length > 0 ? resultData[0] : {};
+      if (!resultData) {
+        resultData = {};
+      }
+      if (resultData.hasRender) {
+        resultData.hasRender = true;
+        console.log("重复更新!", resultData);
+        return;
+      }
+      resultData.hasRender = true;
+      console.log("pie resultData", resultData);
+      updateChartOption(props.pageContext, props.configure, chartOption, resultData);
+      console.log("chartOption", chartOption);
+    }
+    __expose({
+      updateChartDatas
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         style: normalizeStyle(unref(runtimeStyle)),
@@ -36,8 +114,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ref_key: "thisRef",
         ref: thisRef
       }, [
+        withDirectives(createVNode(_sfc_main$1, {
+          ref_key: "headerRef",
+          ref: headerRef,
+          headerInfo: unref(headerInfo),
+          onDrillEnd
+        }, null, 8, ["headerInfo"]), [
+          [vShow, unref(headerInfo).showHeader]
+        ]),
         createVNode(unref(VChart), {
-          ref: "chartRef",
+          ref_key: "chartRef",
+          ref: chartRef,
           theme: unref(customTheme),
           option: unref(chartOption),
           autoresize: ""