vue3集成Echarts,自定义ToolBox时无法监听参数变化

原创 于 2024-06-26 10:43:03 发布 · 350 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#echarts #前端 #javascript

问题描述

在vue中集成echart中自定义ToolBox工具的点击事件，并将里面的typeBar赋给data中的变量，随后用watch监听这个变量的变化，发现监听不到！！！！

解决方案：一直以为是watch不能监听到echarts内部事件，最终原因是this 绑定问题。

方法一：将     that = this

方法二：如图修改

渣成沙
关注
12-Echarts 配置系列之：图表工具栏 Toolbox
youyudehan的博客
11-28 1万+
快速了解Echarts 中的 toolbox 工具栏，并在工具栏中自定义点击方法，文章中提供截图中的 option 配置代码。
echarts最新版4.2.0-rc.2
10-23
此外，ECharts 与 Vue.js、React 等前端框架有良好的集成方案，方便在现代 Web 应用中使用。 总结起来，ECharts 4.2.0-rc.2 是一个强大且灵活的前端可视化工具，无论是在数据展示、交互设计还是性能优化方面，都能...
Echarts:重写toolbox的还原工具并监听click事件
weixin_38942919的博客
01-05 7342
Echarts中的toolbox.feature提供了部分图标，比如 saveAsImage 保存图片 restore配置项还原 dataView数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。 dataZoom数据区域缩放，目前只支持直角坐标系的缩放。 magicType动态类型切换 brush选择组件的控制按钮等。 配置代码： toolbox: { show: true, feature: { dataZoom: { ...
封装的echarts子组件使用watch监听option失效的问题
qq_52683382的博客
03-12 830
封装的echarts子组件使用watch监听option失效的问题
echarts 4.9.0 版本 toolbox 点击失效
L_shouzi的博客
09-28 1871
问题：右上角切换状态栏鼠标点击无效、触摸板点击有效 解决： 不清楚问题原因是什么 猜测是层级的问题 ，因为是canvas 画出来的所以看不到他的层级， 但是通过设置toolbox.zleveltoolbox.z属性也没有效果，最终降低了echarts 版本到3.6.2 问题解决 所以最新的不一定是最好的 ...
Vue echart toolbox 工具栏点击 自定义全屏按钮 显示到弹出框中
Principal_Z的博客
09-04 2192
最终效果 说明： 由于页面上的echart图表过多，写一个vue子组件，直接在父页面调取复用 安装插件 npm i echarts 在 main.js 中引用 import echarts from 'echarts' Vue.prototype.$echarts = echarts // 全局引用 子组件 <template> <el-dialog top="40px" width="50%" :modal="true" :title="tit
在Vue中使用echarts的实例代码（3种图）
12-07
在本文中，我们将探讨如何在Vue项目中手动集成ECharts并实现动态数据驱动的图表切换。 首先，我们需要引入ECharts的核心库以及需要的图表类型，如柱状图、折线图等。这可以通过`require`语句完成，如下所示： ```...
从零开始：Vue项目中集成ECharts创建知识图谱的全过程
[从零开始：Vue项目中集成ECharts创建知识图谱的全过程](https://programmerah.com/wp-content/uploads/2022/03/2772490-20220305133352175-1521238351.png) # 摘要 本文旨在介绍ECharts库在Vue项目中的集成与应用...
ECharts框架整合术：React_Angular_Vue中的ECharts应用秘籍
![echarts~echarts-gl 配套版本文件]...本文首先对ECharts框架进行概述，分析其作为数据可视化工具的优势，接着深入探讨了ECharts在React、Angular和Vue等现代JavaScript框架中的集成方法和高级实践。文章详细介绍了ECh
跨平台知识图谱解决方案：Vue打包与ECharts移动适配的终极指南
[跨平台知识图谱解决方案：Vue打包与ECharts移动适配的终极指南](https://opengraph.githubassets.com/c39547685448022ed431b02cb85d4705e3cf38b0d71e4e99e70406de8b3f1c0a/vuejs/vue-cli/issues/1644) # 摘要 随着...
vue-2-toolbox
04-19
Vue显示工具 该项目旨在开发经常使用的功能作为Vue组件。 现在有空： 选框 可编辑的字段 缩略图-道具： 内容-默认值：“ ...” visible-默认值：true //可见性 autoHide-默认值：false //要使用自动隐藏，父组件中必须存在带有布尔值的v模型，以提高可见性 autoHideTime-，// //设置关闭前的超时时间（以毫秒为单位） closeCross-默认值：false //在右侧显示十字以关闭缩略图 位置-默认值：“右//右，左，中心可用，缩略图始终位于屏幕的底部 thumbnailType-默认值：“ neutral” //“ neutral”，“ success”，“ error”-更改背景颜色 detailsButton-默认值：false 宽度-默认值：“自动” 所有这些都是vue组件文件。 要在项目中使用它们，只需将文件复制到co
vue项目中实现echarts的toolbox自定义一键复制功能，自定义icon-----附详解
wzy_PROTEIN的博客
01-05 2408
实现echarts图表内数据的一键复制功能
如何在vue3中使用echarts
Yao_Huang_的博客
08-22 1448
如何在vue3中使用echarts
vue+echarts点击toolbox工具栏切换数据源
m0_55892953的博客
08-11 1363
<template> <div :class="className" :style="{height:height,width:width}" /> </template> <script> import echarts from 'echarts' import resize from './mixins/resize' export default { mixins: [resize], props: { .
vue项目里自定义toolbox工具按钮，添加点击事件，来控制图表是否显示数值
weixin_44229267的博客
01-10 1152
今天写项目的时候遇到一个问题：vue项目里需要自定义toolbox工具按钮，实现控制图表上是否显示数值，即来回切换show的值为true或false。 实现代码比较简单，就是找起来麻烦了点。废话不多说，代码如下。 //……………………………… // 自定义工具按钮 myTool1: { show: true, title: "显示数值", icon: "path://M469.333333 469.333333v85.33333
vue3+Echarts实现中国地图
最新发布
liuzaixi的博客
03-13 5314
3、如果引入的是china.json，那么需要配置echarts.registerMap('china', china)，如果引入的是china.js文件就不需要了。4、如果出险加载后的数据没有颜色（如下图所示）可能是china.json文件里的name名字与数据上的name名字不对应，检查一下，name名字是否一致。全选复制，在项目文件src文件下创建一个json文件，并在里面创建一个vue文件命名为china.vue。2、引入顺序是china.json，然后是echarts。1、地图要设置宽和高。
echarts折线图事件监听
zq15517069607的博客
04-06 938
记录echarts折线图添加鼠标事件监听失效问题 { symbol: 'none', name: '接收', data: [0, 1, 2, 3], type: 'line', } 鼠标需要在折线图的拐点圆圈才能触发事件，symbol: 'none’就把拐点圆圈删除了
关于Echarts柱状图监听点击事件的实现方法
m0_55333789的博客
09-04 5320
关于Echarts柱状图监听点击事件的实现方法
vue 使用echarts自定义数据视图样式并且导出excel
m0_58352785的博客
08-30 1895
vue 使用echarts自定义数据视图样式并且导出excel
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值