<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8" /> | |
<title>图表选项卡</title> | |
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" /> | |
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> | |
<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | |
<script type="text/javascript" src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> | |
</head> | |
<style type="text/css"> | |
.myTable-container { | |
800px; | |
height: 430px; | |
} | |
</style> | |
<body> | |
<div class="container" style="padding-top: 5%; padding-left: 10%"> | |
<ul id="myTab" class="nav nav-tabs"> | |
<li class="active"><a href="#tab1" data-toggle="tab">月度数据</a></li> | |
<li><a href="#tab2" data-toggle="tab">车间数据</a></li> | |
<li><a href="#tab3" data-toggle="tab">员工数据</a></li> | |
</ul> | |
<div id="myTabContent" class="tab-content"> | |
<div class="tab-pane active" id="tab1"> | |
<div id="tab1-container" class="myTable-container"></div> | |
</div> | |
<div class="tab-pane " id="tab2"> | |
<div id="tab2-container" class="myTable-container"></div> | |
</div> | |
<div class="tab-pane " id="tab3"> | |
<div id="tab3-container" class="myTable-container"></div> | |
</div> | |
</div> | |
</div> | |
<script> | |
var $tab1 = document.getElementById('tab1-container'); | |
var $tab2 = document.getElementById('tab2-container'); | |
var $tab3 = document.getElementById('tab3-container'); | |
/* 折线图 */ | |
var tab1Option = { | |
title : { | |
text : '2019年月度数据图表', | |
subtext : '2019/12/29', | |
x : 'center' | |
}, | |
xAxis : { | |
type : 'category', | |
data : [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] | |
}, | |
yAxis : { | |
type : 'value' | |
}, | |
series : [ { | |
data : [ 820, 932, 901, 934, 1290, 1330, 1320 ], | |
type : 'line' | |
} ] | |
}; | |
/* 饼图 */ | |
var tab2Option = { | |
title : { | |
text : '四个车间数据图表', | |
subtext : '2019/12/29', | |
x : 'center' | |
}, | |
tooltip : { | |
trigger : 'item', | |
formatter : "{a} <br/>{b} : {c} ({d}%)" | |
}, | |
legend : { | |
orient : 'vertical', | |
left : 'left', | |
data : [ '第一车间', '第二车间', '第三车间', '第四车间', '第五车间', '第六车间' ] | |
}, | |
series : [ { | |
name : '车间业绩', | |
type : 'pie', | |
radius : '55%', | |
center : [ '50%', '60%' ], | |
data : [ { | |
value : 335, | |
name : '第一车间' | |
}, { | |
value : 310, | |
name : '第二车间' | |
}, { | |
value : 234, | |
name : '第三车间' | |
}, { | |
value : 135, | |
name : '第四车间' | |
}, { | |
value : 896, | |
name : '第五车间' | |
}, { | |
value : 771, | |
name : '第六车间' | |
} ], | |
itemStyle : { | |
emphasis : { | |
shadowBlur : 10, | |
shadowOffsetX : 0, | |
shadowColor : 'rgba(0, 0, 0, 0.5)' | |
} | |
} | |
} ] | |
}; | |
/* 柱图 */ | |
var tab3Option = { | |
tooltip : { | |
trigger : 'item', | |
formatter : "{a} <br/>{b} : ¥{c} " | |
}, | |
xAxis : { | |
type : 'category', | |
data : [ '孙健', '付丽丽', '李科', '吴明轩', '孙楠', '邢安媛', '莫西宇', '孙楠', '邢安媛', '莫西宇' ] | |
}, | |
yAxis : { | |
type : 'value' | |
}, | |
series : [ { | |
name : '员工数据', | |
data : [ 120, 200, 150, 80, 70, 110, 230.15,400.11,236.56,303.25 ], | |
type : 'bar' | |
} ] | |
}; | |
/* 初始化tab1的 */ | |
var tab1Table = echarts.init($tab1); | |
tab1Table.setOption(tab1Option); | |
/* shown.bs.tab为tab选项卡高亮 */ | |
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) { | |
/* 获取已激活的标签页的名称 */ | |
/* hash 属性是一个可读可写的字符串,该字符串是 URL 从 # 号开始的部分 */ | |
var activeTab = $(e.target)[0].hash; | |
/* 当相应的标签被点击时,进行对应的图表渲染 */ | |
if (activeTab == "#tab2") { | |
/* 释放图表实例,使实例不可用,不加上这个,会报错: */ | |
/* there is a chart instance already initialized on the dom */ | |
echarts.dispose($tab2); | |
var tab2Table = echarts.init($tab2); | |
tab2Table.setOption(tab2Option); | |
} else if (activeTab == "#tab3") { | |
echarts.dispose($tab3); | |
var tab3Table = echarts.init($tab3); | |
tab3Table.setOption(tab3Option); | |
} | |
}); | |
</script> | |
</body> | |
</html> | |
https://www.echartsjs.com/examples/zh/index.html