正在阅读：
- 首页 » 开发运维 » 前端 » Echarts折线面积图垂直渐变效果
Echarts折线面积图垂直渐变效果
效果图：
主要是用到了
new echarts.graphic.LinearGradient
在 series对象中加入如下代码：
series: [
{
name: '堆垛机',
type: 'line',
stack: '总量',
areaStyle: {},
data: [1800, 2000, 1500, 1200, 900, 2300, 2100],
smooth: true,
symbol: 'none',
lineStyle:{
color:'#EBD763',
width:4
},
itemStyle: {
normal: {
areaStyle: {type: 'default'},
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0.1, color: 'rgba(252, 186, 0, 0.5)'},
{offset: 0.8, color: 'rgba(255, 253, 0, 0)'},
]
),
borderColor:'#71df6f',//拐点边框颜色
borderWidth:2//拐点边框大小
}},
},
{
name: '输送机',
type: 'line',
stack: '总量',
areaStyle: {},
data: [2200, 1820, 1910, 1340, 1190, 830, 2010],
smooth: true,
symbol: 'none',
lineStyle:{
color:'#06D2D7',
width:4
},
itemStyle: {
normal: {
areaStyle: {type: 'default'},
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0.1, color: 'rgba(5, 215, 217, 1)'},
{offset: 0.8, color: 'rgba(5, 215, 217, 0)'},
]
),
borderColor:'#71df6f',//拐点边框颜色
borderWidth:2//拐点边框大小
}},
},
{
name: '穿梭车',
type: 'line',
stack: '总量',
areaStyle: {},
data: [1500, 1200, 800, 1540, 1900, 2030, 1110],
smooth: true,
symbol: 'none',
lineStyle:{
color:'#0946EF',
width:4
},
itemStyle: {
normal: {
areaStyle: {type: 'default'},
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0.1, color: 'rgba(32, 162, 255, 1)'},
{offset: 0.8, color: 'rgba(0, 40, 255, 1)'},
]
),
borderColor:'#71df6f',//拐点边框颜色
borderWidth:2//拐点边框大小
}},
}
]该日志由 bemender 于 2020年10月16日 发表
转载请注明文本地址：https://www.bemhome.com/post/39.html