import { defineComponent as w, ref as x, reactive as _, computed as s, onMounted as k, nextTick as j, onBeforeUnmount as R, watch as h, openBlock as B, createElementBlock as D, normalizeStyle as y, normalizeClass as N, renderSlot as p, createElementVNode as H, createVNode as I, withCtx as P } from "vue";
import * as f from "echarts";
import { C as r } from "../Shared/base-PQGakkrl.js";
import { C as T } from "../Shared/index-BnerInzC.js";
import { R as A } from "../Shared/resize-kOWxHVSP.js";
import { C as F } from "../Shared/Ing-C_3NkQxd.js";
const M = [
  "#2ec7c9",
  "#b6a2de",
  "#5ab1ef",
  "#ffb980",
  "#d87a80",
  "#8d98b3",
  "#e5cf0d",
  "#97b552",
  "#95706d",
  "#dc69aa",
  "#07a2a4",
  "#9a7fd1",
  "#588dd5",
  "#f5994e",
  "#c05050",
  "#59678c",
  "#c9ab00",
  "#7eb00a",
  "#6f5553",
  "#c14089"
], W = {
  color: M,
  title: {
    textStyle: {
      fontWeight: "normal",
      color: "#008acd"
    }
  },
  visualMap: {
    itemWidth: 15,
    color: ["#5ab1ef", "#e0ffff"]
  },
  /*  toolbox: {
      iconStyle: {
          normal: {
              borderColor: colorPalette[0],
          },
      },
  }, */
  tooltip: {
    backgroundColor: "rgba(50,50,50,0.5)",
    axisPointer: {
      type: "line",
      lineStyle: {
        color: "#008acd"
      },
      crossStyle: {
        color: "#008acd"
      },
      shadowStyle: {
        color: "rgba(200,200,200,0.2)"
      }
    }
  },
  dataZoom: {
    dataBackgroundColor: "#efefff",
    fillerColor: "rgba(182,162,222,0.2)",
    handleColor: "#008acd"
  },
  grid: {
    borderColor: "#eee"
  },
  categoryAxis: {
    axisLine: {
      lineStyle: {
        color: "#008acd"
      }
    },
    splitLine: {
      lineStyle: {
        color: ["#eee"]
      }
    }
  },
  valueAxis: {
    axisLine: {
      lineStyle: {
        color: "#008acd"
      }
    },
    splitArea: {
      show: !0,
      areaStyle: {
        color: ["rgba(250,250,250,0.1)", "rgba(200,200,200,0.1)"]
      }
    },
    splitLine: {
      lineStyle: {
        color: ["#eee"]
      }
    }
  },
  timeline: {
    lineStyle: {
      color: "#008acd"
    },
    controlStyle: {
      color: "#008acd",
      borderColor: "#008acd"
    },
    symbol: "emptyCircle",
    symbolSize: 3
  },
  line: {
    smooth: !0,
    symbol: "emptyCircle",
    symbolSize: 3
  },
  candlestick: {
    itemStyle: {
      color: "#d87a80",
      color0: "#2ec7c9"
    },
    lineStyle: {
      width: 1,
      color: "#d87a80",
      color0: "#2ec7c9"
    },
    areaStyle: {
      color: "#2ec7c9",
      color0: "#b6a2de"
    }
  },
  scatter: {
    symbol: "circle",
    symbolSize: 4
  },
  map: {
    /*  itemStyle: {
        color: "#ddd",
    },
    areaStyle: {
        color: "#fe994e",
    },
    label: {
        color: "#d87a80",
    }, */
    itemStyle: {
      color: "#2ec7c9"
      // 省会圆点
    },
    label: {
      color: "#000000"
    }
  },
  graph: {
    itemStyle: {
      color: "#d87a80"
    },
    linkStyle: {
      color: "#2ec7c9"
    }
  },
  gauge: {
    axisLine: {
      lineStyle: {
        color: [
          [0.2, "#2ec7c9"],
          [0.8, "#5ab1ef"],
          [1, "#d87a80"]
        ],
        width: 10
      }
    },
    axisTick: {
      splitNumber: 10,
      length: 15,
      lineStyle: {
        color: "auto"
      }
    },
    splitLine: {
      length: 22,
      lineStyle: {
        color: "auto"
      }
    },
    pointer: {
      width: 5
    }
  }
}, Q = /* @__PURE__ */ w({
  name: "ClEcharts",
  __name: "Index",
  props: {
    chartOption: Object,
    className: String,
    height: {
      type: [Number, String],
      default: 400
    },
    isRunLoad: {
      type: Boolean,
      default: !1
    }
  },
  emits: ["onInitFirst", "onHideResize"],
  setup(u, { expose: b, emit: g }) {
    f.registerTheme("macarons", W);
    const a = u, n = g, l = x(null), i = _({
      isShowLoad: a.isRunLoad,
      isEmptyData: !1
    }), t = {
      resizeEvent: null,
      chartObject: null
    }, S = s(() => {
      const e = {
        "chart-loading": i.isShowLoad || i.isEmptyData
      };
      return a.className && !r.isEmpty(a.className) && a.className.split(" ").forEach((o) => {
        r.isEmpty(o) || (e[o] = !0);
      }), e;
    }), C = s(() => {
      const e = {};
      return (i.isShowLoad || i.isEmptyData) && (e.height = "100%"), e;
    }), E = s(() => {
      const e = {}, { height: o } = a;
      if (!r.isEmpty(o)) {
        const d = o;
        e.height = r.isString(d) ? d : `${o}px`;
      }
      return e;
    }), z = () => {
      n("onHideResize");
    }, L = () => {
      n("onInitFirst");
    }, c = () => {
      t.chartObject && t.chartObject.resize();
    }, m = (e) => {
      const o = r.isEmpty(e);
      i.isEmptyData = o, o || (t.chartObject || (t.chartObject = f.init(l.value, "macarons"), setTimeout(() => {
        L();
      }, 50)), t.chartObject.setOption(e, !0), c());
    }, O = () => {
      t.chartObject && (T.isHiddenParent(l.value) ? z() : c());
    }, v = () => {
      r.isEmpty(a.chartOption) || m(a.chartOption);
    };
    return k(() => {
      t.resizeEvent = new A({
        callback: () => {
          O();
        }
      }), j(() => {
        v();
      });
    }), R(() => {
      t.resizeEvent && t.resizeEvent.destroy();
    }), h(
      () => a.isRunLoad,
      (e) => {
        i.isShowLoad = e;
      }
    ), h(
      () => a.chartOption,
      (e) => {
        m(e);
      }
    ), b({
      getChartObject: () => t.chartObject,
      getChartElement: () => l.value,
      resize: () => {
        c();
      }
    }), (e, o) => (B(), D("div", {
      class: N(S.value),
      style: y(C.value)
    }, [
      p(e.$slots, "chartHead"),
      H("div", {
        ref_key: "refElChart",
        ref: l,
        style: y(E.value)
      }, null, 4),
      I(F, {
        isLoadIng: i.isShowLoad,
        isEmpty: i.isEmptyData
      }, {
        nothingData: P(() => [
          p(e.$slots, "nothingData")
        ]),
        _: 3
      }, 8, ["isLoadIng", "isEmpty"])
    ], 6));
  }
});
export {
  Q as default
};
//# sourceMappingURL=ClEcharts.js.map
