Echarts-使用渐变色填充

垂直方向的渐变
color: {
								type: 'linear',
								// x=0,y=1,柱子的颜色在垂直方向渐变
								x: 0,
								y: 1,
								colorStops: [
									// 0%处的颜色
									{
										offset: 0,
										color: '#12c2e9',
									},
									// 50%处的颜色
									{
										offset: 0.5,
										color: '#c471ed',
									},
									// 100%处的颜色
									{
										offset: 1,
										color: '#f64f59',
									},
								],
								global: false // 缺省为 false
							}

Echarts-使用渐变色填充_第1张图片水平方向的渐变

color: {
								type: 'linear',
								// x2=1,y=0,柱子的颜色在水平方向渐变
								x2: 1,
								y2: 0,
								colorStops: [
									// 0%处的颜色
									{
										offset: 0,
										color: '#12c2e9',
									},
									// 50%处的颜色
									{
										offset: 0.5,
										color: '#c471ed',
									},
									// 100%处的颜色
									{
										offset: 1,
										color: '#f64f59',
									},
								],
								global: false // 缺省为 false
							}

水平方向的渐变


 

 

径向渐变


 

 

你可能感兴趣的:(echarts,前端,javascript)