Could you please provide an example of getting the chart instance in Vue composition API

[dvago]

Confirmation

• [X] I can confirm this is a feature request for the Vue component instead of ECharts itself.

Details

Hi there,

I'm reaching out as I would like to use the getWidth and getHeight methods to draw some graphic within a chart instance but I can't find a way to refer to the chart instance when initialized as per your documented demo:

<template>
  <v-chart class="chart" :option="option" />
</template>

see document, Vue 3 demo.

Could you please provide a sample and maybe update the README file?

Thanks in advance.

[Justineo]

All methods are exposed on the component instance and you can just use a template ref to access them.

<script setup>
import { ref, onMounted } from 'vue'
import VChart from 'vue-echarts'

const option = ref({ /* option */ })
const chart = ref(null)

onMounted(() => {
  console.log(chart.value.getWidth())
})
</script>

<template>
  <v-chart :option="option" ref="chart" />
</template>

[kouts]

For TypeScript that would be:

const chart = ref<InstanceType<typeof VChart> | null>(null);