@v-charts2/histogram/lib/vue3/v-charts.histogram.es.js

echarts 柱状图

/* eslint-disable */
/**
 * name: @v-charts2/histogram
 * version: v1.0.1-alpha.4
 * author: vxhly <pengchengou@gmail.com>
 */
var __defProp = Object.defineProperty;
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;
};
import numerify from "numerify";
import { isFunction, cloneDeep, get, set, isArray, isObject, debounce, isEqual, camelToKebab, getType } from "utils-lite";
import { TitleComponent, TooltipComponent, GridComponent, DatasetComponent, TransformComponent, LegendComponent } from "echarts/components";
import * as echartsLib from "echarts/core";
import { LabelLayout, UniversalTransition } from "echarts/features";
import { SVGRenderer, CanvasRenderer } from "echarts/renderers";
import { computed, h, nextTick, watch, onMounted, onBeforeUnmount } from "vue";
import { BarChart } from "echarts/charts";
const name$2 = "@v-charts2/histogram";
const version$2 = "1.0.1-alpha.4";
const name$1 = "@v-charts2/core";
const version$1 = "1.0.1-alpha.4";
const DEFAULT_THEME = {
  categoryAxis: {
    axisLine: { show: false },
    axisTick: { show: false },
    splitLine: { show: false }
  },
  valueAxis: { axisLine: { show: false } },
  line: { smooth: true },
  legend: { top: 20 },
  grid: {
    containLabel: true,
    top: 100,
    left: 20,
    right: 20,
    bottom: 20
  }
};
const DEFAULT_COLORS = [
  "#19d4ae",
  "#5ab1ef",
  "#fa6e86",
  "#ffb980",
  "#0067a6",
  "#c4b4e4",
  "#d87a80",
  "#9cbbff",
  "#d9d0c7",
  "#87a997",
  "#d49ea2",
  "#5b4947",
  "#7ba3a8"
];
const itemPoint = (color) => {
  return [
    '<span style="',
    `background-color:${color};`,
    "display: inline-block;",
    "width: 10px;",
    "height: 10px;",
    "border-radius: 50%;",
    "margin-right:2px;",
    '"></span>'
  ].join("");
};
const STATIC_PROPS = [
  "initOptions",
  "loading",
  "dataEmpty",
  "judgeWidth",
  "widthChangeDelay"
];
const ECHARTS_SETTINGS = [
  "grid",
  "dataZoom",
  "visualMap",
  "toolbox",
  "title",
  "legend",
  "xAxis",
  "yAxis",
  "radar",
  "tooltip",
  "axisPointer",
  "brush",
  "geo",
  "timeline",
  "graphic",
  "series",
  "backgroundColor",
  "textStyle"
];
echartsLib.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LabelLayout,
  UniversalTransition,
  SVGRenderer,
  CanvasRenderer,
  LegendComponent
]);
const getFormated = (val, type, digit, defaultVal = "-") => {
  if (isNaN(val))
    return defaultVal;
  if (!type)
    return val;
  if (isFunction(type))
    return type(val, numerify);
  digit = isNaN(digit) ? 0 : ++digit;
  const digitStr = `.[${new Array(digit).join(0)}]`;
  let formatter = type;
  switch (type) {
    case "KMB":
      formatter = digit ? `0,0${digitStr}a` : "0,0a";
      break;
    case "normal":
      formatter = digit ? `0,0${digitStr}` : "0,0";
      break;
    case "percent":
      formatter = digit ? `0,0${digitStr}%` : "0,0.[00]%";
      break;
  }
  return numerify(val, formatter);
};
const getStackMap = (stack) => {
  const stackMap = {};
  Object.keys(stack).forEach((item) => {
    stack[item].forEach((name2) => {
      stackMap[name2] = item;
    });
  });
  return stackMap;
};
function logCopyRight(packageName, packageVersion) {
  console.log(`
 %c author %c vxhly %c %c email %c <pengchengou@gmail.com> %c 

 %c ${name$1} %c v${version$1} %c %c ${packageName} %c v${packageVersion}  
`, "color: #fff; background: #5A5A5A; padding:5px;", "color: #fff; background: #4FC921; padding:5px;", "content:' '", "color: #fff; background: #5A5A5A; padding:5px;", "color: #fff;background: #1890ff; padding:5px 0;", "content:' '", "color: #fff; background: #5A5A5A; padding:5px;", "color: #fff;background: #E77335; padding:5px 0;", "content:' '", "color: #fff; background: #5A5A5A; padding:5px;", "color: #fff;background: #E77335; padding:5px 0;");
}
const VALUE_AXIS_OPACITY = 0.5;
function getBarDimAxis(args) {
  const {
    innerRows,
    dimAxisName,
    dimension,
    axisVisible,
    dimAxisType,
    dims
  } = args;
  return dimension.map((item) => ({
    type: "category",
    name: dimAxisName,
    nameLocation: "middle",
    nameGap: 22,
    data: dimAxisType === "value" ? getValueAxisData(dims) : innerRows.map((row) => row[item]),
    axisLabel: {
      formatter(v) {
        return String(v);
      }
    },
    show: axisVisible
  }));
}
function getValueAxisData(dims) {
  const max = Math.max.apply(null, dims);
  const min = Math.min.apply(null, dims);
  const result = [];
  for (let i = min; i <= max; i++) {
    result.push(i);
  }
  return result;
}
function getBarMeaAxis(args) {
  const {
    meaAxisName,
    meaAxisType,
    axisVisible,
    digit,
    scale,
    min,
    max
  } = args;
  const meaAxisBase = {
    type: "value",
    axisTick: { show: false },
    show: axisVisible
  };
  const meaAxis = [];
  for (let i = 0; i < 2; i++) {
    if (meaAxisType[i]) {
      meaAxis[i] = Object.assign({}, meaAxisBase, {
        axisLabel: {
          formatter(val) {
            return getFormated(val, meaAxisType[i], digit);
          }
        }
      });
    } else {
      meaAxis[i] = Object.assign({}, meaAxisBase);
    }
    meaAxis[i].name = meaAxisName[i] || "";
    meaAxis[i].scale = scale[i] || false;
    meaAxis[i].min = min[i] || null;
    meaAxis[i].max = max[i] || null;
  }
  return meaAxis;
}
function getBarTooltip(args) {
  const {
    axisSite,
    isHistogram,
    meaAxisType,
    digit,
    labelMap
  } = args;
  let secondAxis = isHistogram ? axisSite.right || [] : axisSite.top || [];
  if (labelMap) {
    secondAxis = secondAxis.map((item) => {
      return labelMap[item] === void 0 ? item : labelMap[item];
    });
  }
  return {
    trigger: "axis",
    formatter(items) {
      const tpl = [];
      tpl.push(`${items[0].name}<br>`);
      items.forEach((item) => {
        const seriesName = item.seriesName;
        const type = ~secondAxis.indexOf(seriesName) ? meaAxisType[1] : meaAxisType[0];
        tpl.push(itemPoint(item.color));
        tpl.push(`${seriesName}: `);
        tpl.push(getFormated(item.value, type, digit));
        tpl.push("<br>");
      });
      return tpl.join("");
    }
  };
}
function getValueData(seriesTemp, dims) {
  const max = Math.max.apply(null, dims);
  const min = Math.min.apply(null, dims);
  const result = [];
  for (let i = min; i <= max; i++) {
    const index = dims.indexOf(i);
    if (~index) {
      result.push(seriesTemp[index]);
    } else {
      result.push(null);
    }
  }
  return result;
}
function getBarSeries(args) {
  const {
    innerRows,
    metrics,
    stack,
    axisSite,
    isHistogram,
    labelMap,
    itemStyle,
    label,
    showLine = [],
    dimAxisType,
    barGap,
    opacity,
    dims
  } = args;
  let series = [];
  const seriesTemp = {};
  const secondAxis = isHistogram ? axisSite.right || [] : axisSite.top || [];
  const secondDimAxisIndex = isHistogram ? "yAxisIndex" : "xAxisIndex";
  const stackMap = stack && getStackMap(stack);
  metrics.forEach((item) => {
    seriesTemp[item] = [];
  });
  innerRows.forEach((row) => {
    metrics.forEach((item) => {
      seriesTemp[item].push(row[item]);
    });
  });
  series = Object.keys(seriesTemp).map((item, index) => {
    const data = dimAxisType === "value" ? getValueData(seriesTemp[item], dims) : seriesTemp[item];
    const seriesItem = {
      name: labelMap[item] != null ? labelMap[item] : item,
      type: ~showLine.indexOf(item) ? "line" : "bar",
      data,
      [secondDimAxisIndex]: ~secondAxis.indexOf(item) ? "1" : "0"
    };
    if (stack && stackMap[item])
      seriesItem.stack = stackMap[item];
    if (label)
      seriesItem.label = label;
    if (itemStyle)
      seriesItem.itemStyle = itemStyle;
    let itemOpacity = opacity || get(seriesItem, "itemStyle.opacity");
    if (dimAxisType === "value") {
      seriesItem.barGap = barGap;
      seriesItem.barCategoryGap = "1%";
      if (itemOpacity == null)
        itemOpacity = VALUE_AXIS_OPACITY;
    }
    if (itemOpacity != null) {
      set(seriesItem, "itemStyle.opacity", itemOpacity);
    }
    return seriesItem;
  });
  return series.length ? series : false;
}
function getLegend(args) {
  const {
    metrics,
    labelMap,
    legendName
  } = args;
  if (!legendName && !labelMap)
    return { data: metrics };
  const data = labelMap ? metrics.map((item) => labelMap[item] == null ? item : labelMap[item]) : metrics;
  return {
    data,
    formatter(name2) {
      return legendName[name2] != null ? legendName[name2] : name2;
    }
  };
}
function getDims(rows, dimension) {
  return rows.map((row) => row[dimension[0]]);
}
const bar = (columns, rows, settings, extra) => {
  const innerRows = cloneDeep(rows);
  const {
    axisSite = {},
    dimension = [columns[0]],
    stack = {},
    axisVisible = true,
    digit = 2,
    dataOrder = false,
    scale = [false, false],
    min = [null, null],
    max = [null, null],
    legendName = {},
    labelMap = {},
    label,
    itemStyle,
    showLine,
    barGap = "-100%",
    opacity
  } = settings;
  const {
    tooltipVisible,
    legendVisible
  } = extra;
  let metrics = columns.slice();
  if (axisSite.top && axisSite.bottom) {
    metrics = axisSite.top.concat(axisSite.bottom);
  } else if (axisSite.bottom && !axisSite.right) {
    metrics = axisSite.bottom;
  } else if (settings.metrics) {
    metrics = settings.metrics;
  } else {
    metrics.splice(columns.indexOf(dimension[0]), 1);
  }
  const meaAxisType = settings.xAxisType || ["normal", "normal"];
  const dimAxisType = settings.yAxisType || "category";
  const meaAxisName = settings.xAxisName || [];
  const dimAxisName = settings.yAxisName || "";
  const isHistogram = false;
  if (dataOrder) {
    const {
      label: label2,
      order
    } = dataOrder;
    if (!label2 || !order) {
      console.warn("Need to provide name and order parameters");
    } else {
      innerRows.sort((a, b) => {
        if (order === "desc") {
          return a[label2] - b[label2];
        } else {
          return b[label2] - a[label2];
        }
      });
    }
  }
  const dims = getDims(innerRows, dimension);
  const legend = legendVisible && getLegend({
    metrics,
    labelMap,
    legendName
  });
  const yAxis = getBarDimAxis({
    innerRows,
    dimAxisName,
    dimension,
    axisVisible,
    dimAxisType,
    dims
  });
  const xAxis = getBarMeaAxis({
    meaAxisName,
    meaAxisType,
    axisVisible,
    digit,
    scale,
    min,
    max
  });
  const series = getBarSeries({
    innerRows,
    metrics,
    stack,
    axisSite,
    isHistogram,
    labelMap,
    itemStyle,
    label,
    showLine,
    dimAxisType,
    dimension,
    barGap,
    opacity,
    dims
  });
  const tooltipParams = {
    axisSite,
    isHistogram,
    meaAxisType,
    digit,
    labelMap
  };
  const tooltip = tooltipVisible && getBarTooltip(tooltipParams);
  const options = {
    legend,
    yAxis,
    series,
    xAxis,
    tooltip
  };
  return options;
};
const histogram = (columns, rows, settings, status) => {
  const innerRows = cloneDeep(rows);
  const {
    axisSite = {},
    dimension = [columns[0]],
    stack = {},
    axisVisible = true,
    digit = 2,
    dataOrder = false,
    scale = [false, false],
    min = [null, null],
    max = [null, null],
    labelMap = {},
    legendName = {},
    label,
    itemStyle,
    showLine,
    barGap = "-100%",
    opacity
  } = settings;
  if (dataOrder) {
    const {
      label: label2,
      order
    } = dataOrder;
    if (!label2 || !order) {
      console.warn("Need to provide name and order parameters");
    } else {
      innerRows.sort((a, b) => {
        if (order === "desc") {
          return a[label2] - b[label2];
        } else {
          return b[label2] - a[label2];
        }
      });
    }
  }
  const {
    tooltipVisible,
    legendVisible
  } = status;
  let metrics = columns.slice();
  if (axisSite.left && axisSite.right) {
    metrics = axisSite.left.concat(axisSite.right);
  } else if (axisSite.left && !axisSite.right) {
    metrics = axisSite.left;
  } else if (settings.metrics) {
    metrics = settings.metrics;
  } else {
    metrics.splice(columns.indexOf(dimension[0]), 1);
  }
  const meaAxisType = settings.yAxisType || ["normal", "normal"];
  const dimAxisType = settings.xAxisType || "category";
  const meaAxisName = settings.yAxisName || [];
  const dimAxisName = settings.xAxisName || "";
  const isHistogram = true;
  const dims = getDims(innerRows, dimension);
  const legend = legendVisible && getLegend({
    metrics,
    labelMap,
    legendName
  });
  const xAxis = getBarDimAxis({
    innerRows,
    dimAxisName,
    dimension,
    axisVisible,
    dimAxisType,
    dims
  });
  const yAxis = getBarMeaAxis({
    meaAxisName,
    meaAxisType,
    axisVisible,
    digit,
    scale,
    min,
    max
  });
  const series = getBarSeries({
    innerRows,
    metrics,
    stack,
    axisSite,
    isHistogram,
    labelMap,
    itemStyle,
    label,
    showLine,
    dimAxisType,
    dimension,
    barGap,
    opacity,
    dims
  });
  const tooltipParams = {
    axisSite,
    isHistogram,
    meaAxisType,
    digit,
    labelMap
  };
  const tooltip = tooltipVisible && getBarTooltip(tooltipParams);
  const options = {
    legend,
    yAxis,
    series,
    xAxis,
    tooltip
  };
  return options;
};
const name = "@v-charts2/bar";
const version = "1.0.1-alpha.4";
const props = {
  data: {
    type: [Object, Array],
    default() {
      return {};
    }
  },
  settings: {
    type: Object,
    default() {
      return {};
    }
  },
  width: {
    type: String,
    default: "auto"
  },
  height: {
    type: String,
    default: "400px"
  },
  beforeConfig: { type: Function },
  afterConfig: { type: Function },
  afterSetOption: { type: Function },
  afterSetOptionOnce: { type: Function },
  events: { type: Object },
  grid: { type: [Object, Array] },
  colors: { type: Array },
  tooltipVisible: {
    type: Boolean,
    default: true
  },
  legendVisible: {
    type: Boolean,
    default: true
  },
  legendPosition: { type: String },
  markLine: { type: Object },
  markArea: { type: Object },
  markPoint: { type: Object },
  visualMap: { type: [Object, Array] },
  dataZoom: { type: [Object, Array] },
  toolbox: { type: [Object, Array] },
  initOptions: {
    type: Object,
    default() {
      return {};
    }
  },
  title: [Object, Array],
  legend: [Object, Array],
  xAxis: [Object, Array],
  yAxis: [Object, Array],
  radar: Object,
  tooltip: Object,
  axisPointer: [Object, Array],
  brush: [Object, Array],
  geo: [Object, Array],
  timeline: [Object, Array],
  graphic: [Object, Array],
  series: [Object, Array],
  backgroundColor: [Object, String],
  textStyle: [Object, Array],
  animation: Object,
  theme: Object,
  themeName: String,
  loading: Boolean,
  dataEmpty: Boolean,
  extend: Object,
  judgeWidth: {
    type: Boolean,
    default: false
  },
  widthChangeDelay: {
    type: Number,
    default: 300
  },
  tooltipFormatter: { type: Function },
  resizeable: {
    type: Boolean,
    default: true
  },
  resizeDelay: {
    type: Number,
    default: 200
  },
  changeDelay: {
    type: Number,
    default: 0
  },
  setOptionOpts: {
    type: [Boolean, Object],
    default: true
  },
  cancelResizeCheck: Boolean,
  notSetUnchange: Array,
  log: Boolean,
  renderer: {
    type: String,
    default: "canvas",
    validator: (val) => {
      return ["svg", "canvas"].indexOf(val) > -1;
    }
  }
};
function setAnimation(options, animation) {
  Object.keys(animation).forEach((key) => {
    options[key] = animation[key];
  });
}
function setExtend(options, extend) {
  Object.keys(extend).forEach((attr) => {
    const value = extend[attr];
    if (~attr.indexOf(".")) {
      set(options, attr, value);
    } else if (typeof value === "function") {
      options[attr] = value(options[attr]);
    } else {
      if (isArray(options[attr]) && isObject(options[attr][0])) {
        options[attr].forEach((option, index) => {
          options[attr][index] = Object.assign({}, option, value);
        });
      } else if (isObject(options[attr])) {
        options[attr] = Object.assign({}, options[attr], value);
      } else {
        options[attr] = value;
      }
    }
  });
}
function setMark(seriesItem, marks) {
  Object.keys(marks).forEach((key) => {
    if (marks[key])
      seriesItem[key] = marks[key];
  });
}
const init = ({
  echarts,
  props: props2,
  canvas,
  options
} = {}) => {
  if (echarts)
    return;
  const {
    registeredEvents,
    _once,
    el
  } = options;
  const themeName = (props2 == null ? void 0 : props2.themeName) || (props2 == null ? void 0 : props2.theme) || DEFAULT_THEME;
  echarts = echartsLib.init(canvas, themeName, __spreadValues({
    renderer: props2 == null ? void 0 : props2.renderer
  }, props2 == null ? void 0 : props2.initOptions));
  if (props2 == null ? void 0 : props2.data) {
    changeHandler({
      props: props2,
      options,
      echarts
    });
  }
  createEventProxy({
    registeredEvents,
    echarts,
    props: props2
  });
  if (props2 == null ? void 0 : props2.resizeable) {
    addResizeListener({
      _once,
      props: props2,
      el,
      echarts
    });
  }
  return { echarts };
};
const changeHandler = ({
  props: props2,
  options,
  echarts
} = {}) => {
  return debounce(dataHandler({
    props: props2,
    options,
    echarts
  }), props2 == null ? void 0 : props2.changeDelay);
};
const resizeHandler = ({
  props: props2,
  el,
  echarts
} = {}) => {
  return debounce(resize({
    props: props2,
    el,
    echarts
  }), props2 == null ? void 0 : props2.resizeDelay);
};
const createEventProxy = ({
  registeredEvents,
  echarts,
  props: props2
}) => {
  const keys = Object.keys((props2 == null ? void 0 : props2.events) || {});
  keys.length && keys.forEach((ev) => {
    if (registeredEvents.indexOf(ev) === -1) {
      registeredEvents.push(ev);
      echarts.on(ev, function(ev2) {
        return function(...args) {
          if (ev2 in props2.events) {
            props2 == null ? void 0 : props2.events[ev2].apply(null, args);
          }
        };
      }(ev));
    }
  });
};
const addResizeListener = ({
  _once,
  props: props2,
  el,
  echarts
}) => {
  window.addEventListener("resize", () => resizeHandler({
    props: props2,
    el,
    echarts
  }));
  _once.onresize = true;
};
const removeResizeListener = ({ _once }) => {
  window.removeEventListener("resize", resizeHandler);
  _once.onresize = false;
};
const dataHandler = ({
  props: props2,
  options,
  echarts
} = {}) => {
  const {
    chartHandler,
    chartColor,
    _once
  } = options;
  if (!chartHandler)
    return;
  let data = props2 == null ? void 0 : props2.data;
  const {
    columns = [],
    rows = []
  } = data;
  const extra = {
    tooltipVisible: props2 == null ? void 0 : props2.tooltipVisible,
    legendVisible: props2 == null ? void 0 : props2.legendVisible,
    echarts,
    color: chartColor,
    tooltipFormatter: props2 == null ? void 0 : props2.tooltipFormatter,
    _once
  };
  if (props2 == null ? void 0 : props2.beforeConfig)
    data = props2 == null ? void 0 : props2.beforeConfig(data);
  const chartOptions = chartHandler(columns, rows, props2 == null ? void 0 : props2.settings, extra);
  if (chartOptions) {
    if (typeof chartOptions.then === "function") {
      chartOptions.then((res) => {
        optionsHandler({
          chartOptions: res,
          props: props2,
          options,
          echarts
        });
      });
    } else {
      optionsHandler({
        chartOptions,
        props: props2,
        options,
        echarts
      });
    }
  }
};
const optionsHandler = ({
  chartOptions,
  props: props2,
  options,
  echarts,
  nextTick: nextTick2
}) => {
  const {
    chartColor,
    _store,
    _once,
    el,
    readyCallback,
    readyOnceCallback
  } = options;
  if ((props2 == null ? void 0 : props2.legendPosition) && chartOptions.legend) {
    chartOptions.legend[props2 == null ? void 0 : props2.legendPosition] = 10;
    if (~["left", "right"].indexOf(props2 == null ? void 0 : props2.legendPosition)) {
      chartOptions.legend.top = "middle";
      chartOptions.legend.orient = "vertical";
    }
  }
  chartOptions.color = chartColor;
  ECHARTS_SETTINGS.forEach((setting) => {
    if (props2 == null ? void 0 : props2[setting])
      chartOptions[setting] = props2 == null ? void 0 : props2[setting];
  });
  if (props2 == null ? void 0 : props2.animation)
    setAnimation(chartOptions, props2 == null ? void 0 : props2.animation);
  if ((props2 == null ? void 0 : props2.markArea) || (props2 == null ? void 0 : props2.markLine) || (props2 == null ? void 0 : props2.markPoint)) {
    const marks = {
      markArea: props2 == null ? void 0 : props2.markArea,
      markLine: props2 == null ? void 0 : props2.markLine,
      markPoint: props2 == null ? void 0 : props2.markPoint
    };
    const series = chartOptions.series;
    if (isArray(series)) {
      series.forEach((item) => {
        setMark(item, marks);
      });
    } else if (isObject(series)) {
      setMark(series, marks);
    }
  }
  if (props2 == null ? void 0 : props2.extend)
    setExtend(chartOptions, props2 == null ? void 0 : props2.extend);
  if (props2 == null ? void 0 : props2.afterConfig)
    chartOptions = props2 == null ? void 0 : props2.afterConfig(chartOptions);
  let setOptionOpts = props2 == null ? void 0 : props2.setOptionOpts;
  if (((props2 == null ? void 0 : props2.settings.bmap) || (props2 == null ? void 0 : props2.settings.amap)) && !isObject(setOptionOpts)) {
    setOptionOpts = false;
  }
  if ((props2 == null ? void 0 : props2.notSetUnchange) && (props2 == null ? void 0 : props2.notSetUnchange.length)) {
    props2 == null ? void 0 : props2.notSetUnchange.forEach((item) => {
      const value = chartOptions[item];
      if (value) {
        if (isEqual(value, _store[item])) {
          chartOptions[item] = void 0;
        } else {
          _store[item] = cloneDeep(value);
        }
      }
    });
    if (isObject(setOptionOpts)) {
      setOptionOpts.notMerge = false;
    } else {
      setOptionOpts = false;
    }
  }
  if (props2 == null ? void 0 : props2.log)
    console.log(chartOptions);
  echarts.setOption(chartOptions, setOptionOpts);
  readyCallback instanceof Function && readyCallback(echarts, chartOptions, echartsLib);
  if (!_once["ready-once"]) {
    _once["ready-once"] = true;
    readyOnceCallback instanceof Function && readyOnceCallback(echarts, chartOptions, echartsLib);
  }
  if (props2 == null ? void 0 : props2.judgeWidth) {
    judgeWidthHandler({
      props: props2,
      el,
      nextTick: nextTick2,
      echarts
    });
  }
  if (props2 == null ? void 0 : props2.afterSetOption) {
    props2 == null ? void 0 : props2.afterSetOption(echarts, chartOptions, echartsLib);
  }
  if ((props2 == null ? void 0 : props2.afterSetOptionOnce) && !_once.afterSetOptionOnce) {
    _once.afterSetOptionOnce = true;
    props2 == null ? void 0 : props2.afterSetOptionOnce(echarts, chartOptions, echartsLib);
  }
};
const judgeWidthHandler = ({
  props: props2,
  el,
  nextTick: nextTick2,
  echarts
}) => {
  if (el.clientWidth || el.clientHeight) {
    resize({
      props: props2,
      el,
      echarts
    });
  } else {
    nextTick2(() => {
      if (el.clientWidth || el.clientHeight) {
        resize({
          props: props2,
          el,
          echarts
        });
      } else {
        setTimeout(() => {
          resize({
            props: props2,
            el,
            echarts
          });
          if (!el.clientWidth || !el.clientHeight) {
            console.warn(" Can't get dom width or height ");
          }
        }, props2 == null ? void 0 : props2.widthChangeDelay);
      }
    });
  }
};
const resize = ({
  props: props2,
  el,
  echarts
} = {}) => {
  if (!(props2 == null ? void 0 : props2.cancelResizeCheck)) {
    if (el && el.clientWidth && el.clientHeight) {
      echartsResize(echarts);
    }
  } else {
    echartsResize(echarts);
  }
};
const echartsResize = (echarts) => {
  echarts && echarts.resize();
};
const themeChange = (initPayload, props2) => {
  let {
    echarts,
    option: { _once }
  } = initPayload;
  clean({
    echarts,
    props: props2,
    _once
  });
  echarts = null;
  init(initPayload);
};
const clean = ({
  echarts,
  props: props2,
  _once
}) => {
  if (props2 == null ? void 0 : props2.resizeable) {
    removeResizeListener({ _once });
  }
  echarts && echarts.dispose();
};
const resizeableHandler = ({
  resizeable,
  _once,
  props: props2,
  el,
  echarts
}) => {
  if (resizeable && !_once.onresize) {
    addResizeListener({
      _once,
      props: props2,
      el,
      echarts
    });
  }
  if (!resizeable && _once.onresize) {
    removeResizeListener({ _once });
  }
};
const createChart = ({
  name: name2,
  chartHandler,
  chartLib
}) => {
  return {
    name: name2,
    props,
    setup(props2, {
      slots,
      emit
    }) {
      let echarts = null;
      const registeredEvents = [];
      const _once = {};
      const _store = {};
      const _watchers = [];
      let stateChangeHandler = null;
      if (!changeHandler) {
        stateChangeHandler = chartLib[props2.settings.type];
      } else {
        stateChangeHandler = changeHandler;
      }
      const canvasStyle = computed(() => {
        return {
          width: props2 == null ? void 0 : props2.width,
          height: props2 == null ? void 0 : props2.height,
          position: "relative"
        };
      });
      const chartColor = computed(() => {
        return (props2 == null ? void 0 : props2.colors) || (props2 == null ? void 0 : props2.theme) && (props2 == null ? void 0 : props2.theme.color) || DEFAULT_COLORS;
      });
      const DataEmpty = h("div", { class: "v-charts-data-empty" }, "\u6682\u65E0\u6570\u636E");
      const Loading = h("div", { class: "v-charts-component-loading" }, [
        h("div", { class: "loader" }, [
          h("div", { class: "loading-spinner" }, [
            h("svg", {
              class: "circular",
              viewBox: "25 25 50 50"
            }, [
              h("circle", {
                class: "path",
                cx: "50",
                cy: "50",
                r: "20",
                fill: "none"
              })
            ])
          ])
        ])
      ]);
      const CANVAS = h("div", {
        style: canvasStyle.value,
        class: { "v-charts-mask-status": (props2 == null ? void 0 : props2.dataEmpty) || (props2 == null ? void 0 : props2.loading) }
      });
      const EL = h("div", {
        class: [camelToKebab(name2)],
        style: canvasStyle.value
      }, [
        CANVAS,
        h(DataEmpty, { style: { display: (props2 == null ? void 0 : props2.dataEmpty) ? "" : "none" } }),
        h(Loading, { style: { display: (props2 == null ? void 0 : props2.loading) ? "" : "none" } }),
        slots.default
      ]);
      const initPayload = {
        echarts,
        props: props2,
        canvas: CANVAS.el,
        options: {
          el: EL.el,
          registeredEvents,
          chartHandler,
          chartColor: chartColor.value,
          _once,
          _store,
          readyCallback: (echarts2, chartOptions, echartsLib2) => {
            emit("ready", echarts2, chartOptions, echartsLib2);
          },
          readyOnceCallback: (echarts2, chartOptions, echartsLib2) => {
            emit("ready-once", echarts2, chartOptions, echartsLib2);
          }
        },
        nextTick
      };
      const nextTickResize = () => {
        nextTick(resize({
          props: props2,
          el: EL.el,
          echarts
        }));
      };
      watch(() => props2 == null ? void 0 : props2.data, (v) => {
        if (v) {
          stateChangeHandler({
            props: props2,
            options: initPayload.options,
            echarts
          });
        }
      }, { deep: true });
      watch(() => props2 == null ? void 0 : props2.settings, (v) => {
        if (v.type && chartLib)
          chartHandler = chartLib[v.type];
        initPayload.options.chartHandler = chartLib[v.type];
        stateChangeHandler({
          props: props2,
          options: initPayload.options,
          echarts
        });
      }, { deep: true });
      watch(() => props2 == null ? void 0 : props2.width, () => nextTickResize());
      watch(() => props2 == null ? void 0 : props2.height, () => nextTickResize());
      watch(() => props2 == null ? void 0 : props2.events, () => createEventProxy({
        registeredEvents,
        echarts,
        props: props2
      }), { deep: true });
      watch(() => props2 == null ? void 0 : props2.theme, () => {
        nextTick(() => {
          initPayload.canvas = CANVAS.el;
          initPayload.options.el = EL.el;
          themeChange(initPayload, props2);
        });
      }, { deep: true });
      watch(() => props2 == null ? void 0 : props2.themeName, () => {
        nextTick(() => {
          initPayload.canvas = CANVAS.el;
          initPayload.options.el = EL.el;
          themeChange(initPayload, props2);
        });
      });
      watch(() => props2 == null ? void 0 : props2.resizeable, (resizeable) => {
        nextTick(() => {
          resizeableHandler({
            resizeable,
            _once,
            props: props2,
            el: EL.el,
            echarts
          });
        });
      });
      const addWatchToProps = ({
        _watchers: _watchers2,
        props: props3,
        options,
        echarts: echarts2
      }) => {
        const watchedVariable = _watchers2.map((watcher) => watcher.expression);
        Object.keys(props3).forEach((prop) => {
          if (!~watchedVariable.indexOf(prop) && !~STATIC_PROPS.indexOf(prop)) {
            const opts = {};
            if (~["[object Object]", "[object Array]"].indexOf(getType(props3[prop]))) {
              opts.deep = true;
            }
            watch(() => prop, () => stateChangeHandler({
              props: props3,
              options,
              echarts: echarts2
            }), opts);
          }
        });
      };
      onMounted(() => {
        initPayload.canvas = CANVAS.el;
        initPayload.options.el = EL.el;
        const { echarts: initEcharts } = init(initPayload);
        echarts = initEcharts;
        addWatchToProps({
          _watchers,
          props: props2,
          options: initPayload.options,
          echarts
        });
      });
      onBeforeUnmount(() => {
        clean({
          echarts,
          props: props2,
          _once
        });
      });
      return () => EL;
    }
  };
};
echartsLib.use([BarChart]);
const VeBar = createChart({
  name: "VeBar",
  chartHandler: bar
});
VeBar.install = (app) => {
  logCopyRight(name, version);
  app.component(VeBar.name, VeBar);
};
echartsLib.use([BarChart]);
const VeHistogram = createChart({
  name: "VeHistogram",
  chartHandler: histogram
});
VeHistogram.install = (app) => {
  logCopyRight(name$2, version$2);
  app.component(VeHistogram.name, VeHistogram);
};
export { VeHistogram as default };