Comment utiliser une couleur de colonne unique personnalisée dans un graphique (code ci-joint)

Le contenu de cet article explique comment utiliser une couleur de colonne unique personnalisée dans un graphique (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Dans la pratique du projet, nous avons rencontré une exigence selon laquelle lorsque l'axe X est égal à une certaine valeur, la colonne prend une couleur spéciale. Il existe en gros deux solutions pour la mettre en œuvre :

1. .Parcourir au premier plan Objets de données, paramètres de jugement ;

2. Assemblez les données en arrière-plan et assemblez-les selon les exigences de format

Le code spécifique est le suivant :

Méthode 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;
            }
        }
    }]
};

Méthode 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]
    }]
};

Vous pouvez également utiliser les deux en combinaison pour répondre à vos propres besoins particuliers si vous souhaitez que le backend l'implémente. , assemblez simplement les données dans ce format et renvoyez-les au frontend. J'espère que cela sera utile à des amis qui ont des besoins similaires.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!