echarts 点击x轴标签触发事件

最新推荐文章于 2023-08-03 13:58:46 发布
最新推荐文章于 2023-08-03 13:58:46 发布
阅读量6.5k 收藏 18
点赞数 6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lianflower/article/details/107246829
版权

方法一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/echarts.js"></script>
    <title>Title</title>
</head>
<body>
    <div id="main" style="width: 600px;height: 400px;"></div>
</body>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'), 'dark');
    var categories = ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"];
    var option = {
        grid: {
            show: true,
            containLabel: true,
            borderColor: 'red',
            borderWidth: 2,
            left: 0,
            bottom: 0
        },
        tooltip: {},
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
            type: 'category',
            axisLabel:{
                borderColor: 'red',
                borderWidth: 1
            }
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
            label: {
                show: true
            }
        }]
    };
    myChart.setOption(option);
    myChart.getZr().on('click', function (params) {
        if (params.topTarget && params.topTarget.anid && params.topTarget.anid !== 'ticks_undefined') {
            var str = params.topTarget.anid;
            var arr = str.split("_");
            var labelName = categories[arr[1]];
            alert("点击了x轴标签：" + labelName);
        }
    });
</script>
</html>

参考：https://www.cnblogs.com/liangsf/p/11592283.html

方法二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/echarts.js"></script>
    <title>Title</title>
</head>
<body>
<div id="main" style="width: 600px;height: 400px;"></div>
</body>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'), 'dark');
    var option = {
        grid: {
            show: true,
            containLabel: true,
            borderColor: 'red',
            borderWidth: 2,
            left: 0,
            bottom: 0
        },
        tooltip: {},
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
            type: 'category',
            axisLabel:{
                borderColor: 'red',
                borderWidth: 1,
                clickable: true
            },
            silent: false,
            triggerEvent: true
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
            label: {
                show: true
            }
        }]
    };
    myChart.setOption(option);
    myChart.on('click', 'xAxis.category',  function (params) {
        alert("点击了x轴标签：" + params.value);
    });
</script>
</html>

参考：https://echarts.apache.org/zh/tutorial.html#ECharts%20%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%92%8C%E8%A1%8C%E4%B8%BA
注意：方法二需要多加几个属性，如下：
在这里插入图片描述

