Vue-ECharts

Apache ECharts™ ^(v5) 的 Vue.js ^(v2/v3) 组件。

查看 Demo →

> [!IMPORTANT] > 我们新发布了一个[导入代码生成器](https://vue-echarts.dev/#codegen)，只需要把`option` 代码粘贴进去，就可以得到精确的导入代码。 > > ![](https://github.com/ecomfe/vue-echarts/assets/1726061/f9c38a06-3422-4f0e-ab8c-f242d9aea9aa) > > [试一试 →](https://vue-echarts.dev/#codegen) --- ## 💡 注意 💡 若您准备从 `vue-echarts` ≤ 5 的版本迁移到新版本，请在升级 v6 前阅读 _[迁移到 v6](#迁移到-v6)_ 部分文档。没准备好的话，可以继续阅读老版本的文档。[前往 →](https://github.com/ecomfe/vue-echarts/blob/5.x/README.zh_CN.md) ## 安装 & 使用 ### npm & ESM ```sh npm i echarts vue-echarts ``` 要在 _Vue 2_（<2.7.0）下使用 `vue-echarts`，需要确保 `@vue/composition-api` 已经安装（TypeScript 支持还需要 `@vue/runtime-core`）： ```sh npm i @vue/composition-api npm i @vue/runtime-core # TypeScript 支持 ``` 如果你在使用基于 _Vue 2_ 的 _NuxtJS_，则需要安装 `@nuxtjs/composition-api`： ```sh npm i @nuxtjs/composition-api ``` 然后在 `nuxt.config.js` 的 `buildModules` 选项中添加 `'@nuxtjs/composition-api/module'`。 #### 示例

Vue 3 Demo →

```vue ```

Vue 2 Demo →

```vue ```

> [!IMPORTANT] > 我们鼓励手动从 ECharts 中引入组件和图表，以减小打包体积。我们已经为此构建了一个[导入代码生成器](https://vue-echarts.dev/#codegen)。你只需要把`option` 代码粘贴进去，就可以得到精确的导入代码。 > > [试一试 →](https://vue-echarts.dev/#codegen) 但如果你实在需要全量引入 ECharts 从而无需手动引入模块，只需要在代码中添加： ```js import "echarts"; ``` ### CDN & 全局变量用如下方式在 HTML 中插入 ` ``` ```js const app = Vue.createApp(...) // 全局注册组件（也可以使用局部注册） app.component('v-chart', VueECharts) ```

Vue 2 Demo →

```html ``` ```js // 全局注册组件（也可以使用局部注册） Vue.component("v-chart", VueECharts); ```

可以在[这里](https://github.com/ecomfe/vue-echarts/tree/main/src/demo)查看更多例子。 ### Prop - `init-options: object` 初始化附加参数。请参考 `echarts.init` 的 `opts` 参数。[前往 →](https://echarts.apache.org/zh/api.html#echarts.init) Inject 键名：`INIT_OPTIONS_KEY`。 - `theme: string | object` 要应用的主题。请参考 `echarts.init` 的 `theme` 参数。[前往 →](https://echarts.apache.org/zh/api.html#echarts.init) Inject 键名：`THEME_KEY`。 - `option: object` ECharts 的万能接口。修改这个 prop 会触发 ECharts 实例的 `setOption` 方法。查看[详情 →](https://echarts.apache.org/zh/option.html) > 💡 在没有指定 `update-options` 时，如果直接修改 `option` 对象而引用保持不变，`setOption` 方法调用时将默认指定 `notMerge: false`；否则，如果为 `option` 绑定一个新的引用，将指定 `notMerge: true`。 - `update-options: object` 图表更新的配置项。请参考 `echartsInstance.setOption` 的 `opts` 参数。[前往 →](https://echarts.apache.org/zh/api.html#echartsInstance.setOption) Inject 键名：`UPDATE_OPTIONS_KEY`。 - `group: string` 图表的分组，用于[联动](https://echarts.apache.org/zh/api.html#echarts.connect)。请参考 `echartsInstance.group`。[前往 →](https://echarts.apache.org/zh/api.html#echartsInstance.group) - `autoresize: boolean | { throttle?: number, onResize?: () => void }`（默认值`false`）图表在组件根元素尺寸变化时是否需要自动进行重绘。也可以传入一个选项对象来指定自定义的节流延迟和尺寸变化时的额外回调函数。 - `loading: boolean`（默认值：`false`）图表是否处于加载状态。 - `loading-options: object` 加载动画配置项。请参考 `echartsInstance.showLoading` 的 `opts` 参数。[前往 →](https://echarts.apache.org/zh/api.html#echartsInstance.showLoading) Inject 键名：`LOADING_OPTIONS_KEY`。 - `manual-update: boolean`（默认值`false`）在性能敏感（数据量很大）的场景下，我们最好对于 `option` prop 绕过 Vue 的响应式系统。当将 `manual-update` prop 指定为 `true` 且不传入 `option` prop 时，数据将不会被监听。然后，需要用 `ref` 获取组件实例以后手动调用 `setOption` 方法来更新图表。 ### 事件可以使用 Vue 的 `v-on` 指令绑定事件。 ```vue ``` > **Note** > > 仅支持 `.once` 修饰符，因为其它修饰符都与 DOM 事件机制强耦合。 Vue-ECharts 支持如下事件： - `highlight` [→](https://echarts.apache.org/zh/api.html#events.highlight) - `downplay` [→](https://echarts.apache.org/zh/api.html#events.downplay) - `selectchanged` [→](https://echarts.apache.org/zh/api.html#events.selectchanged) - `legendselectchanged` [→](https://echarts.apache.org/zh/api.html#events.legendselectchanged) - `legendselected` [→](https://echarts.apache.org/zh/api.html#events.legendselected) - `legendunselected` [→](https://echarts.apache.org/zh/api.html#events.legendunselected) - `legendselectall` [→](https://echarts.apache.org/zh/api.html#events.legendselectall) - `legendinverseselect` [→](https://echarts.apache.org/zh/api.html#events.legendinverseselect) - `legendscroll` [→](https://echarts.apache.org/zh/api.html#events.legendscroll) - `datazoom` [→](https://echarts.apache.org/zh/api.html#events.datazoom) - `datarangeselected` [→](https://echarts.apache.org/zh/api.html#events.datarangeselected) - `timelinechanged` [→](https://echarts.apache.org/zh/api.html#events.timelinechanged) - `timelineplaychanged` [→](https://echarts.apache.org/zh/api.html#events.timelineplaychanged) - `restore` [→](https://echarts.apache.org/zh/api.html#events.restore) - `dataviewchanged` [→](https://echarts.apache.org/zh/api.html#events.dataviewchanged) - `magictypechanged` [→](https://echarts.apache.org/zh/api.html#events.magictypechanged) - `geoselectchanged` [→](https://echarts.apache.org/zh/api.html#events.geoselectchanged) - `geoselected` [→](https://echarts.apache.org/zh/api.html#events.geoselected) - `geounselected` [→](https://echarts.apache.org/zh/api.html#events.geounselected) - `axisareaselected` [→](https://echarts.apache.org/zh/api.html#events.axisareaselected) - `brush` [→](https://echarts.apache.org/zh/api.html#events.brush) - `brushEnd` [→](https://echarts.apache.org/zh/api.html#events.brushEnd) - `brushselected` [→](https://echarts.apache.org/zh/api.html#events.brushselected) - `globalcursortaken` [→](https://echarts.apache.org/zh/api.html#events.globalcursortaken) - `rendered` [→](https://echarts.apache.org/zh/api.html#events.rendered) - `finished` [→](https://echarts.apache.org/zh/api.html#events.finished) - 鼠标事件 - `click` [→](https://echarts.apache.org/zh/api.html#events.Mouse%20events.click) - `dblclick` [→](https://echarts.apache.org/zh/api.html#events.Mouse%20events.dblclick) - `mouseover` [→](https://echarts.apache.org/zh/api.html#events.Mouse%20events.mouseover) - `mouseout` [→](https://echarts.apache.org/zh/api.html#events.Mouse%20events.mouseout) - `mousemove` [→](https://echarts.apache.org/zh/api.html#events.Mouse%20events.mousemove) - `mousedown` [→](https://echarts.apache.org/zh/api.html#events.Mouse%20events.mousedown) - `mouseup` [→](https://echarts.apache.org/zh/api.html#events.Mouse%20events.mouseup) - `globalout` [→](https://echarts.apache.org/zh/api.html#events.Mouse%20events.globalout) - `contextmenu` [→](https://echarts.apache.org/zh/api.html#events.Mouse%20events.contextmenu) - ZRender 事件 - `zr:click` - `zr:mousedown` - `zr:mouseup` - `zr:mousewheel` - `zr:dblclick` - `zr:contextmenu` 请参考支持的事件列表。[前往 →](https://echarts.apache.org/zh/api.html#events) #### 原生 DOM 事件由于 Vue-ECharts 默认将事件绑定到 ECharts 实例，因此在使用原生 DOM 事件时需要做一些特殊处理。你需要在事件名称前加上 `native:` 前缀来绑定原生 DOM 事件（可以在 Vue 2 中也可以使用 `.native` 修饰符，但这在 Vue 3 中已被废弃）。 ```vue ``` ### Provide / Inject Vue-ECharts 为 `theme`、`init-options`、`update-options` 和 `loading-options` 提供了 provide/inject API，以通过上下文配置选项。例如：可以通过如下方式来使用 provide API 为 `init-options` 提供上下文配置：

```js import { THEME_KEY } from 'vue-echarts' import { provide } from 'vue' // 组合式 API provide(THEME_KEY, 'dark') // 选项式 API { provide: { [THEME_KEY]: 'dark' } } ```

```js import { THEME_KEY } from 'vue-echarts' // 组件选项中 { provide: { [THEME_KEY]: 'dark' } } ``` > **Note** > > 在 Vue 2 中，如果你想动态地改变这些选项，那么你需要提供一个对象。 > > ```js > // 组件选项中 > { > data () { > return { > theme: { value: 'dark' } > } > }, > provide () { > return { > [THEME_KEY]: this.theme > } > } > } > ```

### 方法 - `setOption` [→](https://echarts.apache.org/zh/api.html#echartsInstance.setOption) - `getWidth` [→](https://echarts.apache.org/zh/api.html#echartsInstance.getWidth) - `getHeight` [→](https://echarts.apache.org/zh/api.html#echartsInstance.getHeight) - `getDom` [→](https://echarts.apache.org/zh/api.html#echartsInstance.getDom) - `getOption` [→](https://echarts.apache.org/zh/api.html#echartsInstance.getOption) - `resize` [→](https://echarts.apache.org/zh/api.html#echartsInstance.resize) - `dispatchAction` [→](https://echarts.apache.org/zh/api.html#echartsInstance.dispatchAction) - `convertToPixel` [→](https://echarts.apache.org/zh/api.html#echartsInstance.convertToPixel) - `convertFromPixel` [→](https://echarts.apache.org/zh/api.html#echartsInstance.convertFromPixel) - `containPixel` [→](https://echarts.apache.org/zh/api.html#echartsInstance.containPixel) - `showLoading` [→](https://echarts.apache.org/zh/api.html#echartsInstance.showLoading) - `hideLoading` [→](https://echarts.apache.org/zh/api.html#echartsInstance.hideLoading) - `getDataURL` [→](https://echarts.apache.org/zh/api.html#echartsInstance.getDataURL) - `getConnectedDataURL` [→](https://echarts.apache.org/zh/api.html#echartsInstance.getConnectedDataURL) - `clear` [→](https://echarts.apache.org/zh/api.html#echartsInstance.clear) - `dispose` [→](https://echarts.apache.org/zh/api.html#echartsInstance.dispose) ### 静态方法静态方法请直接通过 [`echarts` 本身](https://echarts.apache.org/zh/api.html#echarts)进行调用。 ## CSP: `style-src` 或 `style-src-elem` 如果你正在应用 CSP 来防止内联 `

	Stars	Issues	Version	Updated	Created
@nivo/bar	12,682	121	0.86.0	2 days ago	6 years ago
react-chartjs-2	6,393	96	5.2.0	a year ago	8 years ago
react-vis	8,659	343	1.12.1	a year ago	8 years ago
recharts	22,725	496	2.12.6	11 days ago	9 years ago
vue-echarts			6.7.1	8 days ago	8 years ago

@nivo/bar vs react-chartjs-2 vs react-vis vs recharts vs vue-echarts

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past