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
}
]
效果图: