echart에서 사용자 정의 단일 열 색상을 사용하는 방법(코드 첨부)

이 글의 내용은 Echart에서 사용자 정의 단일 열 색상을 사용하는 방법(코드 포함)에 대한 내용입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

프로젝트 실습에서 X축이 특정 값과 같을 때 열이 특수 색상으로 바뀌어야 한다는 요구 사항에 직면했습니다. 이를 구현하는 데는 대략 두 가지 솔루션이 있습니다.

1.

2. 데이터는 형식 요구 사항에 따라 백그라운드에서 수집됩니다.

구체적인 코드는 다음과 같습니다.

방법 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;
            }
        }
    }]
};

방법 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]
    }]
};

두 가지를 조합하여 자신만의 특별한 요구를 충족시키려면 배경을 구현하려면 이 형식에 따라 데이터를 모아 프론트 데스크에 반환하면 됩니다. 비슷한 요구 사항을 가진 친구들에게 도움이 되길 바랍니다.

위 내용은 echart에서 사용자 정의 단일 열 색상을 사용하는 방법(코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!