echarts自定义样式（二）——折线图

折线图自定义图标、渐变色、阴影

相关配置：symbol: ‘image://图片路径’,
symbolSize:图片尺寸,
lineStyle:{
normal:{
width: 2,
shadowColor:’#ddd’,
shadowBlur:2,
shadowOffsetY:10
}

				},
				areaStyle：{
				}

例1：自定义图标

series: [
			
				{
					name:'暂住',
					type: 'line',
					symbol: 'image://images/i3.png',
					// symbol: 'circle',
					symbolSize:20,
					// symbolOffset: [-1*fontS, -2*fontS],
					lineStyle: {
						normal: {
							width:2,
							color: "#C7FA20"
						}
					},
					label: {
						show: false,
					},
					markPoint:{
						symbol:'rect',
						symbolSize:['2','50'],
						label:{
							normal:{
								show:false,
								color:'#fff',
								offset:[0,-35],
								// formatter:function(data){
								// 	return data.data.week;
								// },
							}
						},
						itemStyle:{
							normal:{
								color: {
									type: 'linear',x: 0,y: 0,x2: 0,y2: 1,
									colorStops: [
										{offset: 0,color: '#C7FA20'}, 
										{offset: 1,color: 'rgba(255,255,255,0)'}
									],
									globalCoord: false // 缺省为 false
								},
							}
						},
						data:pointData2,
					},
					areaStyle: {
						normal: {
							color:{
								type: 'linear',x: 0,y: 0,x2: 0,y2: 1,
								colorStops: [
									{offset: 0, color: 'rgba(199,250,32,1)'},
									{offset: 0.3, color: 'rgba(199,250,32,0.3)'},
									{offset: 1, color: 'rgba(199,250,32,0)'}
								],
								globalCoord: false // 缺省为 false
							},
						}
					},
					data:yValue2
				}
		   ]

效果图：

例2：渐变色：线渐变，区域颜色渐变

series: [
				{
					name:'人员数量',
					type:'line',
					smooth:true,
					symbol: 'none',
					sampling: 'average',
					lineStyle: {
						normal: {
							width:5,
							shadowColor:'rgba(0,77,60,0.9)',
							shadowBlur:15,
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: '#1cdc6f'
							}, {
								offset: 0.5,
								color: '#f4dc00'
							}, {
								offset: 1,
								color: '#1cdc6f'
							}])
						}
					},
					areaStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: 'rgba(22, 251, 147,0.8)'
							}, {
								offset: 0.3,
								color: 'rgba(22, 251, 248,0.8)'
							}, {
								offset: 0.6,
								color: 'rgba(22, 251, 147,0.6)'
							}, {
								offset: 1,
								color: 'rgba(22, 251, 248,0.1)'
							}])
						}
					},
					data: yValue1
				},
				{
					name:'人员数量',
					type:'line',
					smooth:true,
					symbol: 'none',
					sampling: 'average',
					lineStyle: {
						normal: {
							width:4,
							shadowColor:'rgba(255,55,116,0.3)',
							shadowBlur:15,
							color:{
								type: 'linear',x: 0,y: 0,x2: 0,y2: 1,
								colorStops: [
									{offset: 0,color: '#ff5a9c'}, 
									{offset: 0.5,color: '#ffda5a'}, 
									{offset: 1,color: '#ff5d5d'}
								],
							},
						}
					},
					areaStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{offset: 0,color: 'rgba(255, 90, 156,0.8)'}, 
								{offset: 1,color: 'rgba(255, 90, 156,0.1)'}
							])
						}
					},
					data: yValue2
				}
			]

效果图：

例3：阴影

series: [
				
				{
					name:'',
					type:'line',
					showSymbol:true,
					itemStyle: {
						normal: {
							borderWidth:4,
						}
					},
					lineStyle:{
						normal:{
							width: 2,
							shadowColor:'#ddd',
							shadowBlur:2,
							shadowOffsetY:10
						}
						
					},
					yAxisIndex: 1,
					data:yValue2
				},
				{
					name:'',
					type:'line',
					showSymbol:true,
					itemStyle: {
						normal: {
							borderWidth:4,
						}
					},
					lineStyle:{
						normal:{
							width: 2,
							shadowColor:'#ddd',
							shadowBlur:2,
							shadowOffsetY:10
						}
						
					},
					yAxisIndex: 1,
					data:yValue3
				},
				{
					name:'',
					type:'line',
					showSymbol:true,
					itemStyle: {
						normal: {
							borderWidth:4,
						}
					},
					lineStyle:{
						normal:{
							width: 2,
							shadowColor:'#ddd',
							shadowBlur:2,
							shadowOffsetY:10
						}
						
					},
					yAxisIndex: 1,
					data:yValue4
				}
			]

效果图：