堆叠折线图的绘制

堆叠折线图

堆叠折线图&＃xff1a;数据堆叠&＃xff0c;同个类目轴上系列配置相同的stack值后&＃xff0c;后一个系列的值会在前一个系列的值上相加。
完整代码片段&＃xff1a;

option &＃61; {title: {text: &＃39;折线图堆叠&＃39;},tooltip: {trigger: &＃39;axis&＃39;},legend: {data: [&＃39;邮件营销&＃39;, &＃39;联盟广告&＃39;, &＃39;视频广告&＃39;, &＃39;直接访问&＃39;, &＃39;搜索引擎&＃39;]},grid: {left: &＃39;3%&＃39;,right: &＃39;4%&＃39;,bottom: &＃39;3%&＃39;,containLabel: true},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: &＃39;category&＃39;,boundaryGap: false,data: [&＃39;周一&＃39;, &＃39;周二&＃39;, &＃39;周三&＃39;, &＃39;周四&＃39;, &＃39;周五&＃39;, &＃39;周六&＃39;, &＃39;周日&＃39;]},yAxis: {type: &＃39;value&＃39;},series: [{name: &＃39;邮件营销&＃39;,type: &＃39;line&＃39;,stack: &＃39;总量&＃39;,data: [120, 132, 101, 134, 90, 230, 210]},{name: &＃39;联盟广告&＃39;,type: &＃39;line&＃39;,stack: &＃39;总量&＃39;,data: [220, 182, 191, 234, 290, 330, 310]},{name: &＃39;视频广告&＃39;,type: &＃39;line&＃39;,stack: &＃39;总量&＃39;,data: [150, 232, 201, 154, 190, 330, 410]},{name: &＃39;直接访问&＃39;,type: &＃39;line&＃39;,stack: &＃39;总量&＃39;,data: [320, 332, 301, 334, 390, 330, 320]},{name: &＃39;搜索引擎&＃39;,type: &＃39;line&＃39;,stack: &＃39;总量&＃39;,data: [820, 932, 901, 934, 1290, 1330, 1320]}]
};


非堆叠图对比

上述例子&＃xff0c;作为对比&＃xff0c;如果不采用stack&＃xff0c;那么就是非堆叠图。

代码片段中将stack: &＃39;总量’注释掉&＃xff0c;代码如下&＃xff1a;

//后续stack: &＃39;总量&＃39; 全部注释掉series: [{name: &＃39;邮件营销&＃39;,type: &＃39;line&＃39;,//stack: &＃39;总量&＃39;,data: [120, 132, 101, 134, 90, 230, 210]},{name: &＃39;联盟广告&＃39;,type: &＃39;line&＃39;,//stack: &＃39;总量&＃39;,data: [220, 182, 191, 234, 290, 330, 310]},{name: &＃39;视频广告&＃39;,type: &＃39;line&＃39;,//stack: &＃39;总量&＃39;,data: [150, 232, 201, 154, 190, 330, 410]},{name: &＃39;直接访问&＃39;,type: &＃39;line&＃39;,//stack: &＃39;总量&＃39;,data: [320, 332, 301, 334, 390, 330, 320]},{name: &＃39;搜索引擎&＃39;,type: &＃39;line&＃39;,//stack: &＃39;总量&＃39;,data: [820, 932, 901, 934, 1290, 1330, 1320]}]


堆叠区域图

同时设置stack和areaStyle&＃xff0c;则可绘制出堆叠区域图。

