[recharts]: ECharts Style Area Charts

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title>eAreaID24e52bd12470</title>
   <meta http-equiv="content-type" content="text/html;charset=utf-8" />

<script src='https://echarts.baidu.com/doc/example/www/js/esl.js'></script>

<div id='eAreaID24e52bd12470' style='width:960px; height:500px; ;border:1px solid #ccc;padding:10px;'></div>

<script>

require.config({
        paths:{ 
            'echarts': 'https://echarts.baidu.com/doc/example/www/js/echarts-map',
            'echarts/chart/bar' : 'https://echarts.baidu.com/doc/example/www/js/echarts-map',
            'echarts/chart/line': 'https://echarts.baidu.com/doc/example/www/js/echarts-map',
            'echarts/chart/scatter': 'https://echarts.baidu.com/doc/example/www/js/echarts-map',
            'echarts/chart/k': 'https://echarts.baidu.com/doc/example/www/js/echarts-map',
            'echarts/chart/pie': 'https://echarts.baidu.com/doc/example/www/js/echarts-map',
            'echarts/chart/map': 'https://echarts.baidu.com/doc/example/www/js/echarts-map',
            'echarts/chart/force': 'https://echarts.baidu.com/doc/example/www/js/echarts-map',
            'echarts/chart/radar': 'https://echarts.baidu.com/doc/example/www/js/echarts-map'
        }
    });
    
    // Step:4 require echarts and use it in the callback.
    require(
        [
            'echarts',
            'echarts/chart/bar',
            'echarts/chart/line',
            'echarts/chart/scatter',
            'echarts/chart/k',
            'echarts/chart/pie',
            'echarts/chart/map',
            'echarts/chart/force',
            'echarts/chart/radar'
        ],
	function(ec) {
		var EChart_eAreaID24e52bd12470 = ec.init(document.getElementById('eAreaID24e52bd12470'))
		var option_eAreaID24e52bd12470 = 
{
	"title" : {
		"text" : "UK Quarterly Gas Consumption",
		"subtext" : "",
		"x" : "center",
		"y" : "top"
	},
	"calculable" : true,
	"tooltip" : {
		"show" : true,
		"trigger" : "item"
	},
	"toolbox" : {
		"show" : true,
		"x" : "right",
		"y" : "top",
		"orient" : "horizontal",
		"feature" : {
			"mark" : {
				"show" : true
			},
			"dataZoom" : {
				"show" : false
			},
			"magicType" : {
				"show" : true,
				"type" : [
					"line",
					"bar",
					"stack",
					"tiled"
				]
			},
			"restore" : {
				"show" : true
			},
			"dataView" : {
				"show" : {
					"readOnly" : false
				}
			},
			"saveAsImage" : {
				"show" : true
			}
		}
	},
	"legend" : {
		"show" : true,
		"orient" : "horizontal",
		"x" : "left",
		"y" : "top",
		"data" : [
			"Q1",
			"Q2",
			"Q3",
			"Q4"
		]
	},
	"xAxis" : {
		"position" : "bottom",
		"name" : "",
		"nameLocation" : "start",
		"scale" : false,
		"precision" : 2,
		"power" : 2,
		"axisLine" : {
			"show" : true
		},
		"axisTick" : {
			"show" : false
		},
		"axisLable" : {
			"show" : true,
			"textStyle" : {
				"color" : "black"
			}
		},
		"splitLine" : {
			"show" : true
		},
		"splitArea" : {
			"show" : false
		},
		"type" : "category",
		"data" : [
			"1960",
			"1961",
			"1962",
			"1963",
			"1964",
			"1965",
			"1966",
			"1967",
			"1968",
			"1969",
			"1970",
			"1971",
			"1972",
			"1973",
			"1974",
			"1975",
			"1976",
			"1977",
			"1978",
			"1979",
			"1980",
			"1981",
			"1982",
			"1983",
			"1984",
			"1985",
			"1986"
		],
		"boundaryGap" : true
	},
	"yAxis" : {
		"position" : "left",
		"name" : "",
		"nameLocation" : "start",
		"scale" : false,
		"precision" : 2,
		"power" : 2,
		"axisLine" : {
			"show" : true
		},
		"axisTick" : {
			"show" : false
		},
		"axisLable" : {
			"show" : true
		},
		"splitLine" : {
			"show" : true
		},
		"splitArea" : {
			"show" : false
		},
		"type" : "value",
		"boundaryGap" : [
			0,
			0
		]
	},
	"series" : [
		{
			"type" : "line",
			"name" : "Q1",
			"data" : [
				160.1,
				160.1,
				169.7,
				187.3,
				176.1,
				185.7,
				200.1,
				204.9,
				227.3,
				244.9,
				244.9,
				301,
				317,
				371.4,
				449.9,
				491.5,
				593.9,
				584.3,
				669.2,
				827.7,
				840.5,
				848.5,
				925.3,
				917.3,
				989.4,
				1087,
				1163.9
			],
			"stack" : "SUM",
			"itemStyle" : {
				"normal" : {
					"areaStyle" : {
						"type" : "default"
					}
				}
			}
		},
		{
			"type" : "line",
			"name" : "Q2",
			"data" : [
				129.7,
				124.9,
				140.9,
				144.1,
				147.3,
				155.3,
				161.7,
				176.1,
				195.3,
				214.5,
				216.1,
				196.9,
				230.5,
				240.1,
				286.6,
				321.8,
				329.8,
				395.4,
				421,
				467.5,
				414.6,
				437,
				443.4,
				515.5,
				477.1,
				534.7,
				613.1
			],
			"stack" : "SUM",
			"itemStyle" : {
				"normal" : {
					"areaStyle" : {
						"type" : "default"
					}
				}
			}
		},
		{
			"type" : "line",
			"name" : "Q3",
			"data" : [
				84.8,
				84.8,
				89.7,
				92.9,
				89.7,
				99.3,
				102.5,
				112.1,
				115.3,
				118.5,
				188.9,
				136.1,
				152.1,
				158.5,
				179.3,
				177.7,
				176.1,
				187.3,
				216.1,
				209.7,
				217.7,
				209.7,
				214.5,
				224.1,
				233.7,
				281.8,
				347.4
			],
			"stack" : "SUM",
			"itemStyle" : {
				"normal" : {
					"areaStyle" : {
						"type" : "default"
					}
				}
			}
		},
		{
			"type" : "line",
			"name" : "Q4",
			"data" : [
				120.1,
				116.9,
				123.3,
				120.1,
				123.3,
				131.3,
				136.1,
				140.9,
				142.5,
				153.7,
				142.5,
				267.3,
				336.2,
				355.4,
				403.4,
				409.8,
				483.5,
				485.1,
				509.1,
				542.7,
				670.8,
				701.2,
				683.6,
				694.8,
				730,
				787.6,
				782.8
			],
			"stack" : "SUM",
			"itemStyle" : {
				"normal" : {
					"areaStyle" : {
						"type" : "default"
					}
				}
			}
		}
	]
}
  EChart_eAreaID24e52bd12470.setOption(option_eAreaID24e52bd12470);
        }
    );
</script>

<div><span>Chart ID: <a href="Chart_eAreaID24e52bd12470.html">eAreaID24e52bd12470</a></span><br />
 

<span> 
<a href="https://github.com/taiyun">Taiyun Wei</a> & <a href="https://yzhou.org/">Yang Zhou</a>
</span></div>
</body>
</html>

Modified http://echarts.baidu.com/doc/example/www/js/esl.js to a secure url

https://echarts.baidu.com/doc/example/www/js/esl.js