@idux/charts-core 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @idux/charts-core
 
+## 0.5.0
+
+### Minor Changes
+
+- feat(core): add useTooltipsFormatter (#12)
+
+## 0.4.1
+
+### Patch Changes
+
+- 84c8aeb: the listeners not work in vue2.x
+
 ## 0.4.0
 
 ### Minor Changes

package/dist/components/Chart.d.ts

@@ -1,4 +1,4 @@
 import { type HTMLAttributes } from 'vue-demi';
 import { type ChartProps } from '../types';
-declare const _default: import("vue-demi").DefineComponent<Omit<HTMLAttributes, keyof ChartProps> & ChartProps, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<Omit<HTMLAttributes, keyof ChartProps> & ChartProps>>, {}>;
+declare const _default: import("vue-demi").DefineComponent<Omit<HTMLAttributes, keyof ChartProps> & ChartProps, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<Omit<HTMLAttributes, keyof ChartProps> & ChartProps>>, {}, {}>;
 export default _default;

package/dist/components/index.d.ts

@@ -1,2 +1,2 @@
-declare const IxChart: import("vue").DefineComponent<Omit<import("vue").HTMLAttributes, keyof import("..").ChartProps> & import("..").ChartProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<Omit<import("vue").HTMLAttributes, keyof import("..").ChartProps> & import("..").ChartProps>>, {}>;
+declare const IxChart: import("vue").DefineComponent<Omit<import("vue").HTMLAttributes, keyof import("..").ChartProps> & import("..").ChartProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<Omit<import("vue").HTMLAttributes, keyof import("..").ChartProps> & import("..").ChartProps>>, {}, {}>;
 export { IxChart };

package/dist/composables/index.d.ts

@@ -1 +1,2 @@
 export { useChart } from './useChart';
+export { useTooltipsFormatter } from './useTooltips';

package/dist/composables/useChart.d.ts

@@ -2,7 +2,7 @@ import { type Ref, type ShallowRef } from 'vue-demi';
 import { type EChartsType } from 'echarts/core';
 import { type ChartProps } from '../types';
 export type MaybeRef<T> = T | Ref<T>;
-export declare function useChart<U extends ChartProps>(options: MaybeRef<U>): {
+export declare function useChart<U extends ChartProps>(options: MaybeRef<U>, listeners?: Record<string, Function>): {
     containerRef: ShallowRef<HTMLDivElement | undefined>;
     chartRef: ShallowRef<EChartsType | undefined>;
 };

package/dist/composables/useTooltips.d.ts

@@ -0,0 +1,6 @@
+export interface TooltipsFormatItem {
+    name: string;
+    value: string | number;
+    color?: string;
+}
+export declare function useTooltipsFormatter(title: string, list: TooltipsFormatItem[]): string;

package/dist/index.js

@@ -1,76 +1,78 @@
-import { DataZoomComponent as T, LegendComponent as W, GridComponent as I, TitleComponent as G, TooltipComponent as M } from "echarts/components";
-import { LabelLayout as V, UniversalTransition as j } from "echarts/features";
-import { SVGRenderer as H } from "echarts/renderers";
-import { watch as g, shallowRef as m, computed as d, unref as c, onMounted as N, onBeforeUnmount as P, watchEffect as A, isVue2 as U, defineComponent as Z, normalizeStyle as _, h as q } from "vue-demi";
-import { throttle as $, init as J, use as K, registerTheme as Q } from "echarts/core";
-import { isEqual as X, cloneDeep as b, isBoolean as Y, isNil as k } from "lodash-es";
-function ee(e, o, t) {
-  let r;
-  g(
-    [e, o, t],
-    ([n, a, l], f, F) => {
-      !n || !a || (l ? (r ?? (r = $(() => a.resize(), 16)), te(n, r)) : y(n, r), F(() => y(n, r)));
+import { DataZoomComponent as $, LegendComponent as G, GridComponent as j, TitleComponent as M, TooltipComponent as N } from "echarts/components";
+import { LabelLayout as V, UniversalTransition as H } from "echarts/features";
+import { SVGRenderer as P } from "echarts/renderers";
+import { watch as v, shallowRef as g, computed as F, unref as u, onMounted as U, onBeforeUnmount as Z, watchEffect as y, isVue2 as L, defineComponent as _, h as q } from "vue-demi";
+import { throttle as J, init as K, use as Q, registerTheme as X } from "echarts/core";
+import { isEqual as Y, cloneDeep as R, isBoolean as k, isNil as ee } from "lodash-es";
+function te(e, o, s) {
+  let t;
+  v(
+    [e, o, s],
+    ([r, n, a], l, f) => {
+      !r || !n || (a ? (t ?? (t = J(() => n.resize(), 16)), oe(r, t)) : S(r, t), f(() => S(r, t)));
     }
   );
 }
-const p = /* @__PURE__ */ new Map();
-function te(e, o, t) {
+const h = /* @__PURE__ */ new Map();
+function oe(e, o, s) {
   if (!(!e || !o))
-    if (p.has(e))
-      p.get(e).listeners.push(o);
+    if (h.has(e))
+      h.get(e).listeners.push(o);
     else {
-      const r = [o], n = new ResizeObserver((a) => {
-        a.forEach((l) => r.forEach((f) => f(l)));
+      const t = [o], r = new ResizeObserver((n) => {
+        n.forEach((a) => t.forEach((l) => l(a)));
       });
-      n.observe(e, t), p.set(e, { listeners: r, ro: n });
+      r.observe(e, s), h.set(e, { listeners: t, ro: r });
     }
 }
-function y(e, o) {
-  if (!e || !o || !p.has(e))
+function S(e, o) {
+  if (!e || !o || !h.has(e))
     return;
-  const { listeners: t, ro: r } = p.get(e), n = t.indexOf(o);
-  n > -1 && (t.splice(n, 1), t.length === 0 && (r.disconnect(), p.delete(e)));
+  const { listeners: s, ro: t } = h.get(e), r = s.indexOf(o);
+  r > -1 && (s.splice(r, 1), s.length === 0 && (t.disconnect(), h.delete(e)));
 }
-const R = { text: "加载中..." };
-function oe(e) {
-  const o = m(), t = m(), r = m(), n = d(() => c(e).autoResize ?? !0), a = d(() => c(e).group), l = d(() => c(e).initOption), f = d(() => c(e).loading), F = d(() => c(e).setOptionOpts), C = d(() => c(e).theme ?? "seer"), v = () => {
-    const i = o.value;
-    if (!i)
+const w = { text: "加载中..." };
+function se(e, o) {
+  const s = g(), t = g(), r = g(), n = F(() => u(e).autoResize ?? !0), a = F(() => u(e).group), l = F(() => u(e).initOption), f = F(() => u(e).loading), d = F(() => u(e).setOptionOpts), x = F(() => u(e).theme ?? "seer"), C = () => {
+    const c = s.value;
+    if (!c)
       return;
-    const s = J(i, C.value, l.value), u = c(e), { restOptions: D, events: z } = S(u, !1);
-    s.setOption(D, F.value), r.value = b(D), z.forEach(([O, E, L]) => {
-      let h = E;
-      L && (h = (...B) => {
-        E(...B), s.off(O, h);
-      }), s.on(O, h);
-    }), u.onReady && u.onReady(s), t.value = s;
-  }, x = () => {
+    const i = K(c, x.value, l.value), p = u(e), { restOptions: O, events: T } = B(p, o, !1);
+    i.setOption(O, d.value), r.value = R(O), T.forEach(([E, A, W]) => {
+      let m = A;
+      W && (m = (...I) => {
+        A(...I), i.off(E, m);
+      }), i.on(E, m);
+    });
+    const b = p.onReady || (o == null ? void 0 : o.ready);
+    b && b(i), t.value = i;
+  }, D = () => {
     t.value && (t.value.dispose(), t.value = void 0);
   };
-  return N(() => v()), P(() => x()), g(
-    () => c(e),
-    (i) => {
-      const s = t.value;
-      if (!s)
+  return U(() => C()), Z(() => D()), v(
+    () => u(e),
+    (c) => {
+      const i = t.value;
+      if (!i)
         return;
-      const { restOptions: u } = S(i);
-      X(u, r.value) || (s.setOption(u, F.value), r.value = b(u));
+      const { restOptions: p } = B(c);
+      Y(p, r.value) || (i.setOption(p, d.value), r.value = R(p));
     },
     {
       deep: !0
     }
-  ), g([C, l], () => {
-    x(), v();
-  }), A(() => {
-    const i = a.value;
-    i && t.value && (t.value.group = i);
-  }), A(() => {
-    const i = t.value;
-    if (!i)
+  ), v([x, l], () => {
+    D(), C();
+  }), y(() => {
+    const c = a.value;
+    c && t.value && (t.value.group = c);
+  }), y(() => {
+    const c = t.value;
+    if (!c)
       return;
-    const s = f.value;
-    s ? i.showLoading(Y(s) ? R : { ...R, ...s }) : i.hideLoading();
-  }), ee(o, t, n), { containerRef: o, chartRef: t };
+    const i = f.value;
+    i ? c.showLoading(k(i) ? w : { ...w, ...i }) : c.hideLoading();
+  }), te(s, t, n), { containerRef: s, chartRef: t };
 }
 function ne(e) {
   return /^on[^a-z]/.test(e);
@@ -85,25 +87,65 @@ const re = [
   "theme",
   "onReady"
 ];
-function S(e, o = !0) {
+function B(e, o = {}, s = !0) {
   const t = {}, r = [];
   return Object.keys(e).forEach((n) => {
     if (!re.includes(n)) {
       if (ne(n)) {
-        if (o)
+        if (s)
           return;
         const a = e[n];
         if (a) {
-          const l = n.endsWith("Once"), f = l ? n.length - 4 : void 0, F = n.charAt(2).toLowerCase() + n.substring(3, f);
-          r.push([F, a, l]);
+          const l = n.endsWith("Once"), f = l ? n.length - 4 : void 0, d = n.charAt(2).toLowerCase() + n.substring(3, f);
+          r.push([d, a, l]);
         }
         return;
       }
       t[n] = e[n];
     }
+  }), L && !s && Object.keys(o).forEach((n) => {
+    if (n !== "ready")
+      return;
+    const a = o[n];
+    if (a) {
+      const l = n.startsWith("~"), f = l ? 1 : 0, d = n.substring(f);
+      r.push([d, a, l]);
+    }
   }), { restOptions: t, events: r };
 }
-const se = [
+function he(e, o) {
+  return `
+    <div class="ix-charts-tooltips">
+			<div class="ix-charts-tooltips-title">${e}</div>
+			${o.map((s) => `
+					<div class="ix-charts-tooltips-item">
+						<span class="ix-charts-tooltips-item-border" style="background: ${s.color}"></span>
+						<span class="ix-charts-tooltips-item-name">${s.name}</span>
+						<span class="ix-charts-tooltips-item-value">${s.value}</span>
+					</div>`).join("")}
+		</div>`;
+}
+const z = _({
+  name: "IxChart",
+  inheritAttrs: !1,
+  // @ts-ignore
+  setup(e, { attrs: o, listeners: s }) {
+    const { containerRef: t } = se(o, s);
+    return { containerRef: t };
+  },
+  render() {
+    const { class: e, style: o } = this.$attrs;
+    return q("div", {
+      ref: "containerRef",
+      class: e,
+      style: {
+        width: "100%",
+        height: "100%",
+        ...o
+      }
+    });
+  }
+}), ie = [
   "#458FFF",
   "#45D9A3",
   "#FFC145",
@@ -115,7 +157,7 @@ const se = [
   "#F587B3",
   "#8352CC",
   "#65779B"
-], he = [
+], me = [
   "#458FFF",
   "#C8DEFF",
   "#45D9A3",
@@ -138,7 +180,7 @@ const se = [
   "#FCDBE8",
   "#65779B",
   "#65779B"
-], me = [
+], ge = [
   "#8C1604",
   "#DB4C35",
   "#FF9245",
@@ -146,8 +188,8 @@ const se = [
   "#689FFF",
   "#45D9A3",
   "#99ACD1"
-], ie = {
-  color: se,
+], ae = {
+  color: ie,
   textStyle: {
     color: "#2F3540",
     fontSize: "12px"
@@ -203,6 +245,7 @@ const se = [
   tooltip: {
     borderWidth: 0,
     padding: 12,
+    backgroundColor: "#FBFDFF",
     textStyle: {
       color: "#2F3540"
     },
@@ -265,69 +308,47 @@ const se = [
     height: 16
   }
 };
-function ge(e) {
+function ve(e) {
   return !!(e && e.xAxis && e.xAxis.data);
 }
-function ae(e, o) {
-  const t = {
-    ...e,
-    ...o
-  };
-  return U ? { attrs: t } : t;
+function xe(e, o) {
+  return L ? { attrs: { ...e }, on: { ...o } } : { ...e };
 }
 function Ce(e) {
-  return Object.entries(e).reduce((o, [t, r]) => (r !== void 0 && (o[t] = r), o), {});
+  return Object.entries(e).reduce((o, [s, t]) => (t !== void 0 && (o[s] = t), o), {});
 }
-function ve(e) {
-  return k(e) ? [] : Array.isArray(e) ? e : [e];
+function De(e) {
+  return ee(e) ? [] : Array.isArray(e) ? e : [e];
 }
 function le(e, o) {
-  K(o), Q("seer", ie);
-  const t = (r) => {
-    r.component(e.name, e);
+  Q(o), X("seer", ae);
+  const s = (t) => {
+    t.component(e.name, e);
   };
-  e.install = t;
+  e.install = s;
 }
-const w = Z({
-  name: "IxChart",
-  inheritAttrs: !1,
-  setup(e, { attrs: o }) {
-    const { containerRef: t } = oe(o);
-    return { containerRef: t };
-  },
-  render() {
-    const { class: e, style: o } = this.$attrs, t = ae({
-      class: e,
-      style: _({
-        width: "100%",
-        height: "100%",
-        ...o
-      })
-    });
-    return q("div", { ref: "containerRef", ...t });
-  }
-});
-le(w, [
-  T,
-  W,
-  I,
+le(z, [
+  $,
   G,
+  j,
   M,
+  N,
   V,
-  j,
-  H
+  H,
+  P
 ]);
-const xe = w;
+const Oe = z;
 export {
-  xe as IxChart,
-  ve as convertArray,
+  Oe as IxChart,
+  De as convertArray,
   le as createInstall,
   Ce as filterEmptyProps,
-  ge as isVertical,
-  ae as mergeAttrs,
-  se as seerColors,
-  he as seerColorsForMore,
-  me as seerColorsForRisk,
-  ie as seerTheme,
-  oe as useChart
+  ve as isVertical,
+  xe as mergeAttrs,
+  ie as seerColors,
+  me as seerColorsForMore,
+  ge as seerColorsForRisk,
+  ae as seerTheme,
+  se as useChart,
+  he as useTooltipsFormatter
 };

package/dist/index.umd.cjs

@@ -1 +1,10 @@
-(function(o,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("echarts/components"),require("echarts/features"),require("echarts/renderers"),require("vue-demi"),require("echarts/core"),require("lodash-es")):typeof define=="function"&&define.amd?define(["exports","echarts/components","echarts/features","echarts/renderers","vue-demi","echarts/core","lodash-es"],l):(o=typeof globalThis<"u"?globalThis:o||self,l(o.IduxChartsCore={},o.echarts,o.echarts,o.echarts,o.VueDemi,o.echarts,o._))})(this,function(o,l,y,W,r,g,C){"use strict";function M(e,n,t){let i;r.watch([e,n,t],([s,f,u],F,p)=>{!s||!f||(u?(i??(i=g.throttle(()=>f.resize(),16)),G(s,i)):A(s,i),p(()=>A(s,i)))})}const h=new Map;function G(e,n,t){if(!(!e||!n))if(h.has(e))h.get(e).listeners.push(n);else{const i=[n],s=new ResizeObserver(f=>{f.forEach(u=>i.forEach(F=>F(u)))});s.observe(e,t),h.set(e,{listeners:i,ro:s})}}function A(e,n){if(!e||!n||!h.has(e))return;const{listeners:t,ro:i}=h.get(e),s=t.indexOf(n);s>-1&&(t.splice(s,1),t.length===0&&(i.disconnect(),h.delete(e)))}const x={text:"加载中..."};function m(e){const n=r.shallowRef(),t=r.shallowRef(),i=r.shallowRef(),s=r.computed(()=>r.unref(e).autoResize??!0),f=r.computed(()=>r.unref(e).group),u=r.computed(()=>r.unref(e).initOption),F=r.computed(()=>r.unref(e).loading),p=r.computed(()=>r.unref(e).setOptionOpts),L=r.computed(()=>r.unref(e).theme??"seer"),B=()=>{const c=n.value;if(!c)return;const a=g.init(c,L.value,u.value),d=r.unref(e),{restOptions:I,events:D}=w(d,!1);a.setOption(I,p.value),i.value=C.cloneDeep(I),D.forEach(([q,v,$])=>{let O=v;$&&(O=(...J)=>{v(...J),a.off(q,O)}),a.on(q,O)}),d.onReady&&d.onReady(a),t.value=a},T=()=>{t.value&&(t.value.dispose(),t.value=void 0)};return r.onMounted(()=>B()),r.onBeforeUnmount(()=>T()),r.watch(()=>r.unref(e),c=>{const a=t.value;if(!a)return;const{restOptions:d}=w(c);C.isEqual(d,i.value)||(a.setOption(d,p.value),i.value=C.cloneDeep(d))},{deep:!0}),r.watch([L,u],()=>{T(),B()}),r.watchEffect(()=>{const c=f.value;c&&t.value&&(t.value.group=c)}),r.watchEffect(()=>{const c=t.value;if(!c)return;const a=F.value;a?c.showLoading(C.isBoolean(a)?x:{...x,...a}):c.hideLoading()}),M(n,t,s),{containerRef:n,chartRef:t}}function V(e){return/^on[^a-z]/.test(e)}const j=["class","style","autoResize","group","loading","setOptionOpts","theme","onReady"];function w(e,n=!0){const t={},i=[];return Object.keys(e).forEach(s=>{if(!j.includes(s)){if(V(s)){if(n)return;const f=e[s];if(f){const u=s.endsWith("Once"),F=u?s.length-4:void 0,p=s.charAt(2).toLowerCase()+s.substring(3,F);i.push([p,f,u])}return}t[s]=e[s]}}),{restOptions:t,events:i}}const E=["#458FFF","#45D9A3","#FFC145","#F5654F","#6A6AFD","#6ED1FF","#008787","#FF9245","#F587B3","#8352CC","#65779B"],P=["#458FFF","#C8DEFF","#45D9A3","#C8F4E4","#FFC145","#FFEDC8","#F5654F","#FCD1CB","#6A6AFD","#D3D3FE","#6ED1FF","#D3D3FE","#008787","#B3DBDB","#FF9245","#FFDFC8","#F587B3","#FCDBE8","#8352CC","#FCDBE8","#65779B","#65779B"],_=["#8C1604","#DB4C35","#FF9245","#FFC145","#689FFF","#45D9A3","#99ACD1"],R={color:E,textStyle:{color:"#2F3540",fontSize:"12px"},bar:{barGap:.2,barWidth:10,label:{color:"#6F7785",position:"top"}},line:{label:{color:"#6F7785",position:"top"}},pie:{avoidLabelOverlap:!1,radius:["70%","80%"],itemStyle:{borderWidth:1,borderColor:"#fff"},label:{show:!1,color:"#2F3540",formatter:"{c}",position:"inside"}},legend:{itemWidth:12,itemHeight:12,textStyle:{color:"#6F7785",fontSize:"12px"}},title:{itemGap:4,textStyle:{color:"#2F3540",fontSize:"12px",fontWeight:500},subtextStyle:{color:"#6F7785",fontSize:"12px"}},tooltip:{borderWidth:0,padding:12,textStyle:{color:"#2F3540"},axisPointer:{z:1,lineStyle:{type:"solid",color:"#E1E5EB"}}},categoryAxis:{axisLine:{show:!0,lineStyle:{color:"#EDF1F7"}},axisTick:{show:!0,alignWithLabel:!0,lineStyle:{color:"#EDF1F7"}},axisLabel:{color:"#6F7785"},splitLine:{show:!1},splitArea:{show:!1}},valueAxis:{axisLine:{show:!1},axisTick:{show:!1},axisLabel:{color:"#6F7785"},splitLine:{lineStyle:{color:"#EDF1F7"}},splitArea:{show:!1},nameTextStyle:{color:"#6F7785",padding:[0,30,-4,0]}},dataZoom:{height:16}};function H(e){return!!(e&&e.xAxis&&e.xAxis.data)}function S(e,n){const t={...e,...n};return r.isVue2?{attrs:t}:t}function N(e){return Object.entries(e).reduce((n,[t,i])=>(i!==void 0&&(n[t]=i),n),{})}function U(e){return C.isNil(e)?[]:Array.isArray(e)?e:[e]}function b(e,n){g.use(n),g.registerTheme("seer",R);const t=i=>{i.component(e.name,e)};e.install=t}const z=r.defineComponent({name:"IxChart",inheritAttrs:!1,setup(e,{attrs:n}){const{containerRef:t}=m(n);return{containerRef:t}},render(){const{class:e,style:n}=this.$attrs,t=S({class:e,style:r.normalizeStyle({width:"100%",height:"100%",...n})});return r.h("div",{ref:"containerRef",...t})}});b(z,[l.DataZoomComponent,l.LegendComponent,l.GridComponent,l.TitleComponent,l.TooltipComponent,y.LabelLayout,y.UniversalTransition,W.SVGRenderer]);const Z=z;o.IxChart=Z,o.convertArray=U,o.createInstall=b,o.filterEmptyProps=N,o.isVertical=H,o.mergeAttrs=S,o.seerColors=E,o.seerColorsForMore=P,o.seerColorsForRisk=_,o.seerTheme=R,o.useChart=m,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
+(function(n,d){typeof exports=="object"&&typeof module<"u"?d(exports,require("echarts/components"),require("echarts/features"),require("echarts/renderers"),require("vue-demi"),require("echarts/core"),require("lodash-es")):typeof define=="function"&&define.amd?define(["exports","echarts/components","echarts/features","echarts/renderers","vue-demi","echarts/core","lodash-es"],d):(n=typeof globalThis<"u"?globalThis:n||self,d(n.IduxChartsCore={},n.echarts,n.echarts,n.echarts,n.VueDemi,n.echarts,n._))})(this,function(n,d,m,j,s,x,g){"use strict";function M(e,r,o){let t;s.watch([e,r,o],([a,i,l],f,h)=>{!a||!i||(l?(t??(t=x.throttle(()=>i.resize(),16)),V(a,t)):y(a,t),h(()=>y(a,t)))})}const F=new Map;function V(e,r,o){if(!(!e||!r))if(F.has(e))F.get(e).listeners.push(r);else{const t=[r],a=new ResizeObserver(i=>{i.forEach(l=>t.forEach(f=>f(l)))});a.observe(e,o),F.set(e,{listeners:t,ro:a})}}function y(e,r){if(!e||!r||!F.has(e))return;const{listeners:o,ro:t}=F.get(e),a=o.indexOf(r);a>-1&&(o.splice(a,1),o.length===0&&(t.disconnect(),F.delete(e)))}const b={text:"加载中..."};function A(e,r){const o=s.shallowRef(),t=s.shallowRef(),a=s.shallowRef(),i=s.computed(()=>s.unref(e).autoResize??!0),l=s.computed(()=>s.unref(e).group),f=s.computed(()=>s.unref(e).initOption),h=s.computed(()=>s.unref(e).loading),p=s.computed(()=>s.unref(e).setOptionOpts),L=s.computed(()=>s.unref(e).theme??"seer"),v=()=>{const u=o.value;if(!u)return;const c=x.init(u,L.value,f.value),C=s.unref(e),{restOptions:T,events:K}=w(C,r,!1);c.setOption(T,p.value),a.value=g.cloneDeep(T),K.forEach(([W,q,Q])=>{let O=q;Q&&(O=(...X)=>{q(...X),c.off(W,O)}),c.on(W,O)});const I=C.onReady||(r==null?void 0:r.ready);I&&I(c),t.value=c},z=()=>{t.value&&(t.value.dispose(),t.value=void 0)};return s.onMounted(()=>v()),s.onBeforeUnmount(()=>z()),s.watch(()=>s.unref(e),u=>{const c=t.value;if(!c)return;const{restOptions:C}=w(u);g.isEqual(C,a.value)||(c.setOption(C,p.value),a.value=g.cloneDeep(C))},{deep:!0}),s.watch([L,f],()=>{z(),v()}),s.watchEffect(()=>{const u=l.value;u&&t.value&&(t.value.group=u)}),s.watchEffect(()=>{const u=t.value;if(!u)return;const c=h.value;c?u.showLoading(g.isBoolean(c)?b:{...b,...c}):u.hideLoading()}),M(o,t,i),{containerRef:o,chartRef:t}}function $(e){return/^on[^a-z]/.test(e)}const G=["class","style","autoResize","group","loading","setOptionOpts","theme","onReady"];function w(e,r={},o=!0){const t={},a=[];return Object.keys(e).forEach(i=>{if(!G.includes(i)){if($(i)){if(o)return;const l=e[i];if(l){const f=i.endsWith("Once"),h=f?i.length-4:void 0,p=i.charAt(2).toLowerCase()+i.substring(3,h);a.push([p,l,f])}return}t[i]=e[i]}}),s.isVue2&&!o&&Object.keys(r).forEach(i=>{if(i!=="ready")return;const l=r[i];if(l){const f=i.startsWith("~"),h=f?1:0,p=i.substring(h);a.push([p,l,f])}}),{restOptions:t,events:a}}function P(e,r){return`
+    <div class="ix-charts-tooltips">
+			<div class="ix-charts-tooltips-title">${e}</div>
+			${r.map(o=>`
+					<div class="ix-charts-tooltips-item">
+						<span class="ix-charts-tooltips-item-border" style="background: ${o.color}"></span>
+						<span class="ix-charts-tooltips-item-name">${o.name}</span>
+						<span class="ix-charts-tooltips-item-value">${o.value}</span>
+					</div>`).join("")}
+		</div>`}const Y="",E=s.defineComponent({name:"IxChart",inheritAttrs:!1,setup(e,{attrs:r,listeners:o}){const{containerRef:t}=A(r,o);return{containerRef:t}},render(){const{class:e,style:r}=this.$attrs;return s.h("div",{ref:"containerRef",class:e,style:{width:"100%",height:"100%",...r}})}}),R=["#458FFF","#45D9A3","#FFC145","#F5654F","#6A6AFD","#6ED1FF","#008787","#FF9245","#F587B3","#8352CC","#65779B"],N=["#458FFF","#C8DEFF","#45D9A3","#C8F4E4","#FFC145","#FFEDC8","#F5654F","#FCD1CB","#6A6AFD","#D3D3FE","#6ED1FF","#D3D3FE","#008787","#B3DBDB","#FF9245","#FFDFC8","#F587B3","#FCDBE8","#8352CC","#FCDBE8","#65779B","#65779B"],_=["#8C1604","#DB4C35","#FF9245","#FFC145","#689FFF","#45D9A3","#99ACD1"],S={color:R,textStyle:{color:"#2F3540",fontSize:"12px"},bar:{barGap:.2,barWidth:10,label:{color:"#6F7785",position:"top"}},line:{label:{color:"#6F7785",position:"top"}},pie:{avoidLabelOverlap:!1,radius:["70%","80%"],itemStyle:{borderWidth:1,borderColor:"#fff"},label:{show:!1,color:"#2F3540",formatter:"{c}",position:"inside"}},legend:{itemWidth:12,itemHeight:12,textStyle:{color:"#6F7785",fontSize:"12px"}},title:{itemGap:4,textStyle:{color:"#2F3540",fontSize:"12px",fontWeight:500},subtextStyle:{color:"#6F7785",fontSize:"12px"}},tooltip:{borderWidth:0,padding:12,backgroundColor:"#FBFDFF",textStyle:{color:"#2F3540"},axisPointer:{z:1,lineStyle:{type:"solid",color:"#E1E5EB"}}},categoryAxis:{axisLine:{show:!0,lineStyle:{color:"#EDF1F7"}},axisTick:{show:!0,alignWithLabel:!0,lineStyle:{color:"#EDF1F7"}},axisLabel:{color:"#6F7785"},splitLine:{show:!1},splitArea:{show:!1}},valueAxis:{axisLine:{show:!1},axisTick:{show:!1},axisLabel:{color:"#6F7785"},splitLine:{lineStyle:{color:"#EDF1F7"}},splitArea:{show:!1},nameTextStyle:{color:"#6F7785",padding:[0,30,-4,0]}},dataZoom:{height:16}};function D(e){return!!(e&&e.xAxis&&e.xAxis.data)}function H(e,r){return s.isVue2?{attrs:{...e},on:{...r}}:{...e}}function U(e){return Object.entries(e).reduce((r,[o,t])=>(t!==void 0&&(r[o]=t),r),{})}function Z(e){return g.isNil(e)?[]:Array.isArray(e)?e:[e]}function B(e,r){x.use(r),x.registerTheme("seer",S);const o=t=>{t.component(e.name,e)};e.install=o}B(E,[d.DataZoomComponent,d.LegendComponent,d.GridComponent,d.TitleComponent,d.TooltipComponent,m.LabelLayout,m.UniversalTransition,j.SVGRenderer]);const J=E;n.IxChart=J,n.convertArray=Z,n.createInstall=B,n.filterEmptyProps=U,n.isVertical=D,n.mergeAttrs=H,n.seerColors=R,n.seerColorsForMore=N,n.seerColorsForRisk=_,n.seerTheme=S,n.useChart=A,n.useTooltipsFormatter=P,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});

package/dist/style.css

@@ -0,0 +1 @@
+.ix-charts-tooltips{min-width:180px}.ix-charts-tooltips-title{font-weight:600;color:#2f3540;margin-bottom:8px}.ix-charts-tooltips-item{position:relative;display:flex;justify-content:space-between;height:32px;line-height:20px;color:#2f3540;background:#ffffff;box-shadow:0 4px 12px #0237b31a;padding:6px 12px;margin-bottom:4px}.ix-charts-tooltips-item-border{position:absolute;left:0;top:0;height:100%;width:2px;background:#458fff;box-shadow:0 2px 8px #e8f4ff}

package/dist/themes/seer.d.ts

@@ -58,6 +58,7 @@ export declare const seerTheme: {
     tooltip: {
         borderWidth: number;
         padding: number;
+        backgroundColor: string;
         textStyle: {
             color: string;
         };

package/dist/utils/index.d.ts

@@ -3,7 +3,7 @@ export type Writeable<T> = {
     -readonly [P in keyof T]: T[P];
 };
 export declare function isVertical(option: any): boolean;
-export declare function mergeAttrs(props: any, attrs?: any): any;
+export declare function mergeAttrs(props: any, listeners?: Record<string, Function>): any;
 export declare function filterEmptyProps<T extends object>(props: T): T;
 export declare function convertArray<T>(value: T | undefined | null | Array<T | undefined | null>): T[];
 export declare function convertArray<T>(value: T | readonly T[]): readonly T[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idux/charts-core",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "A UI Component Development Kit for Vue 3.x",
   "keywords": [
     "vue",