Echarts binding for Vue 3

1. Install

   pnpm i vue3-echarts

2. Register it in components of Vue options

   import { VueEcharts } from 'vue3-echarts';
   
   export default {
       data,
       methods,
       ...
       components: {
           VueEcharts,
       },
   }

3. Use the component in template

   <vue-echarts :option="option" style="height: 500px" ref="chart" />

   prop option is required

   (this.$refs.chart as InstanceType<typeof VueEcharts>).refreshOption();

   Note: vue-echarts has no height by default. You need to specify it manually. DOM size change is detected automatically using ResizeObserver, no manual resize call needed.

Type: object

Echarts option. Documents can be found here: https://echarts.apache.org/en/option.html#title. If null, loading animation will be shown

Type: string Default: default

Theme used, should be pre-registered using echarts.registerTheme

Type: number

Group name to be used in chart connection

Config used by showLoading.

Loading animation will be shown automatically when option is null or an empty object.

Other configuration used by echarts.init

Refresh option using setOption. If option is null or an empty object, loading animation will be shown. See loadingOption

Recreate echarts instance

Alias of echartsInstance.setOption

Alias of echartsInstance.dispatchAction

All echarts events are supported. Doc can be found here: https://echarts.apache.org/en/api.html#events

<vue-echarts @click="chartClicked" />

MIT