echarts ヒストグラムの色の設定: echarts ヒストグラムに異なる色を設定するにはどうすればよいですか? （コード）-jsチュートリアル-php.cn

echarts ヒストグラムの色の設定: echarts ヒストグラムに異なる色を設定するにはどうすればよいですか? （コード）

不言

リリース： 2018-09-11 13:45:00

オリジナル

86656 人が閲覧しました

ヒストグラムを作成するためにEchartsを使用する必要がある場合がありますが、列がすべて同じ色であると「難しく」見えることがありますが、ヒストグラム内の異なる意味を表す列が異なる色を使用すると、明確に見えることがあります。たくさんあるので、この記事では echarts ヒストグラムにさまざまな色を設定する方法を紹介します。早速、次の内容を見てみましょう。 Echarts の商用グレードのデータチャートについて知っておく必要があります。これは、ほとんどのブラウザーと互換性のある純粋な JavaScript アイコンライブラリであり、基礎となるレイヤーは、直感的で鮮やかでインタラクティブで高度にパーソナライズされたカスタマイズされたデータを提供する、軽量のキャンバスクラスライブラリー ZRender に依存しています。視覚化チャート。 (echarts を知らない場合は、次を参照してください:

echarts とは? 使い方? echarts の紹介

) コードを直接見てみましょう:

xAxis : [
            {
                type : &#39;category&#39;,
//                 name:&#39;额度&#39;,
　　　　　　　　//这是设置的false，就不不显示下方的x轴，默认是true的
                show: false,
　　　　　　　　//这里呢，就是每个柱的name了，根据实际情况下就好了，我就先写这三个
                data : [&#39;最多&#39;,&#39;平均&#39;,&#39;最少&#39;],
                axisLabel: {
　　　　　　　　　　　　　//这个是倾斜角度，也是考虑到文字过多的时候，方式覆盖采用倾斜
//                     rotate: 30,
　　　　　　　　　　　　//这里是考虑到x轴文件过多的时候设置的，如果文字太多，默认是间隔显示，设置为0，标示全部显示，当然，如果x轴都不显示，那也就没有意义了
                    interval :0
                    }
            }
        ],
        yAxis : [
            {
                type : &#39;value&#39;,
                name:&#39;数量&#39;,
　　　　　　　　　　//下面的就很简单了，最小是多少，最大是多少，默认一次增加多少
                 min: 0,
                 max: 30,
                 interval: 6,
　　　　　　　　　　//下面是显示格式化，一般来说还是用的上的
                 axisLabel: {
                     formatter: &#39;{value} 包&#39;
                 }
            }
        ],
        series : [
            {
                name: &#39;数量&#39;,
                type: &#39;bar&#39;,
                itemStyle: {
                    normal: {
　　　　　　　　　　　　　　//好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                        color: function(params) {
                            // build a color map as your need.
                            var colorList = [
                              &#39;#C1232B&#39;,&#39;#B5C334&#39;,&#39;#FCCE10&#39;,&#39;#E87C25&#39;,&#39;#27727B&#39;,
                               &#39;#FE8463&#39;,&#39;#9BCA63&#39;,&#39;#FAD860&#39;,&#39;#F3A43B&#39;,&#39;#60C0DD&#39;,
                               &#39;#D7504B&#39;,&#39;#C6E579&#39;,&#39;#F4E001&#39;,&#39;#F0805A&#39;,&#39;#26C0C0&#39;
                            ];
                            return colorList[params.dataIndex]
                        },
　　　　　　　　　　　　　　//以下为是否显示，显示位置和显示格式的设置了
                        label: {
                            show: true,
                            position: &#39;top&#39;,
//                             formatter: &#39;{c}&#39;
                            formatter: &#39;{b}\n{c}&#39;
                        }
                    }
                },
　　　　　　　　　　//设置柱的宽度，要是数据太少，柱子太宽不美观~
　　　　　　　　　　barWidth:70,
                data: [28,15,9,4,7,8,23,11,17]
            }
        ]

ログイン後にコピー

効果は次のとおりです:

echarts ヒストグラムの色の設定: echarts ヒストグラムに異なる色を設定するにはどうすればよいですか? （コード）説明: 実際、色を使用してヒストグラムの色を設定することもできますが、色の設定が効果がない場合があります。そこで上記の方法を採用しました。