echart 渐变内置生成器echarts.graphic.LinearGradient

在使用echarts绘制图表时, 如果需要使用渐变色, 则应使用echarts内置的渐变色生成器echarts.graphic.LinearGradient

itemStyle: {
	normal: {
		color: '#00E2FF',
		lineStyle: {
			// 系列级个性化折线样式
			width: 5,
			type: 'solid',
			// 颜色渐变函数 前四个参数分别表示四个位置依次为
            // 右下左上
			color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
				{
					offset: 0,
					color: '#00E2FF'
				},
				{
					offset: 1,
					color: '#0063BF'
				}
			]) // 线条渐变色
		}
	},
	emphasis: {
		color: '#0063BF',
		lineStyle: {
			// 系列级个性化折线样式
			width: 5,
			type: 'dotted',
			color: '#4fd6d2' // 折线的颜色
		}
	}
}, // 线条样式
areaStyle: {
	normal: {
		color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
			{
				// 折线图颜色渐变
				offset: 0,
				color: 'rgba(0, 226, 255, 0.5)'
			},
			{
				offset: 1,
				color: 'rgba(0, 99, 191, 0)'
			}
		])
	}
},

入了5个参数：

前4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始.

第5个参数则是一个数组, 用于配置颜色的渐变过程. 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置, color表示颜色

 

图：