echarts点击柱状图事件，echarts柱状图悬浮展示相应的信息，echarts柱状图柱头展示信息

悬浮显式在tooltip中设置formatter

柱状图中的表头显式在series下的itemStyle下的normal下的label下的formatter中设置

点击事件就是：【先获取柱状图的div 然后和 对象.on() 】

var myChart = echarts.init(document.getElementById('main'));

myChart.on('click', function (params) {});

先上效果图

ajax：

$.ajax({
            url: "../../basexxxx/getxxxxxxx",
            type: "post",
            data: {
                param: param
            },
            success: function (data) {
                option.series[0].data = xxxxxxxxxxx;//百分比
                // option.series[1].data = xxxxxxxxxxx;
                option.xAxis[0].data = xxxxxxxxxxxx;//项点名称

                riskNames = xxxxxxxxxx;
                //违反次数
                breakCount = xxxxxxxxx;//xx次数
                //检查次数
                checkCount = xxxxxxxxxx;
                //描述
                riskLevelDetails = xxxxxxxxxxx;
                //项点id集合
                riskIds = data.xxxxxxxxx;
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);

            }
        });

HTML:

<div style="margin: 0;padding: 5px; max-width:100%;width: 100%;overflow-x: auto;">
    <div id="main" style="width: 350%;height:500px;"></div>
</div>

然后就是option

 // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var breakCount = [];
    var checkCount = [];
    var riskLevelDetails = [];
    var riskNames = [];
    var riskIds = [];
    var option = {
        color: ['#3398DB'],
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
            //悬浮提示
            formatter: function (params) {
                for (var i = 0, l = option.xAxis[0].data.length; i < l; i++) {
                    if (option.xAxis[0].data[i] == params[0].name) {
                        var val3 = riskLevelDetails[i] || 0;
                        // toFixed(1)精确小数点
                        return '项点名称：' + riskNames[i] + '<br>'
                            + '违反占比：' + option.series[0].data[i].toFixed(1) +'%'+ '<br>'
                            + riskLevelDetails[i];
                    }
                }
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: [],
            axisTick: {
                alignWithLabel: true
            },
            axisLabel: {
                interval: 0,
                rotate: 40
            }
        }],
        yAxis: [{
            type: 'value'
        }],
        series: [{
            name: '违反占比',
            type: 'bar',
            barWidth: '60%',
            itemStyle: {
                normal: {
                    //可根据柱状图量的大小进行判断变换颜色
                    color: function (params) {
                        if (params.data < 60) {
                            return 'green'
                        } else {
                            return '#c23531'
                        }
                        return '#ccc'
                    },
                    label: {
                        show: true,
                        position: 'top',
                        formatter: function (params) {
                            //单个柱状图表头展示
                            for (var i = 0, l = option.xAxis[0].data.length; i < l; i++) {
                                if (option.xAxis[0].data[i] == params.name) {
                                    var val1 = breakCount[i] || 0;
                                    var val2 = checkCount[i] || 0;
                                    return '{color1|' + val1 + '}/{color2|' + val2 + '}';
                                }
                            }
                        },
                        rich: {
                            color1: {
                                color: '#c23531'
                            },
                            color2: {
                                color: '#42a1fe'
                            }
                        },
                        textStyle: {
                            color: '#333'
                        }
                    }
                }
            },
            data: []
        }
        ]
    };

然后柱状图的点击事件

//点击事件
    myChart.on('click', function (params) {
        console.log(params);
        var index =  params.dataIndex;
        console.log("下标："+xxx);
        console.log("项点id："+xxxx);
        console.log("名称："+params.name);
        console.log("南京东机务段单位代码："+xxxxx);
    });