正在阅读:
- 首页 » 开发运维 » 前端 » 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