之前经常使用echarts来实现常见的折线、柱形、饼状等图表。今天做做数据大屏的时候，ui小姐姐问我可以实现渐变面积图形吗？ 小哥哥表示男人不能说不行，这都是小场面。接下来我们看下如何使用echarts实现渐变面积图。
option = {grid:{//设置图表四周留白间距top:'2%',right:'2%',bottom:'4%',left:'4%'},xAxis: {type: 'category',boundaryGap: false,//设置x轴两边的留白axisTick:{//x轴刻度尺show:false},axisLine: {//x轴线条颜色lineStyle: {color: '#999'}},data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value',max:1400,//最大刻度值interval:100,//刻度值间隔值splitLine :{//网格线show:false //关闭网格线或lineStyle:{type:'dashed', //设置网格线类型 dotted：虚线 solid:实线color:'#ededed' //网格线颜色},},axisLine: {//y轴线条颜色show: true,lineStyle: {color: '#999'}},},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line',smooth: true,//面积图改成弧形状lineStyle: {width: 1,//外边线宽度color:'red'//外边线颜色},showSymbol: false,//去除面积图节点圆areaStyle: {//区域填充渐变颜色color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: 'rgba(237,66,100, 0.5)' // 0% 处的颜色}, {offset: 1, color: 'rgba(234,174,10, 1)' // 100% 处的颜色}],global: false // 缺省为 false}}}]};
以上便是用echarts来实现的面积图，可能写的不到位，欢迎大家指正。
如果觉得《echarts面积图颜色渐变的实现》对你有帮助，请点赞、收藏，并留下你的观点哦！
