【Echarts】点击事件,点击柱状图柱子实现下钻

已于 2022-12-29 14:47:23 修改
阅读量819 收藏 2
点赞数
分类专栏： Echarts 文章标签： echarts 前端 javascript
于 2022-11-27 23:31:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67372185/article/details/128072002
版权

将xAxis属性中的triggerEvent设置为true;params可以拿到点击的柱子的信息

myChart = echarts.init(this.$refs.myCharts) //初始化
myChart.setOption(this.Option)
  // this.myChart.off('click');//关闭点击事件
     
 // echarts点击事件  关键代码
  this.myChart.on('click', (params)=>{
      console.log(params, "params");
})

很困的程序媛
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bar-drilldown-master:使用Echarts实现柱状图的下钻功能
04-28
Echarts实现柱状图下钻功能 [[toc]] 需求描述 在一个月份数据柱状图上，点击柱状图上的某一月份后可显示该月每一天的数据。 实现效果如下： 下钻前 下钻后 实现思路 Echarts本身并没有像HighCharts直接实现柱状图的下钻功能，但Echarts可以通过setOptions间接实现下钻功能。 通过点击月份柱状图的某一月，触发点击事件，点击事件的功能是销毁该Echarts实例，并会向后台请求该月份的数据，当后台返回数据后，进行重新初始化Echarts实例。 实现细节 前端部分 html代码 <!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <
echarts实现柱图的下钻功能
恒二哥的博客
06-23 4205
1、确保已安装了cnpm,使用cnpm命令安装echarts： 2、在main.js文件中，全局引入echarts： 3、创建柱状图HistogramChar.vue文件 4、引用该模块 5、实现效果： 原始数据，第一次加载 点击其中一条后，实现下钻功能，点击返回按钮,可以返回原来数据。.........
Echarts柱状图柱子添加点击事件
最新发布
CaseyWei
04-18 502
方法二：结合getZr和click实现这个效果（比较麻烦，可以用于更复杂效果的实现）抛回父组件，直接用这个index去x轴data里面取当前被点击的柱子的x轴坐标。params.offsetX，params.offsetY 为点击位置的坐标。这里只需要拿到被点击柱子对应的X轴时间坐标，可以直接监听click事件。拿到被点击的柱子的index（从0开始，number类型）拿到被点击的柱子的X轴坐标name。结合click事件可以拿到点击位置。可以实现在点击位置展示弹框的效果。
Echarts柱状图 （带下钻动画查询二级数据）
qq_48765361的博客
04-11 462
【代码】Echarts柱状图 （带下钻动画查询二级数据）
Echarts实现柱状图下钻功能
热门推荐
LiFH的博客
07-26 2万+
需求描述 在一个类别柱状图上，点击柱状图上的某一类后可显示该类具体的数据。 钻取的定义 钻取是改变维的层次，变换分析的粒度。包括向上钻取(drill up)和向下钻取(drill down).drill up 是在某一维上将低层次的细节数据概括到高层次的汇总数据，或者减少维数；而drill down则相反，它从汇总数据深入到细节数据进行观察或增加新维。 基本实现方式 High...
echarts 柱状图点击下钻，点击外部按钮可返回
qq_40295815的博客
10-28 1977
<!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div style="margin-left:40%;margin-top:2%"> <button id='return-button' value=''.
柱状图echarts图表及点击事件
12-11
echarts柱状图，有点击事件，可以点到对应的事件，自己可以加上自己想要的功能。
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
10-20
主要介绍了jQuery插件echarts实现的多柱子柱状图效果,结合完整实例形式分析了echarts绘制多柱子柱状图效果的操作步骤与相关实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
Echarts实现的地图关联柱状图
08-19
Echarts实现的地图关联柱状图
echarts 柱状图渐变色背景
05-14
该案例设置 echarts 柱状图渐变色，同样也可以应用折线图、圆形图等。效果说明：https://blog.csdn.net/qq_36437172/article/details/106115048
echart柱状图下钻
幸福有多远
12-19 2129
前言：举个列子，显示一周每天营业额            要知道每天都具体卖了哪些东西            所以还可以点击具体的哪一天，下钻查看具体卖出物品           现在只能点击星期一 &lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;
echarts地图下钻、柱状、条形完美结合
08-08
多方调查结合，终于整出了完美的地图展示及下钻功能，完美结合柱状、条形一体化
简单echarts地图三级下钻
08-21
简单的echarts三级下钻，注意下钻的时候，所用的js地图从echarts官网下载即可，下载时起的名字（不是保存的文件名字）要与你下钻时获取的名字一直，否则下钻不了。
学习笔记-echarts实现数据下钻
weixin_49020584的博客
11-25 1475
echarts数据下钻
echarts点击柱状图x轴或柱子实现超链接或下钻
恒二哥的博客
07-01 2896
1、需求，点击x轴坐标，触发事件，实现超链接、下钻等功能。2、将xAxis属性中的triggerEvent设置为true; 3、点击x轴事件，params.value代表点击x轴获取到的值 4、点击柱子事件，获取到object对象，通过object属性，判断点击哪个柱子，x轴等信息...............
Echarts柱状图柱子点击事件
littleOneYuan的博客
09-07 9992
文章目录效果展示需求实现 效果展示 需求 点击柱子显示当天的详细数据 实现 这里只需要拿到被点击柱子对应的X轴时间坐标，可以直接监听click事件 在DOM加载完为chart注册点击事件 拿到被点击的柱子的X轴坐标name 抛回父组件 方法一：直接监听click事件实现这个效果 click 可以拿到柱条 color: “#1DADF1” 第几个 componentIndex: 0 类型 seriesType/componentSubType: “bar” data/valu
echarts实现向下钻取
仅次于狼的博客
08-23 4056
实现一个向下钻取的效果：柱形图点击柱子则钻取，点击柱图空白返回。 line_chart1 = echarts.init(document.getElementById('lineChart1')); line_option1={ backgroundColor:'#0B2F64', title : { show:true, text: '这是一个标题', ...
柱状图下钻，例如柱状图中都是省级信息，当点击其中一个进入到显示当前省级的所以市级信息，右键返回上一级
qq_41339975的博客
08-02 372
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
echarts积累之--图表下钻
weixin_58031521的博客
02-24 3479
echarts积累之图表下钻
echarts 点击柱状图柱子放大
05-23
在 ECharts 中，可以通过数据区域缩放组件实现点击柱状图柱子放大的效果。 首先需要引入数据区域缩放组件： ```javascript option = { ... toolbox: { feature: { dataZoom: { yAxisIndex: 'none' }, ... } }, ... }; ``` 然后，在柱状图的 series 中添加 `markPoint` 和 `markLine` 配置： ```javascript option = { ... series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20], markPoint: { symbolSize: 70, label: { show: false }, data: [{ coord: [0, 5], name: '点击放大', value: '', symbolOffset: [0, -35] }, { coord: [1, 20], name: '点击放大', value: '', symbolOffset: [0, -35] }, { coord: [2, 36], name: '点击放大', value: '', symbolOffset: [0, -35] }, { coord: [3, 10], name: '点击放大', value: '', symbolOffset: [0, -35] }, { coord: [4, 10], name: '点击放大', value: '', symbolOffset: [0, -35] }, { coord: [5, 20], name: '点击放大', value: '', symbolOffset: [0, -35] }], itemStyle: { color: 'transparent' }, emphasis: { itemStyle: { color: 'transparent' } } }, markLine: { symbol: 'none', label: { show: false }, lineStyle: { color: '#999', type: 'dashed' }, data: [{ yAxis: 'max' }, { yAxis: 'min' }] } }], ... }; ``` 其中，`markPoint` 配置中的 `coord` 属性表示需要放大的柱子的坐标，`symbolSize` 属性表示放大后的柱子大小，`symbolOffset` 属性表示放大后的柱子显示在原始柱子上方。 `markLine` 配置中的 `data` 属性用于绘制放大的柱子与坐标轴的连接线。 最后，需要在 `toolbox` 中添加数据区域缩放组件的配置： ```javascript option = { ... toolbox: { feature: { dataZoom: { yAxisIndex: 'none' }, restore: {}, saveAsImage: {} } }, ... }; ``` 完成上述配置后，点击柱子即可实现放大效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值