echarts堆叠柱状图点击事件取id

最新推荐文章于 2024-04-08 10:54:14 发布
最新推荐文章于 2024-04-08 10:54:14 发布
阅读量2.7k 收藏 5
点赞数 5
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43942765/article/details/118083552
版权

普通的堆叠统计图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="lib/jquery.min.js"></script>
        <script src="lib/esl.js"></script>
        <script src="lib/config.js"></script>
        <link rel="stylesheet" href="lib/reset.css" />
		<script src="dist/echarts.js"></script>
		<style>
			#main {
				height: 500px;
			}
		</style>
	</head>
	<body>
		<div id="main"></div>
		<script>
			// var chartDom = document.getElementById('main');
			var option;

			require([
				'echarts'
			], function(ec) {
				echarts = ec;
				colorTool = echarts.color;
				chart = myChart = echarts.init(document.getElementById('main'));
				option = {
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
				            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				        }
				    },
				    legend: {
				        data: ['邮件营销', '联盟广告', '视频广告']
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis: [
				        {
				            type: 'category',
				            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
				        }
				    ],
				    yAxis: [
				        {
				            type: 'value'
				        }
				    ],
				    series: [
				        {
				            name: '邮件营销',
				            type: 'bar',
				            stack: '广告',
				            emphasis: {
				                focus: 'series'
				            },
				            data: [120, 132, 101, 134, 90, 230, 210]
				        },
				        {
				            name: '联盟广告',
				            type: 'bar',
				            stack: '广告',
				            emphasis: {
				                focus: 'series'
				            },
				            data: [220, 182, 191, 234, 290, 330, 310]
				        },
				        {
				            name: '视频广告',
				            type: 'bar',
				            stack: '广告',
				            emphasis: {
				                focus: 'series'
				            },
				            data: [100, 100, 100, 100, 100, 100]
				        }
				    ]
				};
				chart.setOption(option);
				chart.on('click', function (params) {
					console.log(params.data);
				});
			});
		</script>
	</body>
</html>

点击柱状图时只能打印出data中的数据，那么如果我有一个id想要取出来并且不能在统计图中显示出来的话如何处理呢？
修改后的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="lib/jquery.min.js"></script>
        <script src="lib/esl.js"></script>
        <script src="lib/config.js"></script>
        <link rel="stylesheet" href="lib/reset.css" />
		<script src="dist/echarts.js"></script>
		<style>
			#main {
				height: 500px;
			}
		</style>
	</head>
	<body>
		<div id="main"></div>
		<script>
			// var chartDom = document.getElementById('main');
			var option;

			require([
				'echarts'
			], function(ec) {
				echarts = ec;
				colorTool = echarts.color;
				chart = myChart = echarts.init(document.getElementById('main'));
				option = {
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
				            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				        }
				    },
				    legend: {
				        data: ['邮件营销', '联盟广告', '视频广告']
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis: [
				        {
				            type: 'category',
				            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
				        }
				    ],
				    yAxis: [
				        {
				            type: 'value'
				        }
				    ],
				    series: [
				        {
				            name: '邮件营销',
				            type: 'bar',
				            stack: '广告',
				            emphasis: {
				                focus: 'series'
				            },
				            data: [{value:100,id:1},{value:100,id:1},{value:100,id:1},{value:100,id:1},{value:100,id:1},{value:100,id:1},{value:100,id:1}]
				        },
				        {
				            name: '联盟广告',
				            type: 'bar',
				            stack: '广告',
				            emphasis: {
				                focus: 'series'
				            },
				            data: [{value:100,id:1},{value:100,id:1},{value:100,id:1},{value:100,id:1},{value:100,id:1},{value:100,id:1},{value:100,id:1}]
				        },
				        {
				            name: '视频广告',
				            type: 'bar',
				            stack: '广告',
				            emphasis: {
				                focus: 'series'
				            },
				            data: [{value:100,id:1},{value:100,id:1},{value:100,id:1},{value:100,id:1},{value:100,id:1},{value:100,id:1},{value:100,id:1}]
				        }
				    ]
				};
				chart.setOption(option);
				chart.on('click', function (params) {
					console.log(params.data);
				});
			});
		</script>
	</body>
</html>

