理解Echarts配置项

color

color是一个常用的属性，在很多配置项里用来设置填充颜色，color的值有rgb，rgba，16进制的颜色值，还支持渐变和纹理.

渐变

纯色很好理解，这里主要说一下渐变，以线性渐变为例

//线性渐变的color配置
color: {
    type: 'linear',
    // x,y 线的起点
    x: 0,
    y: 0,
    // x2,y2 线的终点
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0, color: 'red' // 0%(线的起点) 处的颜色
    }, {
        offset: 1, color: 'blue' // 100%(线的终点) 处的颜色
    }],
    global: false // 缺省为 false
}

那最大的问题就是绘制图形时的坐标了，很容易被误导的点在于绘制出来的坐标系跟绘制图形时的坐标系不是一个东西，看下图，绘制好的图形原点(0,0)位于左下角

但绘制图形时，原点是在左上角的

options = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [1320, 1320, 1320, 1320, 1320, 1320, 1320],
        type: 'line',
        areaStyle: {
            color: {
                type: 'linear',
                // x,y 线的起点在左上角
                x: 0,
                y: 0,
                // x2,y2 线的终点在左下角
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: 'red' // 0%(线的起点) 处的颜色
                }, {
                    offset: 1, color: 'blue' // 100%(线的终点) 处的颜色
                }],
                global: false // 缺省为 false
            }
        }
    }]
};

上面的代码，用过ps的人可以想象从左上角到左下角拉渐变线，拉出来就是从红到蓝的垂直渐变了

水平的线性渐变就是从(0,0) -> (1,0)

options = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [1320, 1320, 1320, 1320, 1320, 1320, 1320],
        type: 'line',
        areaStyle: {
            color: {
                type: 'linear',
                // x,y 线的起点在左上角
                x: 0,
                y: 0,
                // x2,y2 线的终点在左下角
                x2: 1,
                y2: 0,
                colorStops: [{
                    offset: 0, color: 'red' // 0%(线的起点) 处的颜色
                }, {
                    offset: 1, color: 'blue' // 100%(线的终点) 处的颜色
                }],
                global: false // 缺省为 false
            }
        }
    }]
};

依次类推，从左上角到右下角的，(0,0) -> (1,1)

纹理

color: {
    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
    repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
}