Echarts柱状图的点击事件
2023-09-14 08:58:56 时间
最近在做一些图表统计的功能,用到了百度的开源图表软件Echatrs,不得不提的是:不但上手简单而且扩展功能也是十分强大。在使用的过程中也遇到了不少问题,可能由于有关Echatrs的资料并不是很齐全,所以查找资料的过程也是相当曲折的,所以还是自己就遇到的问题总结一下吧。
点击柱状图跳转页面的功能:
找到你的生成Option事件的方法,在其下面添加以下代码。
- var chart = ec.init(document.getElementById(id));
- chart.setOption(Option);
- //下面是需要添加的方法内容
- //点击柱状图跳转相应页面的功能,其中param.name参数为横坐标的值
- var ecConfig = require('echarts/config');
- function eConsole(param) {
- if (typeof param.seriesIndex != 'undefined') {
- switch (param.name) {
- case "新浪":
- window.location.href = "http://www.sina.com";
- window.open("http://www.sina.com", "_blank");//在新页面打开
- break;
- case "百度":
- window.location.href = "http://www.baidu.com";
- break;
- case "腾讯":
- window.location.href = "http://www.qq.com";
- break;
- default:
- break;
- }
- }
- }
- chart.on(ecConfig.EVENT.CLICK, eConsole);
以上,可以获取点击事件的参数,实现跳转的功能。
此外param参数包含的内容有:
param.seriesIndex:系列序号(series中当前图形是第几个图形第几个,从0开始计数)
param.dataIndex:数值序列(X轴上当前点是第几个点,从0开始计数)
param.seriesName:legend名称
param.name:X轴值
param.data:Y轴值
param.value:Y轴值
param.type:点击事件均为click
根据以上属性可以自由调整,根据点击事件取得想要的值。
相关文章
- 在手势中屏蔽响应事件继续向父视图传递
- Android Button的四种点击事件
- jquery移动端一个按钮两个事件
- 事件
- Echarts折线图点击事件
- echarts 取消图例上的点击事件和图表上鼠标滑过点击事件
- angularjs $broadcast $emit $on 事件触发controller间的值传递
- echarts图表点击事件之跳转页面和加载页面
- Echarts折线图点击事件
- echarts 取消图例上的点击事件和图表上鼠标滑过点击事件
- Ckeditor注册事件
- Spring Boot 2.0 新特性(二):新增事件ApplicationStartedEvent
- Dev gridcontrol 捕获按键事件
- Atitit. Js 冒泡事件阻止 事件捕获 事件传递 事件代理
- MNS支持OSS事件通知啦!!!
- atitit.基于组件的事件为基础的编程模型--服务器端控件(1)---------服务器端控件和标签之间的关系
- 业界关联分析引擎——奇安信基于flink改造的Sabre,AbutionGraph 将事件聚合存储用于关联分析
- uni-app的Vue项目中Echarts的报错提示:[Vue warn]: Error in data(): “ReferenceError: echarts is not defined“
- Redis_15_Redis线程模型与事件