var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
import { defineComponent, ref, onMounted, onUnmounted, createVNode } from "vue";
import * as echarts from "echarts";
import { toRefs } from "@vueuse/core";
const devuiChartProps = {
  option: {
    type: Object,
    default: {}
  }
};
const DARK_LINE_COLOR = "#4E5057";
const DARK_TITLE_COLOR = "#CED1DB";
const DARK_TEXT_COLOR = "#696C75";
const DARK_LEGEND_COLOR = "#868A99";
const DARK_AXIS_COLOR = "#4E5057";
const LIGHT_LINE_COLOR = "#D7D8DA";
const LIGHT_TITLE_COLOR = "#252B3A";
const LIGHT_TEXT_COLOR = "#9B9FA8";
const LIGHT_LEGEND_COLOR = "#71757F";
const LIGHT_AXIS_COLOR = "#D7D8DA";
const DEFAULT_BASIC_COLOR_PALETTE = [
  "#5C8DFF",
  "#BC94FF",
  "#54D2EB",
  "#A6DD82",
  "#FCDA6B",
  "#CA7ED6",
  "#7298F1",
  "#73CEA6",
  "#EDD249",
  "#CAABFF",
  "#85CAFF",
  "#93D99A",
  "#96ADFA",
  "#F4AF8F",
  "#A282E9",
  "#FFBB6B",
  "#69DBB9",
  "#76DBEF",
  "#B1CE4F",
  "#5DA4DC"
];
function axisCommon(type) {
  if (type === "dark") {
    return {
      axisLine: {
        lineStyle: {
          color: DARK_AXIS_COLOR
        }
      },
      axisTick: {
        lineStyle: {
          color: DARK_AXIS_COLOR
        }
      },
      axisLabel: {
        textStyle: {
          color: DARK_TEXT_COLOR
        }
      },
      splitLine: {
        lineStyle: {
          type: [3, 3],
          color: DARK_LINE_COLOR
        }
      }
    };
  } else {
    return {
      axisLine: {
        lineStyle: {
          color: LIGHT_AXIS_COLOR
        }
      },
      axisTick: {
        lineStyle: {
          color: LIGHT_AXIS_COLOR
        }
      },
      axisLabel: {
        textStyle: {
          color: LIGHT_TEXT_COLOR
        }
      },
      splitLine: {
        lineStyle: {
          type: [3, 3],
          color: LIGHT_LINE_COLOR
        }
      }
    };
  }
}
const DEVUI_ECHART_THEME = {
  defaultColorPalette: DEFAULT_BASIC_COLOR_PALETTE,
  defaultDarkTheme: {
    color: DEFAULT_BASIC_COLOR_PALETTE,
    tooltip: {
      axisPointer: {
        label: {
          show: false
        },
        lineStyle: {
          color: DARK_LINE_COLOR,
          width: 2,
          type: [2, 3]
        },
        crossStyle: {
          color: DARK_LINE_COLOR,
          width: 2,
          type: [2, 3]
        }
      },
      backgroundColor: "rgba(36,37,38,0.96)",
      extraCssText: "border-radius: 8px;box-shadow: 0 1px 4px 0 rgba(37,43,58,0.1)",
      borderWidth: 0,
      padding: [8, 8],
      textStyle: {
        color: DARK_LEGEND_COLOR,
        fontSize: 12
      }
    },
    virtualMap: {
      textStyle: {
        color: DARK_TEXT_COLOR
      }
    },
    legend: {
      height: "80%",
      width: "80%",
      textStyle: {
        color: DARK_LEGEND_COLOR
      }
    },
    textStyle: {
      color: DARK_TEXT_COLOR
    },
    title: {
      textStyle: {
        color: DARK_TITLE_COLOR
      }
    },
    toolbox: {
      iconStyle: {
        borderColor: DARK_LINE_COLOR
      }
    },
    dataZoom: {
      textStyle: {
        color: DARK_TEXT_COLOR
      }
    },
    timeline: {
      lineStyle: {
        color: DARK_LINE_COLOR
      },
      label: {
        textStyle: {
          color: DARK_TEXT_COLOR
        }
      }
    },
    timeAxis: axisCommon("dark"),
    logAxis: axisCommon("dark"),
    valueAxis: __spreadProps(__spreadValues({}, axisCommon("dark")), {
      axisLine: {
        show: false,
        lineStyle: {
          color: DARK_AXIS_COLOR
        }
      },
      axisTick: {
        show: false
      }
    }),
    categoryAxis: __spreadProps(__spreadValues({}, axisCommon("dark")), {
      axisLine: {
        show: true,
        lineStyle: {
          color: DARK_AXIS_COLOR
        }
      },
      axisTick: {
        show: false
      }
    }),
    line: {
      symbol: "circle"
    },
    graph: {
      color: DEFAULT_BASIC_COLOR_PALETTE
    },
    geo: {
      itemStyle: {
        borderColor: "#fff",
        areaColor: "#37383A"
      }
    }
  },
  defaultLightTheme: {
    color: DEFAULT_BASIC_COLOR_PALETTE,
    tooltip: {
      axisPointer: {
        label: {
          show: false
        },
        lineStyle: {
          color: LIGHT_LINE_COLOR,
          width: 2,
          type: [2, 3]
        },
        crossStyle: {
          color: LIGHT_LINE_COLOR,
          width: 2,
          type: [2, 3]
        }
      },
      backgroundColor: "rgba(255,255,255,0.96)",
      extraCssText: "border-radius: 8px;box-shadow: 0 1px 4px 0 rgba(37,43,58,0.1)",
      borderWidth: 0,
      padding: [8, 8],
      textStyle: {
        color: LIGHT_LEGEND_COLOR,
        fontSize: 12
      }
    },
    virtualMap: {
      textStyle: {
        color: LIGHT_TEXT_COLOR
      }
    },
    legend: {
      height: "80%",
      width: "80%",
      align: "left",
      textStyle: {
        color: LIGHT_LEGEND_COLOR
      }
    },
    textStyle: {
      color: LIGHT_TEXT_COLOR
    },
    title: {
      textStyle: {
        color: LIGHT_TITLE_COLOR
      }
    },
    toolbox: {
      iconStyle: {
        borderColor: LIGHT_LINE_COLOR
      }
    },
    dataZoom: {
      textStyle: {
        color: LIGHT_TEXT_COLOR
      }
    },
    timeline: {
      lineStyle: {
        color: LIGHT_LINE_COLOR
      },
      label: {
        textStyle: {
          color: LIGHT_TEXT_COLOR
        }
      }
    },
    timeAxis: axisCommon("light"),
    logAxis: axisCommon("light"),
    valueAxis: __spreadProps(__spreadValues({}, axisCommon("light")), {
      axisLine: {
        show: false,
        lineStyle: {
          color: LIGHT_AXIS_COLOR
        }
      },
      axisTick: {
        show: false
      }
    }),
    categoryAxis: __spreadProps(__spreadValues({}, axisCommon("light")), {
      axisLine: {
        show: true,
        lineStyle: {
          color: LIGHT_AXIS_COLOR
        }
      },
      axisTick: {
        show: false
      }
    }),
    line: {
      symbol: "emptyCircle",
      markPoint: {
        label: {
          show: true,
          color: LIGHT_TEXT_COLOR
        }
      }
    },
    graph: {
      color: DEFAULT_BASIC_COLOR_PALETTE
    },
    geo: {
      itemStyle: {
        borderColor: "#fff",
        areaColor: "#eaebed"
      }
    }
  }
};
var DChart = defineComponent({
  name: "DChart",
  props: devuiChartProps,
  emits: ["chartReady"],
  setup(props, {
    emit
  }) {
    const {
      option
    } = toRefs(props);
    let theme;
    let themeService;
    let isDark = false;
    let echartInstacne;
    let timer;
    const chartRef = ref();
    const themeChange = () => {
      var _a;
      isDark = !!((_a = themeService == null ? void 0 : themeService.currentTheme) == null ? void 0 : _a.isDark);
      theme = isDark ? DEVUI_ECHART_THEME.defaultDarkTheme : DEVUI_ECHART_THEME.defaultLightTheme;
      echartInstacne.dispose();
      echartInstacne = echarts.init(chartRef.value, theme);
      echartInstacne.setOption(option.value, true);
      console.log(option.value);
      emit("chartReady", echartInstacne);
    };
    const onresize = () => {
      clearTimeout(timer);
      timer = setTimeout(() => {
        echartInstacne.resize();
      }, 100);
    };
    onMounted(() => {
      var _a;
      themeService = window["devuiThemeService"];
      isDark = !!((_a = themeService == null ? void 0 : themeService.currentTheme) == null ? void 0 : _a.isDark);
      theme = isDark ? DEVUI_ECHART_THEME.defaultDarkTheme : DEVUI_ECHART_THEME.defaultLightTheme;
      echartInstacne = echarts.init(chartRef.value, theme);
      if (themeService) {
        themeService.eventBus.add("themeChanged", themeChange);
      }
      echartInstacne.setOption(option.value, true);
      emit("chartReady", echartInstacne);
      window.addEventListener("resize", onresize);
    });
    onUnmounted(() => {
      echartInstacne == null ? void 0 : echartInstacne.dispatchAction({
        type: "hideTip"
      });
      themeService.eventBus.remove("themeChanged", themeChange);
    });
    return () => createVNode("div", {
      "ref": chartRef,
      "class": "devui-charts"
    }, null);
  }
});
var index = {
  title: "Echarts \u56FE\u8868",
  category: "\u6F14\u8FDB\u4E2D",
  status: "100%",
  install(app) {
    app.component(DChart.name, DChart);
  }
};
export { DChart, index as default, devuiChartProps };
