这种情况下怎么给echarts添加组件？

Question

如下，这种情况下怎么给echarts添加点击事件？

<template>
 <Echart  :options="lineOptionsData" :height="350" />
</template>

<script setup lang='ts'>
import {lineOptionsOne} from './echarts-data'
const lineOptionsData = reactive<EChartsOption>(lineOptionsOne) as EChartsOption
</script>

Answer 1

在外部调用 Echart 方法，需要该组件提供对应的事件方可调用。你可以在组件中添加自己的方法实现让后抛出，外部即可使用。

// 方法1: props 中增加方法，父组件向内传递
<Echart  :options="lineOptionsData" :height="350" @customClick="customClick" />

// Echart 组件内，在对应事件中触发方法调用
const someMethod = () => {
    props.customClick?.()
}

// 方法2: 组件内容实现，提供给外部使用
const someMethod = () => {
    // 实现
}
// 通过 defineExpose 将方法暴露出去
defineExpose({ someMethod })

// 外部使用
<Echart ref={echartRef} :options="lineOptionsData" :height="350" />

echartRef.value?.()