zz-echarts
v0.0.2
Published
ECharts wrapper component for Vue 3, 2 and TypeScript
Downloads
2
Maintainers
Readme
Install
npm i -S zz-echarts
Usage
- Vue 3
import { createApp, h } from 'vue';
import { plugin } from 'zz-echarts';
import * as echarts from 'echarts';
const app = createApp({ /*...*/ });
app.use(plugin, { echarts, h }); // use as a plugin
<template>
<ECharts ref="chart" :option="option" />
</template>
<script>
import { createComponent } from 'zz-echarts';
import * as echarts from 'echarts';
import { h } from 'vue';
export default {
components: {
ECharts: createComponent({ echarts, h }), // use as a component
},
data: () => ({
option: { /*...*/ },
}),
methods: {
doSomething() {
this.$refs.chart.inst.getWidth(); // call the method of ECharts instance
},
},
}
</script>
- Vue 2
import Vue from 'vue';
import { plugin } from 'zz-echarts';
import * as echarts from 'echarts';
Vue.use(plugin, { echarts }); // use as a plugin
<template>
<ECharts ref="chart" :option="option" />
</template>
<script>
import { createComponent } from 'zz-echarts';
import * as echarts from 'echarts';
export default {
components: {
ECharts: createComponent({ echarts }), // use as a component
},
data: () => ({
option: { /*...*/ },
}),
methods: {
doSomething() {
this.$refs.chart.inst.getWidth(); // call the method of ECharts instance
},
},
}
</script>