echarts 点击x轴标签触发事件

最新推荐文章于 2024-06-26 10:31:16 发布

lianflower

最新推荐文章于 2024-06-26 10:31:16 发布

阅读量6.8k

点赞数 6

本文链接：https://blog.csdn.net/lianflower/article/details/107246829

版权

echarts 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

方法一：

<!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 点击x轴标签触发事件

myChart.getZr().on('click', function (params) { if (params.topTarget) { if (params.topTarget.anid) { alert("点击了x轴标签") } } });参考：https://www.cnblogs.com/liangsf/p/11592283.html其实echarts3中提供了一个点击
复制链接

扫一扫

专栏目录