@macroui/echarts-vue 1.0.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.
Files changed (16) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +550 -0
  3. package/README.zh-Hans.md +518 -0
  4. package/dist/graphic.d.ts +2786 -0
  5. package/dist/graphic.js +673 -0
  6. package/dist/graphic.js.map +1 -0
  7. package/dist/index-CJnrqQei.d.ts +219 -0
  8. package/dist/index.d.ts +2 -0
  9. package/dist/index.js +741 -0
  10. package/dist/index.js.map +1 -0
  11. package/dist/index.min.js +5 -0
  12. package/dist/index.min.js.map +1 -0
  13. package/dist/runtime-CcSlBnVC.js +55 -0
  14. package/dist/runtime-CcSlBnVC.js.map +1 -0
  15. package/dist/style.css +3 -0
  16. package/package.json +92 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ The MIT License (MIT)
2
+
3
+ Copyright (c) 2016-present GU Yiling & ECOMFE
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,550 @@
1
+ <p align="center"><a href="https://vue-echarts.dev/"><img alt="@macroui/echarts-vue" src="https://raw.githubusercontent.com/ecomfe/vue-echarts/refs/heads/main/demo/public/favicon.svg" width="96"></a></p>
2
+ <h1 align="center">@macroui/echarts-vue</h1>
3
+
4
+ <p align="center">Vue.js component for Apache ECharts™, themed with MacroUI (DaisyUI).</p>
5
+ <p align="center"><a href="https://npmjs.com/package/@macroui/echarts-vue"><img alt="npm version" src="https://img.shields.io/npm/v/@macroui/echarts-vue"></a> <a href="https://codecov.io/gh/ecomfe/vue-echarts"><img alt="test coverage" src="https://img.shields.io/codecov/c/github/ecomfe/vue-echarts"></a> <a href="https://vue-echarts.dev/"><img src="https://img.shields.io/badge/Demo%20%C2%BB-20c3aa" alt="View demo"></a> <a href="./README.zh-Hans.md"><img src="https://img.shields.io/badge/%E4%B8%AD%E6%96%87%E7%89%88%20%C2%BB-000" alt="前往中文版"></a></p>
6
+
7
+ > @macroui/echarts-vue is a renamed fork of [vue-echarts](https://github.com/ecomfe/vue-echarts) that ships with the [MacroUI (DaisyUI)](https://macroui.com) theme system. Pick any daisyui theme via `data-theme` on `<html>` to recolor the demo.
8
+
9
+ > Still using Vue 2? Read v7 docs [here →](https://github.com/ecomfe/vue-echarts/tree/7.x)
10
+
11
+ ## Installation & usage
12
+
13
+ ### npm
14
+
15
+ ```sh
16
+ npm install echarts @macroui/echarts-vue @macroui/macroui tailwindcss
17
+ ```
18
+
19
+ #### Example
20
+
21
+ <details open>
22
+ <summary><a href="https://stackblitz.com/edit/vue-echarts-8?file=src%2FApp.vue">Demo →</a></summary>
23
+
24
+ ```vue
25
+ <template>
26
+ <VChart class="chart" :option="option" />
27
+ </template>
28
+
29
+ <script setup>
30
+ import { use } from "echarts/core";
31
+ import { CanvasRenderer } from "echarts/renderers";
32
+ import { PieChart } from "echarts/charts";
33
+ import { TitleComponent, TooltipComponent, LegendComponent } from "echarts/components";
34
+ import VChart, { THEME_KEY } from "@macroui/echarts-vue";
35
+ import { ref, provide } from "vue";
36
+
37
+ use([CanvasRenderer, PieChart, TitleComponent, TooltipComponent, LegendComponent]);
38
+
39
+ provide(THEME_KEY, "dark");
40
+
41
+ const option = ref({
42
+ title: {
43
+ text: "Traffic Sources",
44
+ left: "center",
45
+ },
46
+ tooltip: {
47
+ trigger: "item",
48
+ formatter: "{a} <br/>{b} : {c} ({d}%)",
49
+ },
50
+ legend: {
51
+ orient: "vertical",
52
+ left: "left",
53
+ data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"],
54
+ },
55
+ series: [
56
+ {
57
+ name: "Traffic Sources",
58
+ type: "pie",
59
+ radius: "55%",
60
+ center: ["50%", "60%"],
61
+ data: [
62
+ { value: 335, name: "Direct" },
63
+ { value: 310, name: "Email" },
64
+ { value: 234, name: "Ad Networks" },
65
+ { value: 135, name: "Video Ads" },
66
+ { value: 1548, name: "Search Engines" },
67
+ ],
68
+ emphasis: {
69
+ itemStyle: {
70
+ shadowBlur: 10,
71
+ shadowOffsetX: 0,
72
+ shadowColor: "rgba(0, 0, 0, 0.5)",
73
+ },
74
+ },
75
+ },
76
+ ],
77
+ });
78
+ </script>
79
+
80
+ <style scoped>
81
+ .chart {
82
+ height: 400px;
83
+ }
84
+ </style>
85
+ ```
86
+
87
+ </details>
88
+
89
+ #### On-demand importing&nbsp;<sup><a href="#on-demand-importing"><img src="https://img.shields.io/badge/recommended-10B981" alt="recommended" align="middle" height="16"></a></sup>
90
+
91
+ To keep your bundle size small, we recommend manually importing the components and charts you need from ECharts. To make this easier, we’ve created an [import code generator](https://vue-echarts.dev/#codegen). Simply paste your `option` code into the tool, and it will generate the exact import statements for you.
92
+
93
+ <picture>
94
+ <source media="(prefers-color-scheme: dark)" srcset="assets/codegen-dark.webp">
95
+ <source media="(prefers-color-scheme: light)" srcset="assets/codegen-light.webp">
96
+ <img alt="A modal for generating ECharts import code. The left panel shows a chart configuration in JSON, while the right panel displays TypeScript import statements for ECharts charts and components." src="assets/codegen-light.webp">
97
+ </picture>
98
+
99
+ [Try it →](https://vue-echarts.dev/#codegen)
100
+
101
+ But if you really want to import the whole ECharts bundle without having to import modules manually, just add this in your code:
102
+
103
+ ```js
104
+ import "echarts";
105
+ ```
106
+
107
+ ### MacroUI (DaisyUI) theme
108
+
109
+ The demo is themed with [MacroUI](https://macroui.com) (the Chinese localization of [DaisyUI](https://daisyui.com)). To use it in your project:
110
+
111
+ ```js
112
+ // tailwind.config.js
113
+ import macroui from "@macroui/macroui";
114
+
115
+ export default {
116
+ content: ["./index.html", "./src/**/*.{vue,js,ts}"],
117
+ plugins: [macroui],
118
+ macroui: {
119
+ themes: ["light", "dark", "cupcake", "corporate", /* ... */],
120
+ },
121
+ };
122
+ ```
123
+
124
+ ```css
125
+ /* your global stylesheet */
126
+ @tailwind base;
127
+ @tailwind components;
128
+ @tailwind utilities;
129
+ ```
130
+
131
+ Switch the active theme at runtime by setting `data-theme` on `<html>`:
132
+
133
+ ```html
134
+ <html data-theme="dark"></html>
135
+ ```
136
+
137
+ ### CDN
138
+
139
+ Drop `<script>` inside your HTML file and access the component via `window.MacrouiECharts`.
140
+
141
+ <details>
142
+ <summary><a href="https://stackblitz.com/edit/vue-echarts-8-global?file=index.html">Demo →</a></summary>
143
+
144
+ <!-- scripts:start -->
145
+
146
+ ```html
147
+ <script src="https://cdn.jsdelivr.net/npm/echarts@6.0.0"></script>
148
+ <script src="https://cdn.jsdelivr.net/npm/vue@3.5.27"></script>
149
+ <script src="https://cdn.jsdelivr.net/npm/macroui-echarts-vue@8.1.0-beta.2"></script>
150
+ ```
151
+
152
+ <!-- scripts:end -->
153
+
154
+ ```js
155
+ const app = Vue.createApp(...)
156
+
157
+ // register globally (or you can do it locally)
158
+ app.component('VChart', MacrouiECharts)
159
+ ```
160
+
161
+ </details>
162
+
163
+ See more examples [here](https://github.com/ecomfe/vue-echarts/tree/main/demo).
164
+
165
+ ### Props
166
+
167
+ - `init-options: object`
168
+
169
+ Optional chart init configurations. See `echarts.init`'s `opts` parameter [here →](https://echarts.apache.org/en/api.html#echarts.init)
170
+
171
+ Injection key: `INIT_OPTIONS_KEY`.
172
+
173
+ - `theme: string | object`
174
+
175
+ Theme to be applied. See `echarts.init`'s `theme` parameter [here →](https://echarts.apache.org/en/api.html#echarts.init)
176
+
177
+ Injection key: `THEME_KEY`.
178
+
179
+ - `option: object`
180
+
181
+ ECharts' universal interface. Modifying this prop triggers Vue ECharts to compute an update plan and call `setOption`. Read more [here →](https://echarts.apache.org/en/option.html)
182
+
183
+ #### Smart update
184
+ - If you supply `update-options` (via prop or injection), Vue ECharts forwards it directly to `setOption` and skips the planner.
185
+ - Manual `setOption` calls (only available when `manual-update` is `true`) behave like native ECharts, honouring only the per-call override you pass in and are not carried across re-initializations.
186
+ - Otherwise, Vue ECharts analyses the change: removed objects become `null`, removed arrays become `[]` with `replaceMerge`, ID/anonymous deletions trigger `replaceMerge`, and risky changes fall back to `notMerge: true`.
187
+
188
+ - `update-options: object`
189
+
190
+ Options for updating chart option. If supplied (or injected), Vue ECharts forwards it directly to `setOption`, skipping the [smart update](#smart-update). See `echartsInstance.setOption`'s `opts` parameter [here →](https://echarts.apache.org/en/api.html#echartsInstance.setOption)
191
+
192
+ Injection key: `UPDATE_OPTIONS_KEY`.
193
+
194
+ - `group: string`
195
+
196
+ Group name to be used in chart [connection](https://echarts.apache.org/en/api.html#echarts.connect). See `echartsInstance.group` [here →](https://echarts.apache.org/en/api.html#echartsInstance.group)
197
+
198
+ - `autoresize: boolean | { throttle?: number, onResize?: () => void }` (default: `false`)
199
+
200
+ Whether the chart should be resized automatically whenever its root is resized. Use the options object to specify a custom throttle delay (in milliseconds) and/or an extra resize callback function.
201
+
202
+ - `loading: boolean` (default: `false`)
203
+
204
+ Whether the chart is in loading state.
205
+
206
+ - `loading-options: object`
207
+
208
+ Configuration item of loading animation. See `echartsInstance.showLoading`'s `opts` parameter [here →](https://echarts.apache.org/en/api.html#echartsInstance.showLoading)
209
+
210
+ Injection key: `LOADING_OPTIONS_KEY`.
211
+
212
+ - `manual-update: boolean` (default: `false`)
213
+
214
+ Handy for performance-sensitive charts (large or high-frequency updates). When set to `true`, Vue only uses the `option` prop for the initial render; later prop changes do nothing and you must drive updates via `setOption` on a template ref. If the chart re-initializes (for example due to `init-options` changes, flipping `manual-update`, or a remount), the manual state is discarded and the chart is rendered again from the current `option` value.
215
+
216
+ ### Events
217
+
218
+ You can bind events with Vue's `v-on` directive.
219
+
220
+ ```vue
221
+ <template>
222
+ <VChart :option="option" @highlight="handleHighlight" />
223
+ </template>
224
+ ```
225
+
226
+ > [!NOTE]
227
+ > Only the `.once` event modifier is supported as other modifiers are tightly coupled with the DOM event system.
228
+
229
+ Vue ECharts support the following events:
230
+
231
+ - `highlight` [→](https://echarts.apache.org/en/api.html#events.highlight)
232
+ - `downplay` [→](https://echarts.apache.org/en/api.html#events.downplay)
233
+ - `selectchanged` [→](https://echarts.apache.org/en/api.html#events.selectchanged)
234
+ - `legendselectchanged` [→](https://echarts.apache.org/en/api.html#events.legendselectchanged)
235
+ - `legendselected` [→](https://echarts.apache.org/en/api.html#events.legendselected)
236
+ - `legendunselected` [→](https://echarts.apache.org/en/api.html#events.legendunselected)
237
+ - `legendselectall` [→](https://echarts.apache.org/en/api.html#events.legendselectall)
238
+ - `legendinverseselect` [→](https://echarts.apache.org/en/api.html#events.legendinverseselect)
239
+ - `legendscroll` [→](https://echarts.apache.org/en/api.html#events.legendscroll)
240
+ - `datazoom` [→](https://echarts.apache.org/en/api.html#events.datazoom)
241
+ - `datarangeselected` [→](https://echarts.apache.org/en/api.html#events.datarangeselected)
242
+ - `timelinechanged` [→](https://echarts.apache.org/en/api.html#events.timelinechanged)
243
+ - `timelineplaychanged` [→](https://echarts.apache.org/en/api.html#events.timelineplaychanged)
244
+ - `restore` [→](https://echarts.apache.org/en/api.html#events.restore)
245
+ - `dataviewchanged` [→](https://echarts.apache.org/en/api.html#events.dataviewchanged)
246
+ - `magictypechanged` [→](https://echarts.apache.org/en/api.html#events.magictypechanged)
247
+ - `geoselectchanged` [→](https://echarts.apache.org/en/api.html#events.geoselectchanged)
248
+ - `geoselected` [→](https://echarts.apache.org/en/api.html#events.geoselected)
249
+ - `geounselected` [→](https://echarts.apache.org/en/api.html#events.geounselected)
250
+ - `axisareaselected` [→](https://echarts.apache.org/en/api.html#events.axisareaselected)
251
+ - `brush` [→](https://echarts.apache.org/en/api.html#events.brush)
252
+ - `brushEnd` [→](https://echarts.apache.org/en/api.html#events.brushEnd)
253
+ - `brushselected` [→](https://echarts.apache.org/en/api.html#events.brushselected)
254
+ - `globalcursortaken` [→](https://echarts.apache.org/en/api.html#events.globalcursortaken)
255
+ - `rendered` [→](https://echarts.apache.org/en/api.html#events.rendered)
256
+ - `finished` [→](https://echarts.apache.org/en/api.html#events.finished)
257
+ - Mouse events
258
+ - `click` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.click)
259
+ - `dblclick` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.dblclick)
260
+ - `mouseover` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.mouseover)
261
+ - `mouseout` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.mouseout)
262
+ - `mousemove` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.mousemove)
263
+ - `mousedown` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.mousedown)
264
+ - `mouseup` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.mouseup)
265
+ - `globalout` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.globalout)
266
+ - `contextmenu` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.contextmenu)
267
+ - ZRender events
268
+ - `zr:click`
269
+ - `zr:mousedown`
270
+ - `zr:mouseup`
271
+ - `zr:mousewheel`
272
+ - `zr:dblclick`
273
+ - `zr:contextmenu`
274
+
275
+ See supported events in the [ECharts API reference →](https://echarts.apache.org/en/api.html#events)
276
+
277
+ #### Native DOM events
278
+
279
+ As Vue ECharts binds events to the ECharts instance by default, there is some caveat when using native DOM events. You need to prefix the event name with `native:` to bind native DOM events.
280
+
281
+ ```vue
282
+ <template>
283
+ <VChart @native:click="handleClick" />
284
+ </template>
285
+ ```
286
+
287
+ Event handlers passed via attrs are reactive by default. Updating `onClick`, `onZr:*`, or `onNative:*` handlers will rebind them automatically.
288
+
289
+ ### Provide / inject
290
+
291
+ Vue ECharts provides provide/inject API for `theme`, `init-options`, `update-options` and `loading-options` to help configuring contextual options. eg. for `theme` you can use the provide API like this:
292
+
293
+ <details>
294
+ <summary>Composition API</summary>
295
+
296
+ ```js
297
+ import { THEME_KEY } from "@macroui/echarts-vue";
298
+ import { provide } from "vue";
299
+
300
+ provide(THEME_KEY, "dark");
301
+
302
+ // or provide a ref
303
+ const theme = ref("dark");
304
+ provide(THEME_KEY, theme);
305
+
306
+ // getter is also supported
307
+ provide(THEME_KEY, () => theme.value);
308
+ ```
309
+
310
+ </details>
311
+
312
+ <details>
313
+ <summary>Options API</summary>
314
+
315
+ ```js
316
+ import { THEME_KEY } from '@macroui/echarts-vue'
317
+ import { computed } from 'vue'
318
+
319
+ export default {
320
+ {
321
+ provide: {
322
+ [THEME_KEY]: 'dark'
323
+ }
324
+ }
325
+ }
326
+
327
+ // Or make injections reactive
328
+ export default {
329
+ data() {
330
+ return {
331
+ theme: 'dark'
332
+ }
333
+ },
334
+ provide() {
335
+ return {
336
+ [THEME_KEY]: computed(() => this.theme)
337
+ }
338
+ }
339
+ }
340
+ ```
341
+
342
+ </details>
343
+
344
+ ### Methods
345
+
346
+ - `setOption` [→](https://echarts.apache.org/en/api.html#echartsInstance.setOption)
347
+ - `getWidth` [→](https://echarts.apache.org/en/api.html#echartsInstance.getWidth)
348
+ - `getHeight` [→](https://echarts.apache.org/en/api.html#echartsInstance.getHeight)
349
+ - `getDom` [→](https://echarts.apache.org/en/api.html#echartsInstance.getDom)
350
+ - `getOption` [→](https://echarts.apache.org/en/api.html#echartsInstance.getOption)
351
+ - `resize` [→](https://echarts.apache.org/en/api.html#echartsInstance.resize)
352
+ - `dispatchAction` [→](https://echarts.apache.org/en/api.html#echartsInstance.dispatchAction)
353
+ - `convertToPixel` [→](https://echarts.apache.org/en/api.html#echartsInstance.convertToPixel)
354
+ - `convertFromPixel` [→](https://echarts.apache.org/en/api.html#echartsInstance.convertFromPixel)
355
+ - `containPixel` [→](https://echarts.apache.org/en/api.html#echartsInstance.containPixel)
356
+ - `getDataURL` [→](https://echarts.apache.org/en/api.html#echartsInstance.getDataURL)
357
+ - `getConnectedDataURL` [→](https://echarts.apache.org/en/api.html#echartsInstance.getConnectedDataURL)
358
+ - `clear` [→](https://echarts.apache.org/en/api.html#echartsInstance.clear)
359
+ - `dispose` [→](https://echarts.apache.org/en/api.html#echartsInstance.dispose)
360
+
361
+ > [!NOTE]
362
+ > The following ECharts instance methods aren't exposed because their functionality is already provided by component [props](#props):
363
+ >
364
+ > - [`showLoading`](https://echarts.apache.org/en/api.html#echartsInstance.showLoading) / [`hideLoading`](https://echarts.apache.org/en/api.html#echartsInstance.hideLoading): use the `loading` and `loading-options` props instead.
365
+ > - [`setTheme`](https://echarts.apache.org/en/api.html#echartsInstance.setTheme): use the `theme` prop instead.
366
+
367
+ ### Slots
368
+
369
+ Vue ECharts supports three slot categories:
370
+
371
+ - Callback slots for [`tooltip.formatter`](https://echarts.apache.org/en/option.html#tooltip.formatter).
372
+ - Callback slots for [`toolbox.feature.dataView.optionToContent`](https://echarts.apache.org/en/option.html#toolbox.feature.dataView.optionToContent).
373
+ - Optional `#graphic` slot (enabled by importing `@macroui/echarts-vue/graphic`) for building [`option.graphic`](https://echarts.apache.org/en/option.html#graphic) declaratively with `G*` components.
374
+
375
+ #### Callback slot naming convention (`tooltip*` / `dataView*`)
376
+
377
+ These naming rules apply to callback slots only. The graphic slot name is always `#graphic`.
378
+
379
+ - Slot names begin with `tooltip`/`dataView`, followed by hyphen-separated path segments to the target.
380
+ - Each segment corresponds to an `option` property name or an array index (for arrays, use the numeric index).
381
+ - The constructed slot name maps directly to the nested callback it overrides.
382
+
383
+ **Example mappings**:
384
+
385
+ - `tooltip` → `option.tooltip.formatter`
386
+ - `tooltip-baseOption` → `option.baseOption.tooltip.formatter`
387
+ - `tooltip-xAxis-1` → `option.xAxis[1].tooltip.formatter`
388
+ - `tooltip-series-2-data-4` → `option.series[2].data[4].tooltip.formatter`
389
+ - `dataView` → `option.toolbox.feature.dataView.optionToContent`
390
+ - `dataView-media-1-option` → `option.media[1].option.toolbox.feature.dataView.optionToContent`
391
+
392
+ The slot props correspond to the first parameter of the callback function.
393
+
394
+ <details>
395
+ <summary>Usage</summary>
396
+
397
+ ```vue
398
+ <template>
399
+ <VChart :option="chartOptions">
400
+ <!-- Global `tooltip.formatter` -->
401
+ <template #tooltip="params">
402
+ <div v-for="(param, i) in params" :key="i">
403
+ <span v-html="param.marker" />
404
+ <span>{{ param.seriesName }}</span>
405
+ <span>{{ param.value[0] }}</span>
406
+ </div>
407
+ </template>
408
+
409
+ <!-- Tooltip on xAxis -->
410
+ <template #tooltip-xAxis="params">
411
+ <div>X-Axis : {{ params.value }}</div>
412
+ </template>
413
+
414
+ <!-- Data View Content -->
415
+ <template #dataView="option">
416
+ <table>
417
+ <thead>
418
+ <tr>
419
+ <th v-for="(t, i) in option.dataset[0].source[0]" :key="i">
420
+ {{ t }}
421
+ </th>
422
+ </tr>
423
+ </thead>
424
+ <tbody>
425
+ <tr v-for="(row, i) in option.dataset[0].source.slice(1)" :key="i">
426
+ <th>{{ row[0] }}</th>
427
+ <td v-for="(v, i) in row.slice(1)" :key="i">{{ v }}</td>
428
+ </tr>
429
+ </tbody>
430
+ </table>
431
+ </template>
432
+ </VChart>
433
+ </template>
434
+ ```
435
+
436
+ [Example →](https://vue-echarts.dev/#line)
437
+
438
+ </details>
439
+
440
+ > [!NOTE]
441
+ > Slots take precedence over the corresponding callback defined in `props.option`.
442
+
443
+ #### Graphic slot&nbsp;<sup><a href="#slots"><img src="https://img.shields.io/badge/new-A855F7" alt="new" align="middle" height="16"></a></sup>
444
+
445
+ ```ts
446
+ import { GGroup, GRect, GText } from "@macroui/echarts-vue/graphic";
447
+ ```
448
+
449
+ Available components:
450
+
451
+ - `GGroup`
452
+ - `GRect`
453
+ - `GCircle`
454
+ - `GText`
455
+ - `GLine`
456
+ - `GPolyline`
457
+ - `GPolygon`
458
+ - `GImage`
459
+ - `GSector`
460
+ - `GRing`
461
+ - `GArc`
462
+ - `GBezierCurve`
463
+ - `GCompoundPath`
464
+
465
+ Read more at [ECharts `option.graphic` →](https://echarts.apache.org/en/option.html#graphic)
466
+
467
+ > [!NOTE]
468
+ >
469
+ > - Graphic element events additionally support `dblclick` and `contextmenu`.
470
+ > - Event listeners support the `.once` modifier.
471
+ > - `#graphic` overrides `option.graphic`. In `manual-update` mode, call `chartRef.setOption(...)` to apply changes.
472
+
473
+ <details>
474
+ <summary>Usage</summary>
475
+
476
+ ```vue
477
+ <script setup lang="ts">
478
+ import { ref } from "vue";
479
+ import type { ElementEvent } from "echarts/core";
480
+
481
+ const option = {
482
+ xAxis: { type: "category", data: ["Mon", "Tue", "Wed"] },
483
+ yAxis: { type: "value" },
484
+ series: [{ type: "line", data: [120, 200, 150] }],
485
+ };
486
+
487
+ const overlay = ref({ x: 84, y: 22 });
488
+
489
+ function onDrag(event: ElementEvent) {
490
+ overlay.value.x = event.offsetX - 44;
491
+ overlay.value.y = event.offsetY - 14;
492
+ }
493
+ </script>
494
+
495
+ <template>
496
+ <VChart :option="option">
497
+ <template #graphic>
498
+ <GGroup id="drag-handle" :x="overlay.x" :y="overlay.y">
499
+ <GRect :width="88" :height="28" :r="6" fill="#5470c6" draggable @drag="onDrag" />
500
+ <GText
501
+ :x="10"
502
+ :y="8"
503
+ :text="`x: ${Math.round(overlay.x)} y: ${Math.round(overlay.y)}`"
504
+ text-fill="#fff"
505
+ />
506
+ </GGroup>
507
+ </template>
508
+ </VChart>
509
+ </template>
510
+ ```
511
+
512
+ </details>
513
+
514
+ ### Static methods
515
+
516
+ Static methods can be accessed from [`echarts` itself](https://echarts.apache.org/en/api.html#echarts).
517
+
518
+ ## CSP: `style-src` or `style-src-elem`
519
+
520
+ If you are **both** enforcing a strict CSP that prevents inline `<style>` injection and targeting browsers that don't support the [CSSStyleSheet() constructor](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet#browser_compatibility), you need to manually include `@macroui/echarts-vue/style.css`.
521
+
522
+ ## Migration to v8
523
+
524
+ > [!NOTE]
525
+ > Please make sure to read the [upgrade guide](https://echarts.apache.org/handbook/en/basics/release-note/v6-upgrade-guide/) for ECharts 6 as well.
526
+
527
+ The following breaking changes are introduced in `macroui-echarts-vue@8`:
528
+
529
+ - **Vue 2 support is dropped:** If you still need to stay on Vue 2, use [`macroui-echarts-vue@7`](https://github.com/ecomfe/vue-echarts/tree/7.x).
530
+
531
+ - **Browser compatibility changes:** We no longer provide compatibility for browsers without native [`class`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#browser_compatibility) support. If you need to support legacy browsers, you must transpile the code to ES5 yourself.
532
+
533
+ - **CSP entry point removed:** The entry point `macroui-echarts-vue/csp` is removed. Use `macroui-echarts-vue` instead. You only need to manually include `macroui-echarts-vue/style.css` if you are **both** enforcing a strict CSP that prevents inline `<style>` injection and targeting browsers that don't support the [`CSSStyleSheet()` constructor](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet#browser_compatibility).
534
+
535
+ ## Local development
536
+
537
+ ```sh
538
+ pnpm i
539
+ pnpm dev
540
+ ```
541
+
542
+ The demo uses [MacroUI (DaisyUI)](https://macroui.com) for styling. To change the active theme at runtime, set `data-theme` on `<html>` (the toolbar in the demo exposes all 30 built-in themes).
543
+
544
+ Open `http://localhost:5173` to see the demo.
545
+
546
+ For testing and CI details, see [`tests/TESTING.md`](tests/TESTING.md).
547
+
548
+ ## Notice
549
+
550
+ The Apache Software Foundation [Apache ECharts, ECharts](https://echarts.apache.org/), Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the [Apache Software Foundation](https://www.apache.org/).