环状图渐变效果

环状图渐变有两种方式

从内向外，也就是沿着圆心的方向进行渐变
沿着圆周渐变，也就是说沿着圆周的方向进行渐变操作。

下面我们就分别看看如何使用这两种方式实现渐变效果。

圆周方向渐变

圆周方向渐变又被称为是线性渐变效果，可以通过如下的配置来实现。

// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，
// 相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，
// 则该四个值是绝对的像素位置
color: {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0, color: 'red' // 0% 处的颜色
    }, {
        offset: 1, color: 'blue' // 100% 处的颜色
    }],
    global: false // 缺省为 false
}

通过Echarts官网我们知道，对于环状图其实是饼图的一种特例，通过对series属性下的如下的属性进行调整。

radius: ['30%', '50%'],
center: ['40%', '50%'],

分别表示内径的大小和在Canvas中的位置。

这里需要注意的是上面代码中提到的x1、y1、x2、y2，分别表示的就是环状图的四个边角的坐标。

例如上面给出的

x: 0,
y: 0,
x2: 0,
y2: 1,

意思就是说，如果将其看做是一个矩形的话，就相当于从左下角开始，到右上角结束。

在series中有一个data属性，是一个数组类型，这个数组类型就是来设置每个区域的占比的，我们可以通过data属性下对象中的itemStyle属性来设置颜色渐变。整个data下的一个对象如下所示

{
    value: 25,
    name: '审核通过',
    itemStyle: {
        color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#108c50' // 0% 处的颜色
            }, {
                offset: 1, color: '#84f7d2' // 100% 处的颜色
            }],
            global: false // 缺省为 false
        },
    }
},

其中value 代表设置的数据的大小，name表示该区域表示的内容，itemStyle中的color属性就是用来设置数据渐变，这里需要注意的就是colorStops数组，分别表示从0到1的颜色值，通过设置这个值就可以实现颜色的渐变效果，如下所示。

圆心方向渐变

圆心方向的渐变根据上面的描述我们知道，是沿着圆心方向的渐变效果，也被称为是径向渐变效果。代码如下所示。

// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: {
    type: 'radial',
    x: 0.5,
    y: 0.5,
    r: 0.5,
    colorStops: [{
        offset: 0, color: 'red' // 0% 处的颜色
    }, {
        offset: 1, color: 'blue' // 100% 处的颜色
    }],
    global: false // 缺省为 false
}

这个与之前的配置是一样的，我们只需要替换每个data对象中的itemStyle属性下的color的值就可以实现对应的颜色渐变了。这里需要注意的就是x、y、r分别代表圆心的距离和半径，如下图所示。

总结

上面描述了饼图实现颜色渐变的两种方式，当然在实际开发过程中，我们还会遇到其他的配置方式，其实现方式与上述两种方式是类似的。无非就是径向的渐变和线性渐变。这里需要注意的就是线性渐变的配置中对于坐标的理解，可以将其看做一个矩形来理解。在径向渐变中涉及到的x、y也是需要根据半径的位置来进行理解，一般情况下只需要变化y的值就可以了。

四时宝库

程序员的知识宝库

如何实现Echarts饼状图显示颜色渐变效果?

环状图渐变效果

圆周方向渐变

圆心方向渐变

总结