The function of the accumulation line chart is to show the trend of the change of the size of each piece of data over time or in ordered categories, showing the relationship between the parts and the whole. Stacking area map is a kind of combination graph which adds area map to line graph. Acreage maps, also known as acreage maps, emphasize the trend of quantity over time to draw attention to the trend of total value. Unlike stack-up line maps, stack-up area maps can better display data with many class or numerical approximations. In ECharts, the important parameter to implement stacking is stack. As long as the stack is set to the same value, the two groups pile up; Conversely, if the stack is set to a different value, it does not stack.

Use the sales data of electronic products in a mall within a week to draw the accumulation area map, as shown in the figure. As can be seen from the diagram of packing area, from bottom to top, the value of the second line = its own value + the value of the first line, the value of the third line = the value on the second line + its own value, and so on. Taking Wednesday’s data as an example, the stack area map actually shows: Mobile phone =456, refrigerator =456+391=847, air conditioner =847+331=1178, TV =1178+333=1511, others =1511+432=1943.

If the Stacked Line Chart needs to be realized, you only need to comment out the code Line where areaStyle resides in each group of data in the series in the code of the Stacked Line Chart, such as //areaStyle:{}. The effect of a stacked line chart is shown below.

Source code is as follows:

<html> <head> <meta charset="utf-8"> <! - introduce ECharts script -- > < script SRC = "js/ECharts js" > < / script > < / head > < body > <! <div id="main" style="width: 600px; height: 400px"></div> <script type="text/javascript"> Var myChart = echarts.init(document.getelementById ("main")); Var option = {title: {var option = {title: {var option = {title: {var option = {title: {var option = {title: {var option = {title: {var option = {title: { Tooltip: {// Configure the tooltip component trigger: 'axis'}, legend: {// configure the legend component data: [' mobile phone ', 'refrigerator ',' air conditioner ', 'TV ',' other '], left: 160, // set the left position of the appropriate adjustment toolbox top: 3 // set the left position of the appropriate adjustment toolbox}, toolbox: {// configure the toolbox components show: true, orient: 'vertical', feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] }, restore: { show: true }, saveAsImage: { show: true } }, top: 52, // Set the top position of the appropriate adjustment tool box left: 550 // Set the left position of the appropriate adjustment tool box}, calculable: true, xAxis: [// Configure the X-axis coordinate system {type: 'category' boundaryGap: false data: [' Monday 'and' on Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday ' ']}], yAxis: {[/ / configure Y coordinate system type: 'value'}], series: [// config data series {name: 'phone ', type: 'line', // set specified display as a fold stack:' total ', //smooth:true, color: 'RGB (0,0,0)', itemStyle: {normal: {//areaStyle: {type: 'default', color:' RGB (174,221,139)'}, data: [434, 345, 456, 222, 333, 444, 432]}, {name: 'icebox ', type: 'line', // ItemStyle: {normal: {//areaStyle: {type: 'default', color: 'RGB (107,194,53)'}}}, data: [420, 282, 391, 344, 390, 530, 410]}, {name: 'air conditioner ', type: 'line', 'red', itemStyle: {normal: {//areaStyle: {type: 'default', color: 'RGB (6,128,67)'}}}, data: [350, 332, 331, 334, 390, 320, 340]}, {name: 'TV ', type: 'line', // set the specified display as a line stack:' total ', // set the stack color: 'green', itemStyle: { normal: { //areaStyle: { type: 'default', color: 'grey' } } }, data: [420, 222, 333, 442, 230, 430, 430]}, {name: 'other ', type: 'line', // set the specified display as a line stack:' total ', // set the stack color: '#FA8072', itemStyle: {normal: {//areaStyle: {type: 'default', color: 'RGB (38,157,128)'}}}, data: [330, 442, 432, 555, 456, 666, 877]}]; // Display the graph mychart.setoption (option) with the configuration item and data just specified; </script> </body> </html>Copy the code