---

一、兩種漸變的實現方法

1、直接配置參數實現顏色漸變

橫向的漸變：

//主要代碼
option = {xAxis: {type: 'category',boundaryGap: false,data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line',
//折線圖區域 x->x2 表示橫向  y->y2表示縱向 下面則是橫向的漸變areaStyle: {color:{type: 'linear',x: 0,y: 0,x2: 1,y2: 0,colorStops: [{offset: 0, color: 'red' // 0% 處的顏色}, {offset: 1, color: 'blue' // 100% 處的顏色}],}}}]
};

若把y->y2改為0，1則表明是豎向的漸變

2、使用ECharts自帶的方法實現顏色漸變

縱向的漸變：

使用new echarts.graphic.LinearGradient()方法

areaStyle: {//線性漸變，前4個參數分別是x0,y0,x2,y2(范圍0~1);//相當于圖形包圍盒中的百分比。如果最后一個參數是‘true’，則該四個值是絕對像素位置。color: new echarts.graphic.LinearGradient( 0, 0, 0, 1,[{offset: 0,color: 'rgba(108, 255, 252, 0.8)', // 0% 處的顏色},{offset: 1,color: 'rgba(43, 205, 119, 0.8)', // 100% 處的顏色},],false), //globalCoord為false，表示使用自身坐標系進行漸變。 }