\n\n> Still using Vue 2? Read v7 docs [here →](https://github.com/ecomfe/vue-echarts/tree/7.x)\n\n## Installation & Usage\n\n### npm\n\n```sh\nnpm install echarts vue-echarts\n```\n\n#### Example\n\n\nDemo →\n\n```vue\n\n \n\n\n\n\n\n```\n\n\n\n> [!IMPORTANT]\n> We encourage manually importing components and charts from ECharts for smaller bundle size. We've built an [import code generator](https://vue-echarts.dev/#codegen) to help you with that. You can just paste in your `option` code and we'll generate the precise import code for you.\n>\n> \n>\n> [Try it →](https://vue-echarts.dev/#codegen)\n\nBut if you really want to import the whole ECharts bundle without having to import modules manually, just add this in your code:\n\n```js\nimport \"echarts\";\n```\n\n### CDN\n\nDrop `\n\n\n```\n\n\n\n```js\nconst app = Vue.createApp(...)\n\n// register globally (or you can do it locally)\napp.component('VChart', VueECharts)\n```\n\n\n\nSee more examples [here](https://github.com/ecomfe/vue-echarts/tree/main/demo).\n\n### Props\n\n- `init-options: object`\n\n Optional chart init configurations. See `echarts.init`'s `opts` parameter [here →](https://echarts.apache.org/en/api.html#echarts.init)\n\n Injection key: `INIT_OPTIONS_KEY`.\n\n- `theme: string | object`\n\n Theme to be applied. See `echarts.init`'s `theme` parameter [here →](https://echarts.apache.org/en/api.html#echarts.init)\n\n Injection key: `THEME_KEY`.\n\n- `option: object`\n\n 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)\n\n #### Smart Update\n - If you supply `update-options` (via prop or injection), Vue ECharts forwards it directly to `setOption` and skips the planner.\n - 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.\n - 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`.\n\n- `update-options: object`\n\n 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)\n\n Injection key: `UPDATE_OPTIONS_KEY`.\n\n- `group: string`\n\n 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)\n\n- `autoresize: boolean | { throttle?: number, onResize?: () => void }` (default: `false`)\n\n 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.\n\n- `loading: boolean` (default: `false`)\n\n Whether the chart is in loading state.\n\n- `loading-options: object`\n\n Configuration item of loading animation. See `echartsInstance.showLoading`'s `opts` parameter [here →](https://echarts.apache.org/en/api.html#echartsInstance.showLoading)\n\n Injection key: `LOADING_OPTIONS_KEY`.\n\n- `manual-update: boolean` (default: `false`)\n\n 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.\n\n### Events\n\nYou can bind events with Vue's `v-on` directive.\n\n```vue\n\n \n\n```\n\n> [!NOTE]\n> Only the `.once` event modifier is supported as other modifiers are tightly coupled with the DOM event system.\n\nVue ECharts support the following events:\n\n- `highlight` [→](https://echarts.apache.org/en/api.html#events.highlight)\n- `downplay` [→](https://echarts.apache.org/en/api.html#events.downplay)\n- `selectchanged` [→](https://echarts.apache.org/en/api.html#events.selectchanged)\n- `legendselectchanged` [→](https://echarts.apache.org/en/api.html#events.legendselectchanged)\n- `legendselected` [→](https://echarts.apache.org/en/api.html#events.legendselected)\n- `legendunselected` [→](https://echarts.apache.org/en/api.html#events.legendunselected)\n- `legendselectall` [→](https://echarts.apache.org/en/api.html#events.legendselectall)\n- `legendinverseselect` [→](https://echarts.apache.org/en/api.html#events.legendinverseselect)\n- `legendscroll` [→](https://echarts.apache.org/en/api.html#events.legendscroll)\n- `datazoom` [→](https://echarts.apache.org/en/api.html#events.datazoom)\n- `datarangeselected` [→](https://echarts.apache.org/en/api.html#events.datarangeselected)\n- `timelinechanged` [→](https://echarts.apache.org/en/api.html#events.timelinechanged)\n- `timelineplaychanged` [→](https://echarts.apache.org/en/api.html#events.timelineplaychanged)\n- `restore` [→](https://echarts.apache.org/en/api.html#events.restore)\n- `dataviewchanged` [→](https://echarts.apache.org/en/api.html#events.dataviewchanged)\n- `magictypechanged` [→](https://echarts.apache.org/en/api.html#events.magictypechanged)\n- `geoselectchanged` [→](https://echarts.apache.org/en/api.html#events.geoselectchanged)\n- `geoselected` [→](https://echarts.apache.org/en/api.html#events.geoselected)\n- `geounselected` [→](https://echarts.apache.org/en/api.html#events.geounselected)\n- `axisareaselected` [→](https://echarts.apache.org/en/api.html#events.axisareaselected)\n- `brush` [→](https://echarts.apache.org/en/api.html#events.brush)\n- `brushEnd` [→](https://echarts.apache.org/en/api.html#events.brushEnd)\n- `brushselected` [→](https://echarts.apache.org/en/api.html#events.brushselected)\n- `globalcursortaken` [→](https://echarts.apache.org/en/api.html#events.globalcursortaken)\n- `rendered` [→](https://echarts.apache.org/en/api.html#events.rendered)\n- `finished` [→](https://echarts.apache.org/en/api.html#events.finished)\n- Mouse events\n - `click` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.click)\n - `dblclick` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.dblclick)\n - `mouseover` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.mouseover)\n - `mouseout` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.mouseout)\n - `mousemove` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.mousemove)\n - `mousedown` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.mousedown)\n - `mouseup` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.mouseup)\n - `globalout` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.globalout)\n - `contextmenu` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.contextmenu)\n- ZRender events\n - `zr:click`\n - `zr:mousedown`\n - `zr:mouseup`\n - `zr:mousewheel`\n - `zr:dblclick`\n - `zr:contextmenu`\n\nSee supported events in the [ECharts API reference →](https://echarts.apache.org/en/api.html#events)\n\n#### Native DOM Events\n\nAs 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.\n\n```vue\n\n \n\n```\n\n### Provide / Inject\n\nVue 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:\n\n\nComposition API\n\n```js\nimport { THEME_KEY } from \"vue-echarts\";\nimport { provide } from \"vue\";\n\nprovide(THEME_KEY, \"dark\");\n\n// or provide a ref\nconst theme = ref(\"dark\");\nprovide(THEME_KEY, theme);\n\n// getter is also supported\nprovide(THEME_KEY, () => theme.value);\n```\n\n\n\n\nOptions API\n\n```js\nimport { THEME_KEY } from 'vue-echarts'\nimport { computed } from 'vue'\n\nexport default {\n {\n provide: {\n [THEME_KEY]: 'dark'\n }\n }\n}\n\n// Or make injections reactive\nexport default {\n data() {\n return {\n theme: 'dark'\n }\n },\n provide() {\n return {\n [THEME_KEY]: computed(() => this.theme)\n }\n }\n}\n```\n\n\n\n### Methods\n\n- `setOption` [→](https://echarts.apache.org/en/api.html#echartsInstance.setOption)\n- `getWidth` [→](https://echarts.apache.org/en/api.html#echartsInstance.getWidth)\n- `getHeight` [→](https://echarts.apache.org/en/api.html#echartsInstance.getHeight)\n- `getDom` [→](https://echarts.apache.org/en/api.html#echartsInstance.getDom)\n- `getOption` [→](https://echarts.apache.org/en/api.html#echartsInstance.getOption)\n- `resize` [→](https://echarts.apache.org/en/api.html#echartsInstance.resize)\n- `dispatchAction` [→](https://echarts.apache.org/en/api.html#echartsInstance.dispatchAction)\n- `convertToPixel` [→](https://echarts.apache.org/en/api.html#echartsInstance.convertToPixel)\n- `convertFromPixel` [→](https://echarts.apache.org/en/api.html#echartsInstance.convertFromPixel)\n- `containPixel` [→](https://echarts.apache.org/en/api.html#echartsInstance.containPixel)\n- `getDataURL` [→](https://echarts.apache.org/en/api.html#echartsInstance.getDataURL)\n- `getConnectedDataURL` [→](https://echarts.apache.org/en/api.html#echartsInstance.getConnectedDataURL)\n- `clear` [→](https://echarts.apache.org/en/api.html#echartsInstance.clear)\n- `dispose` [→](https://echarts.apache.org/en/api.html#echartsInstance.dispose)\n\n> [!NOTE]\n> The following ECharts instance methods aren't exposed because their functionality is already provided by component [props](#props):\n>\n> - [`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.\n> - [`setTheme`](https://echarts.apache.org/en/api.html#echartsInstance.setTheme): use the `theme` prop instead.\n\n### Slots\n\nVue ECharts allows you to define ECharts option's [`tooltip.formatter`](https://echarts.apache.org/en/option.html#tooltip.formatter) and [`toolbox.feature.dataView.optionToContent`](https://echarts.apache.org/en/option.html#toolbox.feature.dataView.optionToContent) callbacks via Vue slots instead of defining them in your `option` object. This simplifies custom HTMLElement rendering using familiar Vue templating.\n\n#### Slot Naming Convention\n\n- Slot names begin with `tooltip`/`dataView`, followed by hyphen-separated path segments to the target.\n- Each segment corresponds to an `option` property name or an array index (for arrays, use the numeric index).\n- The constructed slot name maps directly to the nested callback it overrides.\n\n**Example mappings**:\n\n- `tooltip` → `option.tooltip.formatter`\n- `tooltip-baseOption` → `option.baseOption.tooltip.formatter`\n- `tooltip-xAxis-1` → `option.xAxis[1].tooltip.formatter`\n- `tooltip-series-2-data-4` → `option.series[2].data[4].tooltip.formatter`\n- `dataView` → `option.toolbox.feature.dataView.optionToContent`\n- `dataView-media-1-option` → `option.media[1].option.toolbox.feature.dataView.optionToContent`\n\nThe slot props correspond to the first parameter of the callback function.\n\n\nUsage\n\n```vue\n\n \n \n \n
\n \n \n\n```\n\n[Example →](https://vue-echarts.dev/#line)\n\n\n\n> [!NOTE]\n> Slots take precedence over the corresponding callback defined in `props.option`.\n\n### Static Methods\n\nStatic methods can be accessed from [`echarts` itself](https://echarts.apache.org/en/api.html#echarts).\n\n## CSP: `style-src` or `style-src-elem`\n\nIf you are **both** enforcing a strict CSP that prevents inline `
![\"Vue](\"https://raw.githubusercontent.com/ecomfe/vue-echarts/refs/heads/main/demo/public/favicon.svg\")
![\"npm](\"https://img.shields.io/npm/v/vue-echarts\")
![\"test](\"https://img.shields.io/codecov/c/github/ecomfe/vue-echarts\")
![\"View](\"https://img.shields.io/badge/Demo%20%C2%BB-20c3aa\"){kind=icon}
![\"前往中文版\"](\"https://img.shields.io/badge/%E4%B8%AD%E6%96%87%E7%89%88%20%C2%BB-000\"){kind=icon}