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

10 篇文章 0 订阅
5 篇文章 0 订阅
 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);
        };
    });

Echarts是一款基于JavaScript的开源可视化图表库,它可以用于在网页上展示各种类型的图表,包括柱状图。要实现柱状图动态获取数据数据,可以按照以下步骤进行: 1. 创建一个网页,并引入Echarts的相关文件,包括echarts.min.js和jquery.min.js。 2. 在HTML页面中创建一个div元素作为图表的容器,设置其id属性,用于在JavaScript中获取该元素。 3. 在JavaScript中,通过ajax技术向服务器发送请求,获取数据库中的数据。可以使用jQuery的ajax方法,设置请求的URL和参数类型、成功和失败的回调函数。 4. 在成功的回调函数中,将获取到的数据解析为Echarts所需的格式,如x轴数据和y轴数据。 5. 初始化Echarts图表,通过echarts.init方法传入之前创建的div的id,获取Echarts实例。 6. 设置图表的基本配置项,如标题、x轴和y轴的标签等。 7. 创建一个柱状图,设置其类型为柱状图,搭配之前解析出的x轴和y轴数据。 8. 将柱状图添加到图表实例中。 9. 调用实例的setOption方法,将配置项应用到图表上。 10. 在HTML页面中调用JavaScript的函数,动态生成并更新柱状图。 通过以上步骤,就可以实现echarts柱状图动态获取数据数据的功能。当数据库中的数据发生变化时,只需要重新发送请求获取最新的数据,然后更新图表即可。这样可以实时展示数据数据的变化情况,方便用户进行数据分析和决策。
评论 23
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值