把data[value]改成data[{value:value,id:id}]
这样在点击事件中通过console.log(params.data.id)取出id了

太阳的后裔
关注
  • 5
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
echarts使用getZr()点击事件获取柱状图数据
weixin_54366356的博客
05-27 7694
echarts柱状图精确点击事件传参 先上效果图！！！ 当柱状图数据较少的时候，直接点击柱子不好点击，使用getZr()此种方法可以点击柱子所在的这一列（阴影部分），即可拿到对应数据 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0
jQuery echarts柱状图数据统计图表插件
06-10
除了基本的柱状图，ECharts还支持组合图、堆叠柱状图、百分比柱状图等多种模式。开发者可以根据实际需求，结合ECharts的高级特性，如数据区域缩放、平滑曲线、图例筛选等，进一步提升图表的表现力和功能性。 总结，...
echarts中获取id的方法
Linjing127218的博客
01-18 9750
刚开始用ECharts，看了百度的例子，是使用原生的方法获取div，然后再初始化Chart组件:var myChart = echarts.init(document.getElementById('main'));尝试用JQuery获取DIV设置后，发现图直接消失了，后来用Chrome浏览器debug代码，发现document.getElementById 跟 $('#id') 返回的结果不一样
数据可视化高级技术Echarts(堆叠柱状图)
最新发布
m0_63181360的博客
04-08 2936
下面定义了五种数据，分别定义了五个不太的名字来设定，再分别在各个数据下设定stack（名称为total）更改为三列，即设置三个不同的stack名称（total，total11，total22）即在series中将设置stack即可。其他设置与普通柱状图相同，语法：相同名称的数据会堆叠起来，不同则会新生成一列。数据堆叠，同个类目轴上系列配置相同的。相同（相同的堆叠，不同的新生成一列）stack名称相同（直接堆叠）类型的类目轴上，不持。stack:"名称"
echarts点击x轴，根据下标取对应的id
花椒和蕊的博客
08-06 1427
echartsx轴的点击事件是无法直接拿到接口数据里的id 通过观察发现有一个字段有变化 event.topTarget.anid刚好对应x轴的下标，那就通过这个字段来获取下标对应的id 首先要截掉_前的所有，只要最后一个数值 event.topTarget.anid.split(’_’)[1] 然后在点击事件里获取id this.echart.off('click') this.echart.on('click', function(params) { if (par
ECharts柱状图动态获取数据
想成为工程师的码农
05-07 1602
&lt;%@ include file="/config.jsp"%&gt; &lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Tra
立体柱状 堆叠图 可点击图例切换！
xiaoma_sky的博客
07-13 466
echars 立体柱状图 立体柱状堆叠图 可切换图例隐藏！！！！
echarts 柱状图点击事件
梦寻汝的博客
04-24 5292
目录 组件： 页面引用： 组件： <template> <div> <div @click="onclick" ref="echartsbar" :style="{ width: width, height: height }" ></div> </div> </template> &lt...
堆叠图_echarts_柱状堆叠图_
09-29
实现堆叠柱状图通常涉及以下几个步骤： 1. 数据准备：首先，你需要收集和整理数据，确保数据包含所有需要展示的类别和子类别。数据应为结构化的JSON或数组格式，其中每个条目包含类别、子类别以及对应的值。 2. ...
Echarts：基础折线图（含异步加载数据）
12-04
ECharts 是一个基于 JavaScript 的开源可视化库，广泛应用于数据可视化的场景中，尤其在Web开发领域，它提供了丰富的图表类型，如折线图、柱状图、饼图等。本主题将聚焦于ECharts的基础折线图及其异步加载数据的方法...
非常好用的Echarts饼图和折线图源码Demo
06-14
通过实践，你将能够掌握Echarts的基本用法，并进一步探索其他图表类型，如柱状图、散点图、地图等。同时，Echarts也支持自定义交互和动画，提供了丰富的API和事件，使开发者能构建出复杂且动态的数据可视化应用。...
可视化模板五：用echarts实现多组条形图&堆叠条形图
01-21
ECharts是一款由百度开发的开源JavaScript图表库，它提供了丰富的图表类型，包括柱状图、折线图、饼图等，并且支持自定义交互和动画效果。本知识点将深入探讨如何使用ECharts实现多组条形图和堆叠条形图。 首先，...
echarts的柱状图的重叠和堆叠实现两个柱体的显示和之前的差值显示
weixin_51140082的博客
10-26 4738
效果图。
如何利用echarts图表获取条状图点击名称和值
james_laughing的博客
04-19 1345
如何利用echarts图表获取条状图点击名称和值 听语音 | 浏览：1505 | 更新：2017-06-13 10:20 | 标签：软件 1 2 3 4 5 6 7 分步阅读 echarts图表插件工具，包含了各种不同类型的图形，有圆饼图、折线图、圆环图、柱状图等。其中，各种图形带有事件，触发事件可以获取到...
echart柱状图点击柱状触发一个事件
weixin_51353891的博客
11-24 1944
收藏个项目中遇到的问题: echart柱状图点击柱状触发一个事件
echarts：柱状图
qq_41390184的博客
04-06 722
其中，title表示图表的标题，tooltip表示鼠标悬停时显示的提示信息，legend表示图例，xAxis表示X轴，yAxis表示Y轴，series表示数据系列。Echarts是一款基于JavaScript的开源可视化库，而柱状图是一种常见的图表类型，用于展示不同类别或时间段的数据对比情况。除了基本的柱状图，Echarts还提供了许多其他类型的柱状图，如堆叠柱状图、分组柱状图、渐变柱状图等。从图中可以看出，某公司的销售额在2019年和2020年都有增长，其中2020年的销售额比2019年增长了50%。
echarts柱状图点击事件的实现方法
後来的博客
09-24 6105
开发过程中，我们经常会碰到这样的需求：在柱状图上，点击某条柱形，调用相应的方法或跳转相应的界面 接下来就详细介绍如何实现柱状图的点击事件，其中maChart是绘图对象 一、简单的点击事件 myChart.on('click', function (params) { console.log(params) }) 这样就可以获得每条柱形所对应的数据 若需要在每条柱形上添加额外的属性，比如id等等，可以在series中，通过对象去定义，其中value是柱形的值 seriesData: [
❤echarts柱状图详细配置（竖向横向柱状图）
林太白
08-24 5001
❤echarts柱状图使用和配置
echarts实现点击不同的柱子实现类目的不同名字
weixin_46413834的博客
01-05 591
可能柱子会有点偏,使用下面属性可进行左右调整 barGap:-1。首先实现echarts堆叠柱状图数据为0的不占用x轴空间。这个时候我们需要把类目中多余的为0项删除即可。
echarts堆叠柱状图
04-23
如何实现？ 要实现 echarts 堆叠柱状图，需要使用 echarts.js 库和一些基本的 HTML、CSS 和 JavaScript 代码。下面是实现 echarts 堆叠柱状图的基本步骤： 1. 引入 echarts.js 库。在 HTML 页面头部添加以下代码： ```html <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script> ``` 2. 在页面中添加一个容器用于显示柱状图。可以使用 div 元素，给它一个 ID，例如： ```html <div id="chartContainer" style="width: 800px; height: 600px;"></div> ``` 3. 编写 JavaScript 代码，创建 echarts 实例，配置图表参数，并将图表绑定到容器上。以下是一个简单的 echarts 堆叠柱状图示例代码： ```javascript // 创建 echarts 实例 var chart = echarts.init(document.getElementById('chartContainer')); // 配置图表参数 var option = { title: { text: '堆叠柱状图示例' }, tooltip: {}, legend: { data:['数据1', '数据2', '数据3'] }, xAxis: { data: ['一月', '二月', '三月', '四月', '五月', '六月'] }, yAxis: {}, series: [ { name: '数据1', type: 'bar', stack: '总量', data: [10, 20, 30, 40, 50, 60] }, { name: '数据2', type: 'bar', stack: '总量', data: [20, 30, 40, 50, 60, 70] }, { name: '数据3', type: 'bar', stack: '总量', data: [30, 40, 50, 60, 70, 80] } ] }; // 将图表绑定到容器上 chart.setOption(option); ``` 通过以上三个步骤，便可实现 echarts 堆叠柱状图。当然，以上代码仅为示例代码，实际使用时需要根据具体需求进行调整。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值