echart でカスタムの単一列の色を使用する方法 (コードは添付されています)-jsチュートリアル-php.cn

echart でカスタムの単一列の色を使用する方法 (コードは添付されています)

不言

リリース： 2018-10-18 15:29:29

転載

2705 人が閲覧しました

この記事の内容は、echart でカスタマイズされた単一列の色を使用する方法 (コード付き) です。必要な方は参考にしていただければ幸いです。

プロジェクトの実践において、X 軸が特定の値に等しい場合に列が特別な色になるという要件に遭遇しました。これを実現するには、大きく分けて 2 つの解決策があります。フォアグラウンドでのトラバースデータオブジェクト、判定設定。

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 中国語 Web サイトの他の関連記事を参照してください。