echarts 自定义tooltips 点击事件

目前测试出3种实现方式

方式1 常规的 通过监听

image.png

image.png

image.png

image.png


方式2 通过window

此方法应考虑销毁组件时 去除定义方法

onUnmounted(() => {
  delete window.test1; // 必须手动删除
});
image.png

image.png


方式3 通过闭包注入

闭包是能够访问其他函数作用域变量的函数2。在 ECharts 场景中,通过将组件方法转换为字符串并注入到 HTML 字符串中,利用闭包保留对原方法作用域的访问权
toString() 的作用
将函数转为字符串后,可通过 eval 或 new Function 在目标作用域重建函数。

例如:
const handleClick = (param) => { console.log(param) };
const fnStr = handleClick.toString(); // 转为字符串"param => { console.log(param) }"
const reconstructedFn = new Function('return ' + fnStr)(); // 重建函数
reconstructedFn('test'); // 正常执行
实际使用:

注意写法
方法test1 还是在最外面
6666 是传参

const test1 = (val) => {log('val')}
image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容