echarts 柱状图根据数据设置不同颜色/点击切换颜色

最新推荐文章于 2024-05-30 23:16:00 发布

原创最新推荐文章于 2024-05-30 23:16:00 发布 · 2.6k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#echarts #前端 #javascript

echarts 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用ECharts创建一个交互式的柱状图，并详细解释了配置项的意义及实现点击事件的方法。

var ProfileChart = echarts.init(document.getElementById('activityAppliucation'));
    var option = {
        backgroundColor : '#fff',
        tooltip : {
            trigger : 'axis',
        },
        grid : {
            left : '1%',
            right : '4%',
            bottom : '5%',
            top : '10%',
            containLabel : true
        },
        xAxis : [ {
            type : 'category',
            axisTick: {
                show: false
            },
            axisLine: {
                show:false,
                lineStyle: {
                    color: '#57617B'
                }
            },
            data : xdata
        } ],
        yAxis: {
            type: 'value',
            axisTick: {
                show: false
            },
            axisLine: {
                show:false,
                lineStyle: {
                    color: '#57617B'
                }
            },
            splitLine: {
                lineStyle: {
                    width:1,
                    color: '#DBDBDB'
                }
            }
        },
        series : [ {
            name : '',
            type : 'bar',
            barWidth: 25,
            itemStyle: {
                color: function (params){
                    if(params.dataIndex == echartsIndex) {
                        return '#c44545';
                    } else {
                        return '#0F8FFF';
                    }
                },
                barBorderRadius: 16
            },
            data : ydata
        } ]
    };
    ProfileChart.setOption(option,true);
    ProfileChart.off('click');
    ProfileChart.getZr().on('click', (params) => {
        const pointInPixel = [params.offsetX, params.offsetY];
        //点击第几个柱子
        let index;
        if (ProfileChart.containPixel('grid', pointInPixel)) {
            index = ProfileChart.convertFromPixel({seriesIndex: 0}, [params.offsetX, params.offsetY])[0];
        }
        chartState = true;
        echartsIndex = index;
        activityTable(visitTrendData[index].contentType);
        appActivityVisitTrendChild(visitTrendData[index].contentType);
        //柱形图重构
        ProfileChart.setOption(option,true);
    })
    window.addEventListener("resize", function () {
        ProfileChart.resize();
    })