lianflower
关注
  • 6
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts图表配置参数
2401_84097393的博客
04-12 1153
资料过多，篇幅有限，需要文中全部资料可以点击这里获取前端面试资料PDF完整版！自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）[外链图片转存中…(img-7J9Y3hmt-1712875573296)][外链图片转存中…(img-n3bu62lh-1712875573296)]资料过多，篇幅有限，需要文中全部资料可以点击这里获取。
echarts 柱形图 点击事件（点击柱子触发事件，点击横坐标不触发事件）
weixin_49826079的博客
12-11 1332
echarts 柱形图 点击事件（点击柱子触发事件，点击横坐标不触发事件）
ECharts 给X轴文字添加点击事件
热门推荐
sophia_xiaoma的专栏
09-21 2万+
给x轴的文字添加点击事件，y轴同理，针对于ECharts 3.x，共两步。 第一步： 将xAxis或者yAxis的属性triggerEvent 置为 true; 第二步： 点击事件，如代码： mybarDoubleChart.setOption(option); mybarDoubleChart.on('click', function (params) {
ECharts可视化图标库 （事件与行为）
Dominic_W的博客
01-12 871
ECharts中的事件与行为 日常开发中用到echarts，一般是用来展示数据，很少在图表上添加一些事件监听函数。但是没用过不代表没有，比如鼠标悬浮之后的高亮样式和鼠标悬浮后显示的tootip,这都属于默认的鼠标悬浮事件。 除此之外，如果想要实现其他的事件响应，可以监听这些事件，然后通过回调函数做出相应处理。 ECharts中的事件名称对应DOM事件名称，是小写字符串 ECharts支持常规的鼠标事件类型： click、dblclick、mousedown、mousemove、mouseup、mouseov
eChart的x轴或y轴绑定点击事件
m0_64573712的博客
06-26 3259
eChart绑定事件
echarts自定义分组，x轴分级，支持多级，支持dataZoom
03-31
以柱状图为例，实现echarts自定义分组，x轴分级，支持多级，支持dataZoom
echarts统计x轴区间的数值实例代码详解
10-16
主要介绍了echarts统计x轴区间的数值,本文给出了实现实例及实例代码，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue 项目引入echarts 添加点击事件操作
10-14
主要介绍了vue 项目引入echarts 添加点击事件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
echarts中x轴文字过长换行处理.txt
04-28
x轴文字过长，进行换行处理。 操作流程：复制整个文件的option放如echarts官方容器中即可。
echarts多个x轴，多个y轴.zip
12-31
通过echarts官网学习后，根据项目的需要，对echarts进行扩充和整理，发现可支持多个x轴，多个y轴，比想象中简单，echarts的确是很强大的资源，希望大家能有启发。
Vue 3 使用 vue-echarts 的柱状图 barItem 和 x, y 轴点击事件实现
weixin_68465735的博客
08-03 3922
作为 CV 程序员，第一时间搜索网上的解决方案，但是基本都是 Vue 3 搭配 ECharts 实现的，作为菜鸟且项目已经使用 vue-echarts 实现了图标的需求，所以那就只能借鉴ECharts 的实现方案，然后看有没有对应的方法。我们可以看到我们点击的位置不同，params 中的 componentType 的值是不一样的，所以我们可以通过点击事件回调给我们的 params 中的 componentType 参数来区分点击的是哪里，然后做出相应的事件处理；
ECharts柱状图添加点击事件
dianmie4090的博客
05-05 222
参考： https://zhuanlan.zhihu.com/p/33050579 https://blog.csdn.net/sophia_xiaoma/article/details/78055947 http://www.jb51.net/article/125820.htm https://www.cnblogs.com/zhzhair-coding/p/6953982....
echarts主动触发datazoom事件
pingmeiniu的博客
07-23 6925
var myChart = echarts.init(document.getElementById("mapHourContainer")); myChart.dispatchAction({ type: 'dataZoom', // 可选，dataZoom 组件的 index，多个 dataZoom 组件时有用，默认为 0 dataZoomIndex: number,//一般不需要写 // 开始位置的百分比，0 - 100 sta.
echarts y轴添加点击事件_JQuery实现Echarts散点图的点击获取坐标事件
weixin_40005887的博客
12-20 630
内容有点多，慢慢看~~我的需求是：通过点击坐标轴的任意位置，获取当前位置的坐标，并赋值给x,y关键js代码：var height = document.getElementById('hight');var weight = document.getElementById('weight');myChart.setOption(option); //关键var ecConfig = echar...
基于springboot+vue+MySQL实现的在线考试系统+源代码+文档
06-01
web期末作业设计网页 基于springboot+vue+MySQL实现的在线考试系统+源代码+文档
318_面向物联网机器视觉的目标跟踪方法设计与实现的详细信息-源码.zip
06-02
提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。
FPGA Verilog 计算信号频率，基础时钟100Mhz，通过锁相环ip核生成200Mhz检测时钟，误差在10ns
最新发布
06-02
结合等精度测量原理和原理示意图可得：被测时钟信号的时钟频率fx的相对误差与被测时钟信号无关；增大“软件闸门”的有效范围或者提高“标准时钟信号”的时钟频率fs，可以减小误差，提高测量精度。 实际闸门下被测时钟信号周期数为X，设被测信号时钟周期为Tfx，它的时钟频率fx = 1/Tfx，由此可得等式：X * Tfx = X / fx = Tx(实际闸门)。 其次，将两等式结合得到只包含各自时钟周期计数和时钟频率的等式：X / fx = Y / fs = Tx(实际闸门)，等式变换，得到被测时钟信号时钟频率计算公式：fx = X * fs / Y。 最后，将已知量标准时钟信号时钟频率fs和测量量X、Y带入计算公式，得到被测时钟信号时钟频率fx。
echarts x轴标签显示补全
04-03
您好，要补全ECharts的X轴标签显示，可以尝试以下方法： 1. 设置xAxis的type为“category”，并通过data属性传入完整的标签数组。 例如： ``` xAxis: { type: 'category', data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] } ``` 2. 如果标签较多，可以设置xAxis的axisLabel的interval属性，控制标签的显示间隔。 例如： ``` xAxis: { type: 'category', data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], axisLabel: { interval: 0 // 强制显示所有标签 } } ``` 3. 如果标签过长，可以设置xAxis的axisLabel的rotate属性，控制标签的旋转角度。 例如： ``` xAxis: { type: 'category', data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], axisLabel: { rotate: 45 // 旋转45度 } } ``` 希望这些方法可以帮到您。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值