107 lines
2.3 KiB
HTML
107 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="GB2312">
|
||
<title>ECharts</title>
|
||
<!-- 引入 echarts.js -->
|
||
<script src="echarts/echarts.min.js"></script>
|
||
<style>
|
||
html,body {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
.content {
|
||
width: 800px;
|
||
height: 400px;
|
||
margin: 0 auto; /*水平居中*/
|
||
|
||
|
||
|
||
}
|
||
</style>
|
||
|
||
</head>
|
||
<body>
|
||
|
||
<div id="main" class="content"></div>
|
||
|
||
|
||
<script type="text/javascript">
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('main'));
|
||
|
||
option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
crossStyle: {
|
||
color: '#999'
|
||
}
|
||
}
|
||
},
|
||
toolbox: {
|
||
feature: {
|
||
dataView: {show: true, readOnly: false},
|
||
magicType: {show: true, type: ['line', 'bar']},
|
||
restore: {show: true},
|
||
saveAsImage: {show: true}
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['已体检', '未体检']
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '体检人数',
|
||
min: 0,
|
||
max: 1000,
|
||
interval: 100,
|
||
axisLabel: {
|
||
formatter: '{value} 人'
|
||
}
|
||
},
|
||
{
|
||
type: 'value',
|
||
name: '体检人数',
|
||
min: 0,
|
||
max: 1000,
|
||
interval: 100,
|
||
axisLabel: {
|
||
formatter: '{value} 人'
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '已体检',
|
||
type: 'bar',
|
||
data: [320, 450, 480, 550, 580, 611, 650, 655, 800, 835, 900, 920]
|
||
},
|
||
{
|
||
name: '未体检',
|
||
type: 'bar',
|
||
data: [100, 89, 250, 120, 223, 285, 54, 100, 325, 220, 150, 130]
|
||
}
|
||
]
|
||
};
|
||
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
|
||
</script>
|
||
</body>
|
||
</html> |