折线图线条渐变色
2020-06-18 本文已影响0人
冬天的_太阳
option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
name:'样例3',
type:'line',
itemStyle: {
color: '#6A5ACD',
normal: {
lineStyle: { // 系列级个性化折线样式
width: 2,
type: 'solid',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#0000FF'
}, {
offset: 1,
color: '#CD5C5C'
}]),//线条渐变色
}
},
emphasis: {
color: '#6A5ACD',
lineStyle: { // 系列级个性化折线样式
width: 2,
type: 'dotted',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#1E90FF'
}, {
offset: 1,
color: '#0000FF'
}])
}
}
},//线条样式
///折线下方是否有颜色的设置
areaStyle:{
normal:{
//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(80,141,255,0.39)'
}, {
offset: .34,
color: 'rgba(56,155,255,0.25)'
},{
offset: 1,
color: 'rgba(38,197,254,0.00)'
}])
}
},//区域颜色渐变
data:[450, 432, 401, 454, 590, 530, 110,242]
}]
};
QQ截图20200618154319.png