Echarts-颜色渐变

颜色渐变分为线性渐变和径性渐变。

一、线性渐变

纵向渐变：从上向下或从下向上，当x:0,y:0,x2:0,y2:1是从上向下；当x:0,y:1,x2:0,y2:0是从下向上
横向渐变：从左向右或从右向左，当x:1,y:0,x2:0,y2:0是从右向左；当x:1,y:0,x2:1,y2:0是从左向右；
一种颜色

image.png

series: [{
                type: 'bar',
                data: yDataArr,
                itemStyle: {
                    color: {
                        type: 'linear', // 线性渐变
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: 'red' // 0%处的颜色为红色
                        }, {
                            offset: 1,
                            color: 'blue' // 100%处的颜色为蓝
                        }]
                    }
                }
            }]

多种颜色：

image.png

var mCharts = echarts.init(document.querySelector("div"))
        var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '小强']
        var barTopColor = ["#02c3f1", "#53e568", "#a154e9", '#ffa800', '#1ace4a', '#4bf3ff', '#4f9aff', '#b250ff'];
        var barBottomColor = ["rgba(2,195,241,0.1)", "rgba(83, 229, 104, 0.1)", "rgba(161, 84, 233, 0.1)", 'rgba(248,195,248,.3)', 'rgba(100,255,249, 0.3)', 'rgba(135,183,255,.3)', 'rgba(11,42,84,.3)', 'rgba(100,255,249,.3)'];

        var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
        var option = {
            xAxis: {
                type: 'category',
                data: xDataArr
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                type: 'bar',
                data: yDataArr,
                itemStyle: {
                    normal: {
                        color: function(params) {
                            console.log(params);
                            return new echarts.graphic.LinearGradient(
                                0, 0, 0, 1, [{
                                    offset: 1,
                                    color: barTopColor[params.dataIndex]
                                }, {
                                    offset: 0,
                                    color: barBottomColor[params.dataIndex]
                                }]
                            );
                        },
                    },
                },
            }]
        }
        mCharts.setOption(option)

二、径性渐变

image.png

 series: [{
                type: 'bar',
                data: yDataArr,
                itemStyle: {
               
                    color: {
                      type: 'radial', // 径向渐变
                      x: 0.5,  // 圆心点x轴，0.5为柱状图宽度中心
                      y: 0.5,  // 圆心点y轴，0.5为柱状图高度中心
                      r: 0.5,   // 半径
                      colorStops: [
                        {
                         offset: 0, color: 'red' // 0%处的颜色为红色
                        },
                        {
                          offset: 1, color: 'blue' // 100%处的颜色为蓝
                        }
                      ]
                    }
                }
              
            }]