How to use a custom single column color in echart (code attached)

The content of this article is about how to use a customized single column color in echart (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

In project practice, we encountered a requirement that when the X-axis is equal to a certain value, the column becomes a special color. There are roughly two solutions to achieve it:

1. Traverse in the foreground Data object, judgment setting;

2. The data is assembled in the background according to the format requirements;

The specific code is as follows:

Method 1:

option = {
    title: {
        text: 'ECharts 示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
        axisLabel: {color: 'green'}
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20],
        itemStyle: {
            color: function(params){
                var c ='';
                if(params.value>20){
                    c='red'
                }else{
                    c='green'
                }
                return c;
            }
        }
    }]
};

Method 2:

option = {
    title: {
        text: 'ECharts 示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
        axisLabel: {color: 'green'}
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, {
            value:'35',
            itemStyle: {
                color: 'orange'
            }
        }, 10, 10, 20]
    }]
};

You can also use the two in combination to achieve your own special needs. If you want the background to implement it, just assemble the data in this format and return it to the front desk. I hope it will be helpful to friends who have similar needs.

The above is the detailed content of How to use a custom single column color in echart (code attached). For more information, please follow other related articles on the PHP Chinese website!