本站消息

站长简介/公众号


站长简介:高级软件工程师,曾在阿里云,每日优鲜从事全栈开发工作,利用周末时间开发出本站,欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2021-05(14)

2021-06(93)

2021-07(2)

2021-08(60)

2021-09(65)

echarts使用getZr()事件获取柱状图当前点击列的数据

发布于2021-12-04 01:04     阅读(1043)     评论(0)     点赞(11)     收藏(2)


 var t = document.getElementById("cardChart");
    t.style.width = window.offsetWidth + "px";
    var cardChart = echarts.init(t),
                options = {
                    color: ['#3398DB'],
                    title: {
                        left: "right",
                        //text: new Date().getFullYear() + "年数据",
                        textStyle: {
                            color: "#2c2c2c",
                            fontSize: 14,
                            fontWeight: 500
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器,坐标轴触发有效
                            type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: "category",
                        data: dataYearCountName,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,    //强制文字产生间隔
                            rotate: 45,     //文字逆时针旋转45°
                            textStyle: {    //文字样式
                                color: "black",
                                fontSize: 14,
                                fontFamily: 'Microsoft YaHei'
                            }
                        }
                    }],
                    yAxis: [
                            {
                                type: "value"
                            }
                        ],
                    series: [
                            {
                                name: "例数",
                                type: "bar",
                                barWidth: "60%",
                                data: dataYearCountNum
                            }
                    ]
        };

    //-----------------从这里开始 -----------------
    //cardChart 柱状图名称
    cardChart.setOption(options);
    cardChart.off('click'); //防止触发两次点击事件
    cardChart.getZr().on('click', (params) => {
        let pointInPixel = [params.offsetX, params.offsetY];
        if (cardChart.containPixel('grid', pointInPixel)) {
            let pointInGrid = cardChart.convertFromPixel({
                seriesIndex: 0
            }, pointInPixel);
            let xIndex = pointInGrid[0]; //索引
            let handleIndex = Number(xIndex);
            let seriesObj = cardChart.getOption(); //图表object对象
            var op = cardChart.getOption();
            //获得图表中点击的列
            var month = op.xAxis[0].data[handleIndex];  //获取点击的列名
            console.log(month);
            console.log(handleIndex, seriesObj);
        };
    });




所属网站分类: 技术文章 > 博客

作者:大师兄

链接:http://www.qianduanheidong.com/blog/article/247498/49342b7f0dbefaa88225/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

11 0
收藏该文
已收藏

评论内容:(最多支持255个字符)