代码如下：
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div style="font-size:20;margin:30px 80px;color:blue;font-weight:bold;">档案卷数总量：4000000卷 档案分目录数总量：5000000条</div>
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.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" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = '多 Y 轴示例';
var colors = ['#5793f3', '#d14a61', '#675bba'];
option = {
color: colors,
title: {
text: '统计分析示例',
left: '5%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
right: '20%'
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data:['档案卷数增量','档案分目录数增量','档案卷数总量','档案分目录数总量']
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis: [
{
type: 'value',
name: '增量',
min: 0,
max: 1000,
position: 'right',
axisLine: {
lineStyle: {
color: colors[0]
}
},
axisLabel: {
formatter: '{value} '
}
},
/**
{
type: 'value',
name: '档案分目录数增量',
min: 0,
max: 2000,
position: 'right',
offset: 100,
axisLine: {
lineStyle: {
color: colors[1]
}
},
axisLabel: {
formatter: '{value} '
}
},
**/
{
type: 'value',
name: '总量',
min: 0,
max: 15000,
position: 'left',
axisLine: {
lineStyle: {
color: colors[2]
}
},
axisLabel: {
formatter: '{value} '
}
}
],
series: [
{
name:'档案卷数增量',
type:'bar',
data:[20, 49, 70, 232, 256, 767, 135, 162, 326, 200, 64, 33]
},
{
name:'档案分目录数增量',
type:'bar',
data:[40, 59, 78, 252, 276, 797, 155, 182, 386, 260, 74, 53]
},
{
name:'档案卷数总量',
type:'line',
yAxisIndex: 1,
data:[1000, 2000, 3000, 4000, 5000,6000, 7000, 8000, 9000, 10000, 11000, 12000]
},
{
name:'档案分目录数总量',
type:'line',
yAxisIndex: 1,
data:[1050, 2300, 3800, 4010, 5056,6410, 7562, 8871, 9320, 10620, 11652, 12859]
}
]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.imagetable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #999999;
border-collapse: collapse;
}
table.imagetable th {
background:#b5cfd2 url('cell-blue.jpg');
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999999;
}
table.imagetable td {
background:#dcddc0 url('cell-grey.jpg');
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999999;
}
</style>
<!-- Table goes in the document BODY -->
<table align="center" width="1024" class="imagetable">
<tr>
<th>月份</th><th>档案卷数增量</th><th>档案分目录数增量</th><th>档案卷数总量</th><th>档案分目录数总量</th><th>合计</th>
</tr>
<tr>
<td>1</td><td>null</td><td>null</td><td>null</td><td>null</td><td>null</td>
</tr>
<tr>
<td>2</td><td>null</td><td>null</td><td>null</td><td>null</td><td>null</td>
</tr>
<tr>
<td>3</td><td>null</td><td>null</td><td>null</td><td>null</td><td>null</td>
</tr>
<tr>
<td>4</td><td>null</td><td>null</td><td>null</td><td>null</td><td>null</td>
</tr>
<tr>
<td>5</td><td>null</td><td>null</td><td>null</td><td>null</td><td>null</td>
</tr>
<tr>
<td>6</td><td>null</td><td>null</td><td>null</td><td>null</td><td>null</td>
</tr>
<tr>
<td>7</td><td>null</td><td>null</td><td>null</td><td>null</td><td>null</td>
</tr>
<tr>
<td>8</td><td>null</td><td>null</td><td>null</td><td>null</td><td>null</td>
</tr>
<tr>
<td>9</td><td>null</td><td>null</td><td>null</td><td>null</td><td>null</td>
</tr>
<tr>
<td>10</td><td>null</td><td>null</td><td>null</td><td>null</td><td>null</td>
</tr>
<tr>
<td>11</td><td>null</td><td>null</td><td>null</td><td>null</td><td>null</td>
</tr>
<tr>
<td>12</td><td>null</td><td>null</td><td>null</td><td>null</td><td>null</td>
</tr>
</table>
</body>
</html>
本文暂时没有评论，来添加一个吧(●'◡'●)