vue3-echarts
v1.1.0
Published
Echarts binding for Vue 3
Downloads
7,287
Readme
vue3-echarts
Echarts binding for Vue 3
How to use
Install
yarn add vue3-echarts
Register it in
components
of Vue optionsimport { VueEcharts } from 'vue3-echarts'; export default { data, methods, ... components: { VueEcharts, }, }
Use the component in template
<vue-echarts :option="option" style="height: 500px" ref="chart" />
prop
option
is required(this.$refs.chart as VueEcharts).refreshOption();
Note:
vue-echarts
has no height by default. You need to specify it manually. DOM size change is detected automatically usingResizeObserver
, no manualresize
call needed.
Props
option
Type: object
Echarts option. Documents can be found here: https://echarts.apache.org/en/option.html#title. If null
, loading
animation will be shown
theme
Type: string
Default: default
Theme used, should be pre-registered using echarts.registerTheme
groupId
Type: number
Group name to be used in chart connection
loadingOption
Config used by showLoading.
Loading animation will be shown automatically when option
is null or an empty object.
initCfg
Other configuration used by echarts.init
Methods
refreshOption
Refresh option using setOption
. If option
is null or an empty object, loading
animation will be shown. See loadingOption
refreshChart
Recreate echarts instance
setOption
Alias of echartsInstance.setOption
dispatchAction
Alias of echartsInstance.dispatchAction
events
All echarts events are supported. Doc can be found here: https://echarts.apache.org/en/api.html#events
LICENSE
MIT