Skip to content

Instantly share code, notes, and snippets.

@lnlsn

lnlsn/bars-days.html

Created August 15, 2017 23:42
Show Gist options
  • Save lnlsn/26941fc797e6ac79b981381e9b40c38c to your computer and use it in GitHub Desktop.
Save lnlsn/26941fc797e6ac79b981381e9b40c38c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
bars-days.html
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = '堆叠柱状图';
option = {
tooltip : {
trigger: 'axis',
axisPointer : {
type : 'shadow'
}
},
color : ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
legend: {
data:['< 02 Dias','02-05 Dias','05-10 Dias','10-15 Dias','> 15 Dias']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['N1','N2 FC','N2 FI','N2 RH']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'< 02 Dias',
type:'bar',
stack: 'days',
data:[620, 732, 701, 734]
},
{
name:'02-05 Dias',
type:'bar',
stack: 'days',
data:[120, 132, 101, 134]
},
{
name:'05-10 Dias',
type:'bar',
stack: 'days',
data:[60, 72, 71, 74]
},
{
name:'10-15 Dias',
type:'bar',
stack: 'days',
data:[62, 82, 91, 84]
},
{
name:'> 15 Dias',
type:'bar',
stack: 'days',
data:[62, 82, 91, 84]
},
]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment