@opentiny/vue-renderless 3.6.0 → 3.6.1-alpha.2

package/chart-core/index.js

@@ -1,155 +1,114 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import { on, off } from '@opentiny/vue-renderless/common/deps/dom';
-import { DEFAULT_COLORS, DEFAULT_THEME, STATIC_PROPS, ECHARTS_SETTINGS, SAAS_DEFAULT_COLORS_10, SAAS_DEFAULT_COLORS_18, DEFAULT_CONFIG } from './deps/constants';
-import { getType, debounce, isObject, cloneDeep, isEqual, htmlHandler } from './deps/utils';
-import setAnimation from './modules/animation';
-import setExtend from './modules/extend';
-import setMark from './modules/mark';
-export var computedCanvasStyle = function computedCanvasStyle(props) {
-  return function () {
-    return {
-      width: props.width,
-      height: props.height,
-      position: 'relative'
-    };
-  };
-};
-var calcColors = function calcColors(data) {
-  return data.length <= 10 ? SAAS_DEFAULT_COLORS_10 : SAAS_DEFAULT_COLORS_18;
-};
-export var computedChartColor = function computedChartColor(props) {
-  return function () {
-    var defaultColors = DEFAULT_COLORS;
-    var data = props.data;
-    var extend = props.extend;
-    if (data && Array.isArray(data.rows)) {
-      defaultColors = calcColors(data.rows);
-    } else if (Array.isArray(data)) {
-      defaultColors = calcColors(data);
-    } else if (extend && Array.isArray(extend.series)) {
-      defaultColors = calcColors(extend.series);
-    } else if (extend && extend.series && Array.isArray(extend.series.data)) {
-      defaultColors = calcColors(extend.series.data);
-    }
-    return props.colors || props.theme && props.theme.color || defaultColors;
-  };
+import {
+  __spreadValues
+} from "../chunk-PKUHTIDK.js";
+import { on, off } from "@opentiny/vue-renderless/common/deps/dom";
+import { DEFAULT_COLORS, DEFAULT_THEME, STATIC_PROPS, ECHARTS_SETTINGS, SAAS_DEFAULT_COLORS_10, SAAS_DEFAULT_COLORS_18, DEFAULT_CONFIG } from "./deps/constants";
+import { getType, debounce, isObject, cloneDeep, isEqual, htmlHandler } from "./deps/utils";
+import setAnimation from "./modules/animation";
+import setExtend from "./modules/extend";
+import setMark from "./modules/mark";
+const computedCanvasStyle = (props) => () => ({
+  width: props.width,
+  height: props.height,
+  position: "relative"
+});
+const calcColors = (data) => data.length <= 10 ? SAAS_DEFAULT_COLORS_10 : SAAS_DEFAULT_COLORS_18;
+const computedChartColor = (props) => () => {
+  let defaultColors = DEFAULT_COLORS;
+  let { data } = props;
+  const { extend } = props;
+  if (data && Array.isArray(data.rows)) {
+    defaultColors = calcColors(data.rows);
+  } else if (Array.isArray(data)) {
+    defaultColors = calcColors(data);
+  } else if (extend && Array.isArray(extend.series)) {
+    defaultColors = calcColors(extend.series);
+  } else if (extend && extend.series && Array.isArray(extend.series.data)) {
+    defaultColors = calcColors(extend.series.data);
+  }
+  return props.colors || props.theme && props.theme.color || defaultColors;
 };
-export var dataHandler = function dataHandler(_ref) {
-  var api = _ref.api,
-    props = _ref.props,
-    state = _ref.state,
-    echartsLib = _ref.echartsLib,
-    t = _ref.t,
-    vm = _ref.vm;
-  return function () {
-    if (!api.chartHandler) {
-      return;
-    }
-    var data = props.data;
-    var isBoxplot = false;
-    if (vm.prepareBoxplotData && Array.isArray(data)) {
-      isBoxplot = true;
-      var obj = vm.prepareBoxplotData(data);
-      data = {
-        columns: obj.axisData,
-        rows: obj.boxData,
-        outliers: obj.outliers
-      };
-    }
-    var _data = data,
-      _data$columns = _data.columns,
-      columns = _data$columns === void 0 ? [] : _data$columns,
-      _data$rows = _data.rows,
-      rows = _data$rows === void 0 ? [] : _data$rows;
-    var extra = {
-      tooltipVisible: props.tooltipVisible,
-      legendVisible: props.legendVisible,
-      echarts: state.echarts,
-      color: state.chartColor,
-      tooltipFormatter: props.tooltipFormatter,
-      _once: state.once,
-      echartsLib: echartsLib,
-      t: t,
-      vm: vm
+const dataHandler = ({ api, props, state, echartsLib, t, vm }) => () => {
+  if (!api.chartHandler) {
+    return;
+  }
+  let data = props.data;
+  let isBoxplot = false;
+  if (vm.prepareBoxplotData && Array.isArray(data)) {
+    isBoxplot = true;
+    const obj = vm.prepareBoxplotData(data);
+    data = {
+      columns: obj.axisData,
+      rows: obj.boxData,
+      outliers: obj.outliers
     };
-    columns = htmlHandler(columns);
-    rows = htmlHandler(rows);
-    if (isBoxplot) {
-      extra.outliers = data.outliers;
-    }
-    if (props.beforeConfig) {
-      data = props.beforeConfig(data);
-    }
-    var options = api.chartHandler(columns, rows, props.settings, extra);
-    if (options) {
-      if (typeof options.then === 'function') {
-        options.then(api.optionsHandler);
-      } else {
-        api.optionsHandler(options);
-      }
-    }
-  };
-};
-export var nextTickResize = function nextTickResize(_ref2) {
-  var api = _ref2.api,
-    nextTick = _ref2.nextTick;
-  return function () {
-    return nextTick(api.resize);
+  }
+  let { columns = [], rows = [] } = data;
+  const extra = {
+    tooltipVisible: props.tooltipVisible,
+    legendVisible: props.legendVisible,
+    echarts: state.echarts,
+    color: state.chartColor,
+    tooltipFormatter: props.tooltipFormatter,
+    _once: state.once,
+    echartsLib,
+    t,
+    vm
   };
-};
-export var resize = function resize(_ref3) {
-  var props = _ref3.props,
-    vm = _ref3.vm,
-    api = _ref3.api;
-  return function () {
-    if (!props.cancelResizeCheck) {
-      if (vm.$el && vm.$el.clientWidth && vm.$el.clientHeight) {
-        api.echartsResize();
-      }
+  columns = htmlHandler(columns);
+  rows = htmlHandler(rows);
+  if (isBoxplot) {
+    extra.outliers = data.outliers;
+  }
+  if (props.beforeConfig) {
+    data = props.beforeConfig(data);
+  }
+  let options = api.chartHandler(columns, rows, props.settings, extra);
+  if (options) {
+    if (typeof options.then === "function") {
+      options.then(api.optionsHandler);
     } else {
-      api.echartsResize();
+      api.optionsHandler(options);
     }
-  };
+  }
 };
-export var echartsResize = function echartsResize(state) {
-  return function () {
-    return state.echarts && state.echarts.resize();
-  };
+const nextTickResize = ({ api, nextTick }) => () => nextTick(api.resize);
+const resize = ({ props, vm, api }) => () => {
+  if (!props.cancelResizeCheck) {
+    if (vm.$el && vm.$el.clientWidth && vm.$el.clientHeight) {
+      api.echartsResize();
+    }
+  } else {
+    api.echartsResize();
+  }
 };
-var setOptionsLegend = function setOptionsLegend(_ref4) {
-  var props = _ref4.props,
-    options = _ref4.options;
+const echartsResize = (state) => () => state.echarts && state.echarts.resize();
+const setOptionsLegend = ({ props, options }) => {
   if (props.legendPosition && options.legend) {
     options.legend[props.legendPosition] = 10;
-    if (~['left', 'right'].indexOf(props.legendPosition)) {
-      options.legend.top = 'middle';
-      options.legend.orient = 'vertical';
+    if (~["left", "right"].indexOf(props.legendPosition)) {
+      options.legend.top = "middle";
+      options.legend.orient = "vertical";
     }
   }
 };
-var selfSetting = function selfSetting(_ref5) {
-  var props = _ref5.props,
-    options = _ref5.options;
-  ECHARTS_SETTINGS.forEach(function (setting) {
+const selfSetting = ({ props, options }) => {
+  ECHARTS_SETTINGS.forEach((setting) => {
     if (props[setting]) {
       options[setting] = props[setting];
     }
   });
 };
-var applyMarks = function applyMarks(_ref6) {
-  var props = _ref6.props,
-    options = _ref6.options;
+const applyMarks = ({ props, options }) => {
   if (props.markArea || props.markLine || props.markPoint) {
-    var marks = {
+    const marks = {
       markArea: props.markArea,
       markLine: props.markLine,
       markPoint: props.markPoint
     };
-    var series = options.series;
+    const series = options.series;
     if (Array.isArray(series)) {
-      series.forEach(function (item) {
+      series.forEach((item) => {
         setMark(item, marks);
       });
     } else if (isObject(series)) {
@@ -157,385 +116,259 @@ var applyMarks = function applyMarks(_ref6) {
     }
   }
 };
-var afterConfig = function afterConfig(_ref7) {
-  var props = _ref7.props,
-    options = _ref7.options;
+const afterConfig = ({ props, options }) => {
   if (props.afterConfig) {
     options = props.afterConfig(options);
   }
   return options;
 };
-var mapChartNotMerge = function mapChartNotMerge(props) {
-  var setOptionOpts = props.setOptionOpts;
+const mapChartNotMerge = (props) => {
+  let setOptionOpts = props.setOptionOpts;
   if ((props.settings.bmap || props.settings.amap) && !isObject(setOptionOpts)) {
     setOptionOpts = false;
   }
   return setOptionOpts;
 };
-var afterSetOption = function afterSetOption(_ref8) {
-  var props = _ref8.props,
-    state = _ref8.state,
-    options = _ref8.options,
-    echartsLib = _ref8.echartsLib;
+const afterSetOption = ({ props, state, options, echartsLib }) => {
   if (props.afterSetOption) {
     props.afterSetOption(state.echarts, options, echartsLib);
   }
 };
-var afterSetOptionOnce = function afterSetOptionOnce(_ref9) {
-  var props = _ref9.props,
-    state = _ref9.state,
-    options = _ref9.options,
-    echartsLib = _ref9.echartsLib;
+const afterSetOptionOnce = ({ props, state, options, echartsLib }) => {
   if (props.afterSetOptionOnce && !state.once.afterSetOptionOnce) {
     state.once.afterSetOptionOnce = true;
     props.afterSetOptionOnce(state.echarts, options, echartsLib);
   }
 };
-export var judgeWidthHandler = function judgeWidthHandler(_ref10) {
-  var props = _ref10.props,
-    api = _ref10.api,
-    vm = _ref10.vm,
-    nextTick = _ref10.nextTick;
-  return function () {
-    if (!props.judgeWidth) {
-      return;
-    }
-    if (vm.$el.clientWidth || vm.$el.clientHeight) {
-      api.resize();
-    } else {
-      nextTick(function () {
-        if (vm.$el.clientWidth || vm.$el.clientHeight) {
+const judgeWidthHandler = ({ props, api, vm, nextTick }) => () => {
+  if (!props.judgeWidth) {
+    return;
+  }
+  if (vm.$el.clientWidth || vm.$el.clientHeight) {
+    api.resize();
+  } else {
+    nextTick(() => {
+      if (vm.$el.clientWidth || vm.$el.clientHeight) {
+        api.resize();
+      } else {
+        setTimeout(() => {
           api.resize();
-        } else {
-          setTimeout(function () {
-            api.resize();
-          }, props.widthChangeDelay);
-        }
-      });
-    }
-  };
+        }, props.widthChangeDelay);
+      }
+    });
+  }
 };
-var setOption = function setOption(_ref11) {
-  var state = _ref11.state,
-    options = _ref11.options,
-    setOptionOpts = _ref11.setOptionOpts,
-    emit = _ref11.emit,
-    api = _ref11.api,
-    props = _ref11.props,
-    echartsLib = _ref11.echartsLib;
+const setOption = ({ state, options, setOptionOpts, emit, api, props, echartsLib }) => {
   state.echarts.setOption(options, setOptionOpts);
-  emit('ready', state.echarts, options, echartsLib);
-  if (!state.once['ready-once']) {
-    state.once['ready-once'] = true;
-    emit('ready-once', state.echarts, options, echartsLib);
+  emit("ready", state.echarts, options, echartsLib);
+  if (!state.once["ready-once"]) {
+    state.once["ready-once"] = true;
+    emit("ready-once", state.echarts, options, echartsLib);
   }
   api.judgeWidthHandler(options);
-  afterSetOption({
-    props: props,
-    state: state,
-    options: options,
-    echartsLib: echartsLib
-  });
-  afterSetOptionOnce({
-    props: props,
-    state: state,
-    options: options,
-    echartsLib: echartsLib
-  });
+  afterSetOption({ props, state, options, echartsLib });
+  afterSetOptionOnce({ props, state, options, echartsLib });
 };
-export var optionsHandler = function optionsHandler(_ref12) {
-  var props = _ref12.props,
-    state = _ref12.state,
-    emit = _ref12.emit,
-    echartsLib = _ref12.echartsLib,
-    api = _ref12.api,
-    vm = _ref12.vm;
-  return function (options) {
-    if (options.tooltip) {
-      var defaultTooltip = DEFAULT_CONFIG.tooltip || {};
-      options.tooltip = _objectSpread(_objectSpread({}, defaultTooltip), options.tooltip);
-    }
-    if (options.legend) {
-      var defaultLegend = DEFAULT_CONFIG.legend || {};
-      options.legend = _objectSpread(_objectSpread({}, defaultLegend), options.legend);
-    }
-    setOptionsLegend({
-      props: props,
-      options: options
-    });
-    options.color = state.chartColor;
-    selfSetting({
-      props: props,
-      options: options
-    });
-    setAnimation({
-      options: options,
-      animation: props.animation
-    });
-    applyMarks({
-      props: props,
-      options: options
-    });
-    if (props.extend) {
-      setExtend({
-        options: options,
-        extend: props.extend
-      });
-      options.series.label = _objectSpread({
-        show: false
-      }, options.series.label);
-      options.series.radius = ['25%', '100%'];
-    }
-    options = afterConfig({
-      props: props,
-      options: options
-    });
-    var setOptionOpts = mapChartNotMerge(props);
-    if (props.notSetUnchange && props.notSetUnchange.length) {
-      props.notSetUnchange.forEach(function (item) {
-        var value = options[item];
-        if (value) {
-          if (isEqual(value, state.store[item])) {
-            options[item] = undefined;
-          } else {
-            state.store[item] = cloneDeep(value);
-          }
+const optionsHandler = ({ props, state, emit, echartsLib, api, vm }) => (options) => {
+  if (options.tooltip) {
+    const defaultTooltip = DEFAULT_CONFIG.tooltip || {};
+    options.tooltip = __spreadValues(__spreadValues({}, defaultTooltip), options.tooltip);
+  }
+  if (options.legend) {
+    const defaultLegend = DEFAULT_CONFIG.legend || {};
+    options.legend = __spreadValues(__spreadValues({}, defaultLegend), options.legend);
+  }
+  setOptionsLegend({ props, options });
+  options.color = state.chartColor;
+  selfSetting({ props, options });
+  setAnimation({ options, animation: props.animation });
+  applyMarks({ props, options });
+  if (props.extend) {
+    setExtend({ options, extend: props.extend });
+    options.series.label = __spreadValues({ show: false }, options.series.label);
+    options.series.radius = ["25%", "100%"];
+  }
+  options = afterConfig({ props, options });
+  let setOptionOpts = mapChartNotMerge(props);
+  if (props.notSetUnchange && props.notSetUnchange.length) {
+    props.notSetUnchange.forEach((item) => {
+      const value = options[item];
+      if (value) {
+        if (isEqual(value, state.store[item])) {
+          options[item] = void 0;
+        } else {
+          state.store[item] = cloneDeep(value);
         }
-      });
-      if (isObject(setOptionOpts)) {
-        setOptionOpts.notMerge = false;
-      } else {
-        setOptionOpts = false;
       }
-    }
-    if (vm._isDestroyed) {
-      return;
-    }
-    setOption({
-      state: state,
-      options: options,
-      setOptionOpts: setOptionOpts,
-      emit: emit,
-      api: api,
-      props: props,
-      echartsLib: echartsLib
     });
-  };
-};
-export var resizeableHandler = function resizeableHandler(_ref13) {
-  var api = _ref13.api,
-    state = _ref13.state;
-  return function (resizeable) {
-    if (resizeable && !state.once.onresize) {
-      api.addResizeListener();
-    }
-    if (!resizeable && state.once.onresize) {
-      api.removeResizeListener();
+    if (isObject(setOptionOpts)) {
+      setOptionOpts.notMerge = false;
+    } else {
+      setOptionOpts = false;
     }
-  };
+  }
+  if (vm._isDestroyed) {
+    return;
+  }
+  setOption({ state, options, setOptionOpts, emit, api, props, echartsLib });
 };
-export var init = function init(_ref14) {
-  var state = _ref14.state,
-    props = _ref14.props,
-    api = _ref14.api,
-    refs = _ref14.refs,
-    echartsLib = _ref14.echartsLib,
-    markRaw = _ref14.markRaw;
-  return function () {
-    if (state.echarts) {
-      return;
-    }
-    var ictThemeName = {};
-    var settings = props.settings;
-    if (settings.line) {
-      ictThemeName.line = settings.line;
-    }
-    var themeName = props.themeName || props.theme || DEFAULT_THEME;
-    state.echarts = markRaw(echartsLib.init(refs.canvas, themeName, _objectSpread(_objectSpread({}, themeName), ictThemeName), props.initOptions));
-    if (props.data) {
-      api.changeHandler();
-    }
-    api.createEventProxy();
-    if (props.resizeable) {
-      api.addResizeListener();
-    }
-  };
+const resizeableHandler = ({ api, state }) => (resizeable) => {
+  if (resizeable && !state.once.onresize) {
+    api.addResizeListener();
+  }
+  if (!resizeable && state.once.onresize) {
+    api.removeResizeListener();
+  }
 };
-export var addResizeListener = function addResizeListener(_ref15) {
-  var state = _ref15.state,
-    api = _ref15.api;
-  return function () {
-    on(window, 'resize', api.resizeHandler);
-    state.once.onresize = true;
-  };
+const init = ({ state, props, api, refs, echartsLib, markRaw }) => () => {
+  if (state.echarts) {
+    return;
+  }
+  const ictThemeName = {};
+  const { settings } = props;
+  if (settings.line) {
+    ictThemeName.line = settings.line;
+  }
+  const themeName = props.themeName || props.theme || DEFAULT_THEME;
+  state.echarts = markRaw(echartsLib.init(refs.canvas, themeName, __spreadValues(__spreadValues({}, themeName), ictThemeName), props.initOptions));
+  if (props.data) {
+    api.changeHandler();
+  }
+  api.createEventProxy();
+  if (props.resizeable) {
+    api.addResizeListener();
+  }
 };
-export var removeResizeListener = function removeResizeListener(_ref16) {
-  var state = _ref16.state,
-    api = _ref16.api;
-  return function () {
-    off(window, 'resize', api.resizeHandler);
-    state.once.onresize = false;
-  };
+const addResizeListener = ({ state, api }) => () => {
+  on(window, "resize", api.resizeHandler);
+  state.once.onresize = true;
 };
-export var addWatchToProps = function addWatchToProps(_ref17) {
-  var props = _ref17.props,
-    watch = _ref17.watch,
-    api = _ref17.api;
-  return function () {
-    Object.keys(props).forEach(function (prop) {
-      if (!~STATIC_PROPS.indexOf(prop)) {
-        var opts = {};
-        if (~['[object Object]', '[object Array]'].indexOf(getType(props[prop]))) {
-          opts.deep = true;
-        } else {
-          opts.immediate = true;
-        }
-        watch(function () {
-          return prop;
-        }, function () {
-          api.changeHandler();
-        }, opts);
-      }
-    });
-  };
+const removeResizeListener = ({ state, api }) => () => {
+  off(window, "resize", api.resizeHandler);
+  state.once.onresize = false;
 };
-export var createEventProxy = function createEventProxy(_ref18) {
-  var props = _ref18.props,
-    state = _ref18.state;
-  return function () {
-    var keys = Object.keys(props.events || {});
-    keys.length && keys.forEach(function (event) {
-      if (state.registeredEvents.indexOf(event) === -1) {
-        state.registeredEvents.push(event);
-        state.echarts.on(event, function (event) {
-          return function () {
-            if (event in props.events) {
-              for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-                args[_key] = arguments[_key];
-              }
-              props.events[event].apply(null, args);
-            }
-          };
-        }(event));
+const addWatchToProps = ({ props, watch, api }) => () => {
+  Object.keys(props).forEach((prop) => {
+    if (!~STATIC_PROPS.indexOf(prop)) {
+      const opts = {};
+      if (~["[object Object]", "[object Array]"].indexOf(getType(props[prop]))) {
+        opts.deep = true;
+      } else {
+        opts.immediate = true;
       }
-    });
-  };
-};
-export var themeChange = function themeChange(_ref19) {
-  var api = _ref19.api,
-    state = _ref19.state;
-  return function () {
-    api.clean();
-    state.echarts = null;
-    api.init();
-  };
-};
-export var clean = function clean(_ref20) {
-  var props = _ref20.props,
-    state = _ref20.state,
-    api = _ref20.api;
-  return function () {
-    if (props.resizeable) {
-      api.removeResizeListener();
+      watch(
+        () => prop,
+        () => {
+          api.changeHandler();
+        },
+        opts
+      );
     }
-    state.echarts.dispose();
-  };
-};
-export var watchOnMounted = function watchOnMounted(_ref21) {
-  var api = _ref21.api,
-    vm = _ref21.vm,
-    watch = _ref21.watch,
-    props = _ref21.props,
-    t = _ref21.t;
-  watch(function () {
-    return props.data;
-  }, function (value) {
-    return value && api.changeHandler();
-  }, {
-    deep: true
   });
-  watch(function () {
-    return props.settings;
-  }, function (value) {
-    if (value.type && vm.chartLib) {
-      api.chartHandler = vm.chartLib[value.type];
+};
+const createEventProxy = ({ props, state }) => () => {
+  const keys = Object.keys(props.events || {});
+  keys.length && keys.forEach((event) => {
+    if (!state.registeredEvents.includes(event)) {
+      state.registeredEvents.push(event);
+      state.echarts.on(
+        event,
+        ((event2) => (...args) => {
+          if (event2 in props.events) {
+            props.events[event2].apply(null, args);
+          }
+        })(event)
+      );
     }
-    api.changeHandler();
-  }, {
-    deep: true
-  });
-  watch(function () {
-    return [props.width, props.height];
-  }, function () {
-    return api.nextTickResize();
-  });
-  watch(function () {
-    return props.events;
-  }, function () {
-    return api.createEventProxy();
-  }, {
-    deep: true
-  });
-  watch(function () {
-    return [props.theme, props.themeName];
-  }, function () {
-    return api.themeChange();
-  });
-  watch(function () {
-    return props.resizeable;
-  }, function () {
-    return api.resizeableHandler();
-  });
-  watch(function () {
-    return t('ui.chart.emptyText');
-  }, function () {
-    return api.changeHandler();
-  });
-  watch(function () {
-    return props.extend;
-  }, function () {
-    return api.changeHandler();
-  }, {
-    deep: true
   });
 };
-export var mounted = function mounted(_ref22) {
-  var state = _ref22.state,
-    api = _ref22.api,
-    vm = _ref22.vm,
-    props = _ref22.props,
-    watch = _ref22.watch,
-    t = _ref22.t;
-  return function () {
-    state.echarts = null;
-    state.registeredEvents = [];
-    state.once = {};
-    state.store = {};
-    api.chartHandler = vm.chartHandler;
-    api.resizeHandler = debounce(api.resize, props.resizeDelay);
-    api.changeHandler = debounce(api.dataHandler, props.changeDelay);
-    api.addWatchToProps();
-    api.init();
-    watchOnMounted({
-      watch: watch,
-      props: props,
-      api: api,
-      vm: vm,
-      t: t
-    });
-  };
+const themeChange = ({ api, state }) => () => {
+  api.clean();
+  state.echarts = null;
+  api.init();
 };
-export var changeHandler = function changeHandler(_ref23) {
-  var api = _ref23.api,
-    props = _ref23.props;
-  return function () {
-    return debounce(api.dataHandler, props.changeDelay);
-  };
+const clean = ({ props, state, api }) => () => {
+  if (props.resizeable) {
+    api.removeResizeListener();
+  }
+  state.echarts.dispose();
+};
+const watchOnMounted = ({ api, vm, watch, props, t }) => {
+  watch(
+    () => props.data,
+    (value) => value && api.changeHandler(),
+    { deep: true }
+  );
+  watch(
+    () => props.settings,
+    (value) => {
+      if (value.type && vm.chartLib) {
+        api.chartHandler = vm.chartLib[value.type];
+      }
+      api.changeHandler();
+    },
+    { deep: true }
+  );
+  watch(
+    () => [props.width, props.height],
+    () => api.nextTickResize()
+  );
+  watch(
+    () => props.events,
+    () => api.createEventProxy(),
+    { deep: true }
+  );
+  watch(
+    () => [props.theme, props.themeName],
+    () => api.themeChange()
+  );
+  watch(
+    () => props.resizeable,
+    () => api.resizeableHandler()
+  );
+  watch(
+    () => t("ui.chart.emptyText"),
+    () => api.changeHandler()
+  );
+  watch(
+    () => props.extend,
+    () => api.changeHandler(),
+    { deep: true }
+  );
+};
+const mounted = ({ state, api, vm, props, watch, t }) => () => {
+  state.echarts = null;
+  state.registeredEvents = [];
+  state.once = {};
+  state.store = {};
+  api.chartHandler = vm.chartHandler;
+  api.resizeHandler = debounce(api.resize, props.resizeDelay);
+  api.changeHandler = debounce(api.dataHandler, props.changeDelay);
+  api.addWatchToProps();
+  api.init();
+  watchOnMounted({ watch, props, api, vm, t });
+};
+const changeHandler = ({ api, props }) => () => debounce(api.dataHandler, props.changeDelay);
+const resizeHandler = ({ api, props }) => () => debounce(api.resize, props.resizeDelay);
+export {
+  addResizeListener,
+  addWatchToProps,
+  changeHandler,
+  clean,
+  computedCanvasStyle,
+  computedChartColor,
+  createEventProxy,
+  dataHandler,
+  echartsResize,
+  init,
+  judgeWidthHandler,
+  mounted,
+  nextTickResize,
+  optionsHandler,
+  removeResizeListener,
+  resize,
+  resizeHandler,
+  resizeableHandler,
+  themeChange,
+  watchOnMounted
 };
-export var resizeHandler = function resizeHandler(_ref24) {
-  var api = _ref24.api,
-    props = _ref24.props;
-  return function () {
-    return debounce(api.resize, props.resizeDelay);
-  };
-};