echarts clicks on the histogram event, echarts histogram displays the corresponding information in suspension, and echarts histogram column header displays the information.

Explicitly set formatter in tooltip when suspended

The header in the histogram is explicitly set in the formatter under itemStyle under series, label under normal

The click event is: [First get the div of the histogram and then combine it with the object.on() ]

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

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

 

 

First the renderings

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>

Then there is the 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: []
        }
        ]
    };

 

Then the click event of the histogram

 

//点击事件
    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);
    });