Echarts axisLabel添加点击事件监听

echarts yekong 123℃

triggerEvent: true,

function getecharts2() {
    var echartsx = echarts.init(document.getElementById("echarts2"));
    let tdata = [
        {code: '隐患总数', stock: '120', stock2: '120', fundPost: '100%'},
        {code: '未整改隐患', stock: '80', stock2: '120', fundPost: '80%'},
        {code: '超期未整改隐患', stock: '40', stock2: '120', fundPost: '30%'},
    ];

    function contains(arr, dst) {
        var i = arr.length;
        while ((i -= 1)) {
            if (arr[i] == dst) {
                return i;
            }
        }
        return false;
    }

    var attackSourcesColor1 = [
        'rgba(255, 225, 85, 1)',
        '#02A8FE',
        '#FF6216',
    ];
    var attaData = [];
    var attaName = [];
    var topName = [];
    tdata.forEach((it, index) => {
        attaData[index] = parseFloat(it.fundPost).toFixed(2);
        attaName[index] = '';
        // topName[index] = `${it.code} ${it.stock}`;
        topName[index] = {
            label: it.code,
            value: it.stock
        };
        // topName[index] = `${it.code} ${it.fundPost}`;
    });
    var salvProMax = []; //背景按最大值
    for (let i = 0; i < attaData.length; i++) {
        salvProMax.push(attaData[0]);
    }

    function attackSourcesDataFmt(sData) {
        var sss = [];
        sData.forEach(function (item, i) {
            let itemStyle = {
                color: attackSourcesColor1[i],
                fontFamily: 'Helvetica Condensed Bold'
            };
            sss.push({
                value: item,
                itemStyle: itemStyle,
            });
        });
        return sss;
    }

    var option = {
        tooltip: {
            show: false,
            backgroundColor: '#093871', //背景颜色(此时为默认色)
            textStyle: {
                fontSize: is1600 ? 14 : 16,
            },
        },
        color: ['#F7B731'],
        legend: {
            show: false,
            pageIconSize: [12, 12],
            itemWidth: 20,
            itemHeight: 10,
            textStyle: {
                //图例文字的样式
                fontSize: is1600 ? 14 : 16,
                color: '#fff',
            },
            selectedMode: false,
            fontFamily: 'Helvetica Condensed Bold'
        },
        grid: {
            left: '10%',
            right: '5%',
            // width: '80%',
            bottom: '2%',
            top: '8%',
            containLabel: true,
        },
        xAxis: {
            type: 'value',

            splitLine: {
                show: false,
            },
            axisLabel: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
            },
        },
        yAxis: [
            {
                type: 'category',
                inverse: true,
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisPointer: {
                    label: {
                        show: true,
                        //margin: 30
                    },
                },
                padding: [5, 0, 0, 0],
                postion: 'right',
                data: attaName,
                axisLabel: {
                    show: false,
                    margin: 30,
                    fontSize: is1600 ? 14 : 16,
                    align: 'left',
                    padding: [2, 0, 0, 0],
                    color: '#000',
                    fontFamily: 'Helvetica Condensed Bold'
                },
            },
            {
                type: 'category',
                inverse: true,
                axisTick: 'none',
                axisLine: 'none',
                show: true,
                axisLabel: {
                    textStyle: {
                        color: '#fff',
                        fontSize: is1600 ? 14 : 16,
                        fontFamily: 'Helvetica Condensed Bold'
                    },
                },
                data: attackSourcesDataFmt(attaName),
            },
            {
                //名称
                type: 'category',
                offset: 10,
                position: 'left',
                zlevel: 100,
                triggerEvent: true,
                axisLine: {
                    show: false,
                },
                inverse: true,
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: true,
                    interval: 0,
                    color: ['#fff'],
                    lineHeight: 32,
                    triggerEvent: true,
                    fontSize: is1600 ? 14 : 16,
                    fontFamily: 'Helvetica Condensed Bold',
                    formatter: function (value, index) {
                        return '{label|' + topName[index].label + '}'
                            + '{value|' + topName[index].value + '}';
                    },
                    rich: {
                        label: {
                            verticalAlign: 'middle',
                            fontSize: is1600 ? 14 : 16
                        },
                        value: {
                            align: 'left',
                            textAlign: 'left',
                            verticalAlign: 'middle',
                            fontSize: is1600 ? 16 : 20,
                            width: 20,
                            padding: [0, 0, 0, 10],
                            fontFamily: 'Helvetica Condensed Bold'
                        },
                    },
                },
                data: topName,
            },
        ],
        series: [
            {
                zlevel: 1,
                name: '',
                type: 'bar',
                barWidth: is1600 ? 18 : 22,
                animationDuration: 1500,
                data: attackSourcesDataFmt(attaData),
                align: 'center',
                itemStyle: {
                    normal: {
                        barBorderRadius: 0,
                        fontFamily: 'Helvetica Condensed Bold'
                    },
                },
                label: {
                    show: false,
                    fontSize: is1600 ? 14 : 16,
                    color: '#fff',
                    textBorderWidth: 2,
                    padding: [2, 0, 0, 0],
                    fontFamily: 'Helvetica Condensed Bold'
                },
            },

            {
                name: '',
                type: 'bar',
                barWidth: is1600 ? 18 : 22,
                barGap: '-100%',
                margin: '20',
                data: salvProMax,
                textStyle: {
                    //图例文字的样式
                    fontSize: is1600 ? 14 : 16,
                    color: '#fff',
                },
                itemStyle: {
                    normal: {
                        color: '#093871',
                        //width:"100%",
                        fontSize: 10,
                        fontFamily: 'Helvetica Condensed Bold'
                        //barBorderRadius: 30,
                    },
                },
            },
        ],
    };
    echartsx.on('click', function (params) {
        console.log(params)
        if (params.dataIndex == 2) {
            showPop('.yonghu')
        }
        if (params.value == 40) {
            showPop('.yonghu')
        }
    })

    echartsx.clear();
    echartsx.resize();
    echartsx.setOption(
        option
    );
}
喜欢 (0)