option &＃61; {title: {text: &＃39;堆叠区域图&＃39;},tooltip: {trigger: &＃39;axis&＃39;,axisPointer: {type: &＃39;cross&＃39;,label: {backgroundColor: &＃39;#6a7985&＃39;}}},legend: {data: [&＃39;邮件营销&＃39;, &＃39;联盟广告&＃39;, &＃39;视频广告&＃39;, &＃39;直接访问&＃39;, &＃39;搜索引擎&＃39;]},toolbox: {feature: {saveAsImage: {}}},grid: {left: &＃39;3%&＃39;,right: &＃39;4%&＃39;,bottom: &＃39;3%&＃39;,containLabel: true},xAxis: [{type: &＃39;category&＃39;,boundaryGap: false,data: [&＃39;周一&＃39;, &＃39;周二&＃39;, &＃39;周三&＃39;, &＃39;周四&＃39;, &＃39;周五&＃39;, &＃39;周六&＃39;, &＃39;周日&＃39;]}],yAxis: [{type: &＃39;value&＃39;}],series: [{name: &＃39;邮件营销&＃39;,type: &＃39;line&＃39;,stack: &＃39;总量&＃39;,areaStyle: {},emphasis: {focus: &＃39;series&＃39;},data: [120, 132, 101, 134, 90, 230, 210]},{name: &＃39;联盟广告&＃39;,type: &＃39;line&＃39;,stack: &＃39;总量&＃39;,areaStyle: {},emphasis: {focus: &＃39;series&＃39;},data: [220, 182, 191, 234, 290, 330, 310]},{name: &＃39;视频广告&＃39;,type: &＃39;line&＃39;,stack: &＃39;总量&＃39;,areaStyle: {},emphasis: {focus: &＃39;series&＃39;},data: [150, 232, 201, 154, 190, 330, 410]},{name: &＃39;直接访问&＃39;,type: &＃39;line&＃39;,stack: &＃39;总量&＃39;,areaStyle: {},emphasis: {focus: &＃39;series&＃39;},data: [320, 332, 301, 334, 390, 330, 320]},{name: &＃39;搜索引擎&＃39;,type: &＃39;line&＃39;,stack: &＃39;总量&＃39;,label: {show: true,position: &＃39;top&＃39;},areaStyle: {},emphasis: {focus: &＃39;series&＃39;},data: [820, 932, 901, 934, 1290, 1330, 1320]}]
};


渐变堆叠面积图

如果areaStyle设置为渐变&＃xff0c;则可绘制出渐变堆叠面积图。

option &＃61; {color: [&＃39;#80FFA5&＃39;, &＃39;#00DDFF&＃39;, &＃39;#37A2FF&＃39;, &＃39;#FF0087&＃39;, &＃39;#FFBF00&＃39;],title: {text: &＃39;渐变堆叠面积图&＃39;},tooltip: {trigger: &＃39;axis&＃39;,axisPointer: {type: &＃39;cross&＃39;,label: {backgroundColor: &＃39;#6a7985&＃39;}}},legend: {data: [&＃39;Line 1&＃39;, &＃39;Line 2&＃39;, &＃39;Line 3&＃39;, &＃39;Line 4&＃39;, &＃39;Line 5&＃39;]},toolbox: {feature: {saveAsImage: {}}},grid: {left: &＃39;3%&＃39;,right: &＃39;4%&＃39;,bottom: &＃39;3%&＃39;,containLabel: true},xAxis: [{type: &＃39;category&＃39;,boundaryGap: false,data: [&＃39;周一&＃39;, &＃39;周二&＃39;, &＃39;周三&＃39;, &＃39;周四&＃39;, &＃39;周五&＃39;, &＃39;周六&＃39;, &＃39;周日&＃39;]}],yAxis: [{type: &＃39;value&＃39;}],series: [{name: &＃39;Line 1&＃39;,type: &＃39;line&＃39;,stack: &＃39;总量&＃39;,smooth: true,lineStyle: {width: 0},showSymbol: false,areaStyle: {opacity: 0.8,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: &＃39;rgba(128, 255, 165)&＃39;}, {offset: 1,color: &＃39;rgba(1, 191, 236)&＃39;}])},emphasis: {focus: &＃39;series&＃39;},data: [140, 232, 101, 264, 90, 340, 250]},{name: &＃39;Line 2&＃39;,type: &＃39;line&＃39;,stack: &＃39;总量&＃39;,smooth: true,lineStyle: {width: 0},showSymbol: false,areaStyle: {opacity: 0.8,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: &＃39;rgba(0, 221, 255)&＃39;}, {offset: 1,color: &＃39;rgba(77, 119, 255)&＃39;}])},emphasis: {focus: &＃39;series&＃39;},data: [120, 282, 111, 234, 220, 340, 310]},{name: &＃39;Line 3&＃39;,type: &＃39;line&＃39;,stack: &＃39;总量&＃39;,smooth: true,lineStyle: {width: 0},showSymbol: false,areaStyle: {opacity: 0.8,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: &＃39;rgba(55, 162, 255)&＃39;}, {offset: 1,color: &＃39;rgba(116, 21, 219)&＃39;}])},emphasis: {focus: &＃39;series&＃39;},data: [320, 132, 201, 334, 190, 130, 220]},{name: &＃39;Line 4&＃39;,type: &＃39;line&＃39;,stack: &＃39;总量&＃39;,smooth: true,lineStyle: {width: 0},showSymbol: false,areaStyle: {opacity: 0.8,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: &＃39;rgba(255, 0, 135)&＃39;}, {offset: 1,color: &＃39;rgba(135, 0, 157)&＃39;}])},emphasis: {focus: &＃39;series&＃39;},data: [220, 402, 231, 134, 190, 230, 120]},{name: &＃39;Line 5&＃39;,type: &＃39;line&＃39;,stack: &＃39;总量&＃39;,smooth: true,lineStyle: {width: 0},showSymbol: false,label: {show: true,position: &＃39;top&＃39;},areaStyle: {opacity: 0.8,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: &＃39;rgba(255, 191, 0)&＃39;}, {offset: 1,color: &＃39;rgba(224, 62, 76)&＃39;}])},emphasis: {focus: &＃39;series&＃39;},data: [220, 302, 181, 234, 210, 290, 150]}]
};