ECharts color属性设置（不透明度，透明度，线性渐变，径向渐变，扇形渐变，纹理填充）

拼搏现实的明天。 2023-10-05 11:04 74阅读 0赞

### 1 不透明度 ###

#### 1.1 颜色英文名 ####

示例：

color:'red'

#### 1.2 十六进制格式 ####

有两种表示方式。

第一种为\#+6位十六进制数，前2位表示红色，中间2位表示绿色，后2位表示蓝色。

第二种为\#+3位十六进制数，第1位表示红色，第2位表示绿色，第3位表示蓝色。

示例：

color:"#ccc",
    color:"#cccccc"

#### 1.3 rgb ####

rgb()方法的第2个参数表示红色，第2个参数表示绿色，第3个参数表示蓝色。

color:'rgb(128, 128, 128)'

### 2 rgba（透明度） ###

rgb()方法的第2个参数表示红色，第2个参数表示绿色，第3个参数表示蓝色，第4个参数表示透明度，1为不透明，0表示透明。

color:'rgba(128, 128, 128,1)'

### 3 线性渐变 ###

#### 3.1 LinearGradient ####

color: [  //仪表盘背景颜色渐变
        [1,new echarts.graphic.LinearGradient(0, 0, 1, 0, 
            [
                {
                    offset: 0.1,
                    color: "#fd2100"
                },
                {
                    offset: 0.6,
                    color: "#d09f00"
                },
                {
                    offset: 1,
                    color: "#26fd00"
                }
            ]);
        ]
    ],

#### 3.2 linear ####

// 线性渐变，前四个参数分别是 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
    }

### 4 径向渐变 ###

#### 4.1 RadialGradient ####

color:new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
        offset: 0,
        color: '#f7f8fa'
    }, {
        offset: 1,
        color: '#cdd0d5'
    }]),

#### 4.2 radial ####

// 径向渐变，前三个参数分别是圆心 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
    }

### 5 扇形渐变 ###

示例：

color: [
        [0.1, 'red'],
        [0.3, new echarts.graphic.LinearGradient(
            0, 1, 0, 0,
            [{
                offset: 0,
                color: 'red'
            }, {
                offset: 0.8,
                color: 'rgb(235,205,6)'
            }]
        )],
        [0.7, 'rgb(235,205,6)'],
        [0.9, new echarts.graphic.LinearGradient(
            0, 1, 0, 0,
            [{
                offset: 0,
                color: 'rgb(13,211,97)'
            }, {
                offset: 0.6,
                color: 'rgb(235,205,6)'
            }]
        )],
        [1, 'rgb(13,211,97)']
    ],

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70][]

### 6 纹理填充 ###

// 纹理填充
    color: {
        image: document.getElementById('bg_img'), // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
        repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
    }

[旭东怪的个人空间\_哔哩哔哩\_Bilibili旭东怪，人生低谷不可怕，可怕的是坚持不到人生转折点的那一天;旭东怪的主页、动态、视频、专栏、频道、收藏、订阅等。哔哩哔哩Bilibili，你感兴趣的视频都在B站。![1d5330f89298af44e002d6b2230b47659e28c05a.jpg][]https://space.bilibili.com/484264966?spm\_id\_from=333.1007.0.0][Bilibili_Bilibili_B_1d5330f89298af44e002d6b2230b47659e28c05a.jpg_https_space.bilibili.com_484264966_spm_id_from_333.1007.0.0]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201011103806538.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70
[1d5330f89298af44e002d6b2230b47659e28c05a.jpg]: https://i1.hdslb.com/bfs/face/1d5330f89298af44e002d6b2230b47659e28c05a.jpg
[Bilibili_Bilibili_B_1d5330f89298af44e002d6b2230b47659e28c05a.jpg_https_space.bilibili.com_484264966_spm_id_from_333.1007.0.0]: https://space.bilibili.com/484264966?spm_id_from=333.1007.0.0