@idux/charts-core 0.4.1 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @idux/charts-core
2
2
 
3
+ ## 0.5.0
4
+
5
+ ### Minor Changes
6
+
7
+ - feat(core): add useTooltipsFormatter (#12)
8
+
3
9
  ## 0.4.1
4
10
 
5
11
  ### Patch Changes
@@ -1,4 +1,4 @@
1
1
  import { type HTMLAttributes } from 'vue-demi';
2
2
  import { type ChartProps } from '../types';
3
- 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>>, {}>;
3
+ 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>>, {}, {}>;
4
4
  export default _default;
@@ -1,2 +1,2 @@
1
- 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>>, {}>;
1
+ 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>>, {}, {}>;
2
2
  export { IxChart };
@@ -1 +1,2 @@
1
1
  export { useChart } from './useChart';
2
+ export { useTooltipsFormatter } from './useTooltips';
@@ -0,0 +1,6 @@
1
+ export interface TooltipsFormatItem {
2
+ name: string;
3
+ value: string | number;
4
+ color?: string;
5
+ }
6
+ export declare function useTooltipsFormatter(title: string, list: TooltipsFormatItem[]): string;
package/dist/index.js CHANGED
@@ -1,83 +1,83 @@
1
- import { DataZoomComponent as G, LegendComponent as M, GridComponent as j, TitleComponent as N, TooltipComponent as V } from "echarts/components";
2
- import { LabelLayout as H, UniversalTransition as P } from "echarts/features";
3
- import { SVGRenderer as U } from "echarts/renderers";
4
- import { watch as C, shallowRef as g, computed as p, unref as f, onMounted as Z, onBeforeUnmount as _, watchEffect as y, isVue2 as z, defineComponent as q, h as $ } from "vue-demi";
1
+ import { DataZoomComponent as $, LegendComponent as G, GridComponent as j, TitleComponent as M, TooltipComponent as N } from "echarts/components";
2
+ import { LabelLayout as V, UniversalTransition as H } from "echarts/features";
3
+ import { SVGRenderer as P } from "echarts/renderers";
4
+ 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";
5
5
  import { throttle as J, init as K, use as Q, registerTheme as X } from "echarts/core";
6
6
  import { isEqual as Y, cloneDeep as R, isBoolean as k, isNil as ee } from "lodash-es";
7
- function te(e, o, r) {
7
+ function te(e, o, s) {
8
8
  let t;
9
- C(
10
- [e, o, r],
11
- ([s, n, a], c, u) => {
12
- !s || !n || (a ? (t ?? (t = J(() => n.resize(), 16)), oe(s, t)) : S(s, t), u(() => S(s, t)));
9
+ v(
10
+ [e, o, s],
11
+ ([r, n, a], l, f) => {
12
+ !r || !n || (a ? (t ?? (t = J(() => n.resize(), 16)), oe(r, t)) : S(r, t), f(() => S(r, t)));
13
13
  }
14
14
  );
15
15
  }
16
16
  const h = /* @__PURE__ */ new Map();
17
- function oe(e, o, r) {
17
+ function oe(e, o, s) {
18
18
  if (!(!e || !o))
19
19
  if (h.has(e))
20
20
  h.get(e).listeners.push(o);
21
21
  else {
22
- const t = [o], s = new ResizeObserver((n) => {
23
- n.forEach((a) => t.forEach((c) => c(a)));
22
+ const t = [o], r = new ResizeObserver((n) => {
23
+ n.forEach((a) => t.forEach((l) => l(a)));
24
24
  });
25
- s.observe(e, r), h.set(e, { listeners: t, ro: s });
25
+ r.observe(e, s), h.set(e, { listeners: t, ro: r });
26
26
  }
27
27
  }
28
28
  function S(e, o) {
29
29
  if (!e || !o || !h.has(e))
30
30
  return;
31
- const { listeners: r, ro: t } = h.get(e), s = r.indexOf(o);
32
- s > -1 && (r.splice(s, 1), r.length === 0 && (t.disconnect(), h.delete(e)));
31
+ const { listeners: s, ro: t } = h.get(e), r = s.indexOf(o);
32
+ r > -1 && (s.splice(r, 1), s.length === 0 && (t.disconnect(), h.delete(e)));
33
33
  }
34
34
  const w = { text: "加载中..." };
35
- function ne(e, o) {
36
- const r = g(), t = g(), s = g(), n = p(() => f(e).autoResize ?? !0), a = p(() => f(e).group), c = p(() => f(e).initOption), u = p(() => f(e).loading), d = p(() => f(e).setOptionOpts), x = p(() => f(e).theme ?? "seer"), v = () => {
37
- const l = r.value;
38
- if (!l)
35
+ function se(e, o) {
36
+ 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 = () => {
37
+ const c = s.value;
38
+ if (!c)
39
39
  return;
40
- const i = K(l, x.value, c.value), F = f(e), { restOptions: D, events: T } = L(F, o, !1);
41
- i.setOption(D, d.value), s.value = R(D), T.forEach(([E, A, W]) => {
40
+ const i = K(c, x.value, l.value), p = u(e), { restOptions: O, events: T } = B(p, o, !1);
41
+ i.setOption(O, d.value), r.value = R(O), T.forEach(([E, A, W]) => {
42
42
  let m = A;
43
43
  W && (m = (...I) => {
44
44
  A(...I), i.off(E, m);
45
45
  }), i.on(E, m);
46
46
  });
47
- const b = F.onReady || (o == null ? void 0 : o.ready);
47
+ const b = p.onReady || (o == null ? void 0 : o.ready);
48
48
  b && b(i), t.value = i;
49
- }, O = () => {
49
+ }, D = () => {
50
50
  t.value && (t.value.dispose(), t.value = void 0);
51
51
  };
52
- return Z(() => v()), _(() => O()), C(
53
- () => f(e),
54
- (l) => {
52
+ return U(() => C()), Z(() => D()), v(
53
+ () => u(e),
54
+ (c) => {
55
55
  const i = t.value;
56
56
  if (!i)
57
57
  return;
58
- const { restOptions: F } = L(l);
59
- Y(F, s.value) || (i.setOption(F, d.value), s.value = R(F));
58
+ const { restOptions: p } = B(c);
59
+ Y(p, r.value) || (i.setOption(p, d.value), r.value = R(p));
60
60
  },
61
61
  {
62
62
  deep: !0
63
63
  }
64
- ), C([x, c], () => {
65
- O(), v();
64
+ ), v([x, l], () => {
65
+ D(), C();
66
66
  }), y(() => {
67
- const l = a.value;
68
- l && t.value && (t.value.group = l);
67
+ const c = a.value;
68
+ c && t.value && (t.value.group = c);
69
69
  }), y(() => {
70
- const l = t.value;
71
- if (!l)
70
+ const c = t.value;
71
+ if (!c)
72
72
  return;
73
- const i = u.value;
74
- i ? l.showLoading(k(i) ? w : { ...w, ...i }) : l.hideLoading();
75
- }), te(r, t, n), { containerRef: r, chartRef: t };
73
+ const i = f.value;
74
+ i ? c.showLoading(k(i) ? w : { ...w, ...i }) : c.hideLoading();
75
+ }), te(s, t, n), { containerRef: s, chartRef: t };
76
76
  }
77
- function re(e) {
77
+ function ne(e) {
78
78
  return /^on[^a-z]/.test(e);
79
79
  }
80
- const se = [
80
+ const re = [
81
81
  "class",
82
82
  "style",
83
83
  "autoResize",
@@ -87,43 +87,55 @@ const se = [
87
87
  "theme",
88
88
  "onReady"
89
89
  ];
90
- function L(e, o = {}, r = !0) {
91
- const t = {}, s = [];
90
+ function B(e, o = {}, s = !0) {
91
+ const t = {}, r = [];
92
92
  return Object.keys(e).forEach((n) => {
93
- if (!se.includes(n)) {
94
- if (re(n)) {
95
- if (r)
93
+ if (!re.includes(n)) {
94
+ if (ne(n)) {
95
+ if (s)
96
96
  return;
97
97
  const a = e[n];
98
98
  if (a) {
99
- const c = n.endsWith("Once"), u = c ? n.length - 4 : void 0, d = n.charAt(2).toLowerCase() + n.substring(3, u);
100
- s.push([d, a, c]);
99
+ const l = n.endsWith("Once"), f = l ? n.length - 4 : void 0, d = n.charAt(2).toLowerCase() + n.substring(3, f);
100
+ r.push([d, a, l]);
101
101
  }
102
102
  return;
103
103
  }
104
104
  t[n] = e[n];
105
105
  }
106
- }), z && !r && Object.keys(o).forEach((n) => {
106
+ }), L && !s && Object.keys(o).forEach((n) => {
107
107
  if (n !== "ready")
108
108
  return;
109
109
  const a = o[n];
110
110
  if (a) {
111
- const c = n.startsWith("~"), u = c ? 1 : 0, d = n.substring(u);
112
- s.push([d, a, c]);
111
+ const l = n.startsWith("~"), f = l ? 1 : 0, d = n.substring(f);
112
+ r.push([d, a, l]);
113
113
  }
114
- }), { restOptions: t, events: s };
114
+ }), { restOptions: t, events: r };
115
115
  }
116
- const B = q({
116
+ function he(e, o) {
117
+ return `
118
+ <div class="ix-charts-tooltips">
119
+ <div class="ix-charts-tooltips-title">${e}</div>
120
+ ${o.map((s) => `
121
+ <div class="ix-charts-tooltips-item">
122
+ <span class="ix-charts-tooltips-item-border" style="background: ${s.color}"></span>
123
+ <span class="ix-charts-tooltips-item-name">${s.name}</span>
124
+ <span class="ix-charts-tooltips-item-value">${s.value}</span>
125
+ </div>`).join("")}
126
+ </div>`;
127
+ }
128
+ const z = _({
117
129
  name: "IxChart",
118
130
  inheritAttrs: !1,
119
131
  // @ts-ignore
120
- setup(e, { attrs: o, listeners: r }) {
121
- const { containerRef: t } = ne(o, r);
132
+ setup(e, { attrs: o, listeners: s }) {
133
+ const { containerRef: t } = se(o, s);
122
134
  return { containerRef: t };
123
135
  },
124
136
  render() {
125
137
  const { class: e, style: o } = this.$attrs;
126
- return $("div", {
138
+ return q("div", {
127
139
  ref: "containerRef",
128
140
  class: e,
129
141
  style: {
@@ -145,7 +157,7 @@ const B = q({
145
157
  "#F587B3",
146
158
  "#8352CC",
147
159
  "#65779B"
148
- ], he = [
160
+ ], me = [
149
161
  "#458FFF",
150
162
  "#C8DEFF",
151
163
  "#45D9A3",
@@ -168,7 +180,7 @@ const B = q({
168
180
  "#FCDBE8",
169
181
  "#65779B",
170
182
  "#65779B"
171
- ], me = [
183
+ ], ge = [
172
184
  "#8C1604",
173
185
  "#DB4C35",
174
186
  "#FF9245",
@@ -233,6 +245,7 @@ const B = q({
233
245
  tooltip: {
234
246
  borderWidth: 0,
235
247
  padding: 12,
248
+ backgroundColor: "#FBFDFF",
236
249
  textStyle: {
237
250
  color: "#2F3540"
238
251
  },
@@ -295,46 +308,47 @@ const B = q({
295
308
  height: 16
296
309
  }
297
310
  };
298
- function ge(e) {
311
+ function ve(e) {
299
312
  return !!(e && e.xAxis && e.xAxis.data);
300
313
  }
301
- function Ce(e, o) {
302
- return z ? { attrs: { ...e }, on: { ...o } } : { ...e };
314
+ function xe(e, o) {
315
+ return L ? { attrs: { ...e }, on: { ...o } } : { ...e };
303
316
  }
304
- function xe(e) {
305
- return Object.entries(e).reduce((o, [r, t]) => (t !== void 0 && (o[r] = t), o), {});
317
+ function Ce(e) {
318
+ return Object.entries(e).reduce((o, [s, t]) => (t !== void 0 && (o[s] = t), o), {});
306
319
  }
307
- function ve(e) {
320
+ function De(e) {
308
321
  return ee(e) ? [] : Array.isArray(e) ? e : [e];
309
322
  }
310
- function ce(e, o) {
323
+ function le(e, o) {
311
324
  Q(o), X("seer", ae);
312
- const r = (t) => {
325
+ const s = (t) => {
313
326
  t.component(e.name, e);
314
327
  };
315
- e.install = r;
328
+ e.install = s;
316
329
  }
317
- ce(B, [
330
+ le(z, [
331
+ $,
318
332
  G,
319
- M,
320
333
  j,
334
+ M,
321
335
  N,
322
336
  V,
323
337
  H,
324
- P,
325
- U
338
+ P
326
339
  ]);
327
- const Oe = B;
340
+ const Oe = z;
328
341
  export {
329
342
  Oe as IxChart,
330
- ve as convertArray,
331
- ce as createInstall,
332
- xe as filterEmptyProps,
333
- ge as isVertical,
334
- Ce as mergeAttrs,
343
+ De as convertArray,
344
+ le as createInstall,
345
+ Ce as filterEmptyProps,
346
+ ve as isVertical,
347
+ xe as mergeAttrs,
335
348
  ie as seerColors,
336
- he as seerColorsForMore,
337
- me as seerColorsForRisk,
349
+ me as seerColorsForMore,
350
+ ge as seerColorsForRisk,
338
351
  ae as seerTheme,
339
- ne as useChart
352
+ se as useChart,
353
+ he as useTooltipsFormatter
340
354
  };
@@ -1 +1,10 @@
1
- (function(o,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):(o=typeof globalThis<"u"?globalThis:o||self,d(o.IduxChartsCore={},o.echarts,o.echarts,o.echarts,o.VueDemi,o.echarts,o._))})(this,function(o,d,y,M,r,O,g){"use strict";function V(e,n,i){let t;r.watch([e,n,i],([a,s,l],f,h)=>{!a||!s||(l?(t??(t=O.throttle(()=>s.resize(),16)),j(a,t)):A(a,t),h(()=>A(a,t)))})}const F=new Map;function j(e,n,i){if(!(!e||!n))if(F.has(e))F.get(e).listeners.push(n);else{const t=[n],a=new ResizeObserver(s=>{s.forEach(l=>t.forEach(f=>f(l)))});a.observe(e,i),F.set(e,{listeners:t,ro:a})}}function A(e,n){if(!e||!n||!F.has(e))return;const{listeners:i,ro:t}=F.get(e),a=i.indexOf(n);a>-1&&(i.splice(a,1),i.length===0&&(t.disconnect(),F.delete(e)))}const w={text:"加载中..."};function E(e,n){const i=r.shallowRef(),t=r.shallowRef(),a=r.shallowRef(),s=r.computed(()=>r.unref(e).autoResize??!0),l=r.computed(()=>r.unref(e).group),f=r.computed(()=>r.unref(e).initOption),h=r.computed(()=>r.unref(e).loading),p=r.computed(()=>r.unref(e).setOptionOpts),z=r.computed(()=>r.unref(e).theme??"seer"),B=()=>{const u=i.value;if(!u)return;const c=O.init(u,z.value,f.value),C=r.unref(e),{restOptions:I,events:J}=R(C,n,!1);c.setOption(I,p.value),a.value=g.cloneDeep(I),J.forEach(([q,v,K])=>{let x=v;K&&(x=(...Q)=>{v(...Q),c.off(q,x)}),c.on(q,x)});const W=C.onReady||(n==null?void 0:n.ready);W&&W(c),t.value=c},T=()=>{t.value&&(t.value.dispose(),t.value=void 0)};return r.onMounted(()=>B()),r.onBeforeUnmount(()=>T()),r.watch(()=>r.unref(e),u=>{const c=t.value;if(!c)return;const{restOptions:C}=R(u);g.isEqual(C,a.value)||(c.setOption(C,p.value),a.value=g.cloneDeep(C))},{deep:!0}),r.watch([z,f],()=>{T(),B()}),r.watchEffect(()=>{const u=l.value;u&&t.value&&(t.value.group=u)}),r.watchEffect(()=>{const u=t.value;if(!u)return;const c=h.value;c?u.showLoading(g.isBoolean(c)?w:{...w,...c}):u.hideLoading()}),V(i,t,s),{containerRef:i,chartRef:t}}function G(e){return/^on[^a-z]/.test(e)}const P=["class","style","autoResize","group","loading","setOptionOpts","theme","onReady"];function R(e,n={},i=!0){const t={},a=[];return Object.keys(e).forEach(s=>{if(!P.includes(s)){if(G(s)){if(i)return;const l=e[s];if(l){const f=s.endsWith("Once"),h=f?s.length-4:void 0,p=s.charAt(2).toLowerCase()+s.substring(3,h);a.push([p,l,f])}return}t[s]=e[s]}}),r.isVue2&&!i&&Object.keys(n).forEach(s=>{if(s!=="ready")return;const l=n[s];if(l){const f=s.startsWith("~"),h=f?1:0,p=s.substring(h);a.push([p,l,f])}}),{restOptions:t,events:a}}const b=r.defineComponent({name:"IxChart",inheritAttrs:!1,setup(e,{attrs:n,listeners:i}){const{containerRef:t}=E(n,i);return{containerRef:t}},render(){const{class:e,style:n}=this.$attrs;return r.h("div",{ref:"containerRef",class:e,style:{width:"100%",height:"100%",...n}})}}),m=["#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:m,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 U(e,n){return r.isVue2?{attrs:{...e},on:{...n}}:{...e}}function Z(e){return Object.entries(e).reduce((n,[i,t])=>(t!==void 0&&(n[i]=t),n),{})}function D(e){return g.isNil(e)?[]:Array.isArray(e)?e:[e]}function L(e,n){O.use(n),O.registerTheme("seer",S);const i=t=>{t.component(e.name,e)};e.install=i}L(b,[d.DataZoomComponent,d.LegendComponent,d.GridComponent,d.TitleComponent,d.TooltipComponent,y.LabelLayout,y.UniversalTransition,M.SVGRenderer]);const $=b;o.IxChart=$,o.convertArray=D,o.createInstall=L,o.filterEmptyProps=Z,o.isVertical=H,o.mergeAttrs=U,o.seerColors=m,o.seerColorsForMore=N,o.seerColorsForRisk=_,o.seerTheme=S,o.useChart=E,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
1
+ (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`
2
+ <div class="ix-charts-tooltips">
3
+ <div class="ix-charts-tooltips-title">${e}</div>
4
+ ${r.map(o=>`
5
+ <div class="ix-charts-tooltips-item">
6
+ <span class="ix-charts-tooltips-item-border" style="background: ${o.color}"></span>
7
+ <span class="ix-charts-tooltips-item-name">${o.name}</span>
8
+ <span class="ix-charts-tooltips-item-value">${o.value}</span>
9
+ </div>`).join("")}
10
+ </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 ADDED
@@ -0,0 +1 @@
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}
@@ -58,6 +58,7 @@ export declare const seerTheme: {
58
58
  tooltip: {
59
59
  borderWidth: number;
60
60
  padding: number;
61
+ backgroundColor: string;
61
62
  textStyle: {
62
63
  color: string;
63
64
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@idux/charts-core",
3
- "version": "0.4.1",
3
+ "version": "0.5.0",
4
4
  "description": "A UI Component Development Kit for Vue 3.x",
5
5
  "keywords": [
6
6
  "vue",