Skip to content

Instantly share code, notes, and snippets.

@woobe

woobe/code.R

Last active October 30, 2015 14:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save woobe/6d6c4fbbfee4c7b9e687 to your computer and use it in GitHub Desktop.
Save woobe/6d6c4fbbfee4c7b9e687 to your computer and use it in GitHub Desktop.
Download ZIP
[recharts]: ECharts Style Area Charts
Raw
code.R
## Load package
library(recharts) ## see https://github.com/taiyun/recharts
## Convert UKgas time series into a matrix
mat_UKgas <- matrix(UKgas, ncol = 4, byrow = TRUE)
rownames(mat_UKgas) <- rep(1960:1986, each = 1)
colnames(mat_UKgas) <- c("Q1", "Q2", "Q3", "Q4")
## Create the echarts plot object
e1 <- eArea(mat_UKgas,
title = "UK Quarterly Gas Consumption",
size= c(960,500))
## Save as HTML
print.recharts(e1, file = "index.html")
Raw
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>eAreaID24e52bd12470</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
body {
color: #444444;
font-family: Arial,Helvetica,sans-serif;
font-size: 75%;
}
a {
color: #4D87C7;
text-decoration: none;
}
</style>
</head>
<body>
<!-- jsHeader -->
<script src='http://echarts.baidu.com/doc/example/www/js/esl.js'></script>
<!-- jsHeader -->
<!-- divChart -->
<div id='eAreaID24e52bd12470' style='width:960px; height:500px; ;border:1px solid #ccc;padding:10px;'></div>
<!-- jsChart -->
<script>
require.config({
paths:{
'echarts': 'http://echarts.baidu.com/doc/example/www/js/echarts-map',
'echarts/chart/bar' : 'http://echarts.baidu.com/doc/example/www/js/echarts-map',
'echarts/chart/line': 'http://echarts.baidu.com/doc/example/www/js/echarts-map',
'echarts/chart/scatter': 'http://echarts.baidu.com/doc/example/www/js/echarts-map',
'echarts/chart/k': 'http://echarts.baidu.com/doc/example/www/js/echarts-map',
'echarts/chart/pie': 'http://echarts.baidu.com/doc/example/www/js/echarts-map',
'echarts/chart/map': 'http://echarts.baidu.com/doc/example/www/js/echarts-map',
'echarts/chart/force': 'http://echarts.baidu.com/doc/example/www/js/echarts-map',
'echarts/chart/radar': 'http://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 />
<!-- htmlFooter -->
<span>
<a href="https://github.com/taiyun">Taiyun Wei</a> & <a href="http://yzhou.org/">Yang Zhou</a>
</span></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment