1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > ECharts color属性设置(不透明度 透明度 线性渐变 径向渐变 扇形渐变 纹理填充)

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

时间:2023-11-26 21:36:29

相关推荐

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

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)']],

效果图:

6 纹理填充

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

<img src="bg.png" id="bg_img" style="display:none" />

旭东怪的个人空间_哔哩哔哩_Bilibili旭东怪,人生低谷不可怕,可怕的是坚持不到人生转折点的那一天;旭东怪的主页、动态、视频、专栏、频道、收藏、订阅等。哔哩哔哩Bilibili,你感兴趣的视频都在B站。/484264966?spm_id_from=333.1007.0.0

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。