So verwenden Sie eine benutzerdefinierte Einzelspaltenfarbe in Echart (Code beigefügt)

Der Inhalt dieses Artikels befasst sich mit der Verwendung einer benutzerdefinierten Einzelspaltenfarbe (mit Code). Ich hoffe, dass er für Sie hilfreich ist.

In der Projektpraxis sind wir auf die Anforderung gestoßen, dass die Spalte eine spezielle Farbe annimmt, wenn die X-Achse einem bestimmten Wert entspricht. Es gibt ungefähr zwei Lösungen, um dies zu implementieren:

1 . Durchlauf im Vordergrund Datenobjekt, Beurteilungseinstellung; 2. Stellen Sie die Daten im Hintergrund gemäß den Formatanforderungen zusammen.

Methode 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;
            }
        }
    }]
};

Methode 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]
    }]
};

Sie können die beiden auch zusammen verwenden, um Ihre eigenen speziellen Anforderungen zu erfüllen. Wenn Sie den Hintergrund für die Umsetzung wünschen, stellen Sie einfach die Daten in diesem Format zusammen und geben Sie es an der Rezeption zurück. Ich hoffe, dass es Freunden mit ähnlichen Bedürfnissen hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie eine benutzerdefinierte Einzelspaltenfarbe in Echart (Code beigefügt). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!