279 lines
5.2 KiB
HTML
279 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title></title>
|
|
<style type="text/css">
|
|
table.gridtable {
|
|
font-family: verdana, arial, sans-serif;
|
|
font-size: 11px;
|
|
color: #333333;
|
|
border-width: 1px;
|
|
border-color: #666666;
|
|
border-collapse: collapse;
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
margin-top: 10px !important;
|
|
}
|
|
|
|
table.gridtable th {
|
|
border-width: 1px;
|
|
padding: 8px;
|
|
border-style: solid;
|
|
border-color: #666666;
|
|
background-color: #dedede;
|
|
}
|
|
|
|
table.gridtable td {
|
|
border-width: 1px;
|
|
padding: 8px;
|
|
border-style: solid;
|
|
border-color: #666666;
|
|
background-color: #ffffff;
|
|
}
|
|
</style>
|
|
<script src="js/echarts.js" type="text/javascript" charset="utf-8"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="chartArea" id="data7" style="height:350px;width: 1200px;margin: 0 auto;"></div>
|
|
<!-- Table goes in the document BODY -->
|
|
<table class="gridtable">
|
|
<tr>
|
|
<th>行政区</th>
|
|
<th>用人单位总数(率)</th>
|
|
<th>已填报百分比</th>
|
|
<th>已填报单位</th>
|
|
<th>未填报单位</th>
|
|
</tr>
|
|
<tr>
|
|
<td>二屯镇</td>
|
|
<td>50%</td>
|
|
<td>20%</td>
|
|
<td>80</td>
|
|
<td>80</td>
|
|
</tr>
|
|
<tr>
|
|
<td>赵虎镇</td>
|
|
<td>83%</td>
|
|
<td>80%</td>
|
|
<td>78</td>
|
|
<td>30</td>
|
|
</tr>
|
|
<tr>
|
|
<td>新华街道</td>
|
|
<td>59%</td>
|
|
<td>80%</td>
|
|
<td>180</td>
|
|
<td>20</td>
|
|
</tr>
|
|
</table>
|
|
<script type="text/javascript">
|
|
var return_data = {
|
|
"二屯镇": [785],
|
|
"黄河涯镇": [744],
|
|
"赵虎镇": [720],
|
|
"抬头寺镇": [700],
|
|
"袁桥镇": [680],
|
|
"新湖街道": [653],
|
|
"新华街道": [642],
|
|
"天衢街道": [580],
|
|
"运河街道": [530],
|
|
"广川街道": [510],
|
|
"长河街道": [485],
|
|
"宋官屯街道": [365]
|
|
|
|
};
|
|
var nameData = [];
|
|
var valueData = [];
|
|
var valueData2 = [];
|
|
var sum = 0,
|
|
sum1 = 0;
|
|
for (let k in return_data) {
|
|
nameData.push(k);
|
|
valueData.push(return_data[k][0]);
|
|
valueData2.push(return_data[k][1]);
|
|
sum = sum + return_data[k][0];
|
|
sum1 = sum1 + return_data[k][1];
|
|
}
|
|
// $('#sum').append("(注册数量：" + sum +",发证数量：" + sum1+")");
|
|
var myChart = echarts.init(document.getElementById('data7'));
|
|
var colorList = [
|
|
'#ff2600',
|
|
'#ffc000',
|
|
'#00ad4e',
|
|
'#0073c2',
|
|
'#165868',
|
|
'#e76f00',
|
|
'#316194',
|
|
'#723761',
|
|
'#00b2f1',
|
|
'#4d6022',
|
|
'#4b83bf',
|
|
'#f9c813',
|
|
'#0176c0',
|
|
'#D7504B', '#C6E579', '#F4E001'
|
|
];
|
|
var option = {
|
|
|
|
tooltip: {
|
|
show: true,
|
|
trigger: 'item',
|
|
formatter: "{c}"
|
|
},
|
|
toolbox: {
|
|
show: true,
|
|
feature: {
|
|
mark: {
|
|
show: true
|
|
},
|
|
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '2%',
|
|
right: '2%',
|
|
bottom: '3%',
|
|
height: '85%',
|
|
width: '95%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
axisLine: {
|
|
lineStyle: {
|
|
type: 'solid',
|
|
color: '#666', //左边线的颜色
|
|
width: '1' //坐标线的宽度
|
|
}
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
rotate: 40,
|
|
show: true,
|
|
splitNumber: 15,
|
|
color: "#666",
|
|
textStyle: {
|
|
//fontFamily: "微软雅黑",
|
|
fontSize: 12,
|
|
},
|
|
|
|
},
|
|
|
|
data: nameData,
|
|
|
|
axisTick: {
|
|
|
|
alignWithLabel: true
|
|
}
|
|
}],
|
|
yAxis: [{
|
|
type: 'value',
|
|
name: '',
|
|
splitLine: { //分割线
|
|
show: true,
|
|
// color:"#fff",
|
|
lineStyle: {
|
|
color: '#28316d'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
rotate: 0,
|
|
show: true,
|
|
splitNumber: 30,
|
|
color: "#666",
|
|
textStyle: {
|
|
//fontFamily: "微软雅黑",
|
|
fontSize: 12,
|
|
}
|
|
},
|
|
|
|
},
|
|
|
|
],
|
|
series: [{
|
|
name: '老年人60-80岁数量',
|
|
type: 'bar',
|
|
barWidth: 15, //柱图宽度
|
|
data: valueData,
|
|
itemStyle: {
|
|
normal: {
|
|
color: function(params) {
|
|
// build a color map as your need.
|
|
var colorList = [
|
|
'#ff2600',
|
|
'#ffc000',
|
|
'#00ad4e',
|
|
'#0073c2',
|
|
'#165868',
|
|
'#e76f00',
|
|
'#316194',
|
|
'#723761',
|
|
'#00b2f1',
|
|
'#4d6022',
|
|
'#4b83bf',
|
|
'#f9c813',
|
|
'#0176c0',
|
|
'#D7504B', '#C6E579', '#F4E001'
|
|
];
|
|
return colorList[params.dataIndex]
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
formatter: '{c}'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: '老年人80岁以上数量',
|
|
type: 'bar',
|
|
barWidth: 15, //柱图宽度
|
|
data: valueData2,
|
|
itemStyle: {
|
|
normal: {
|
|
color: function(params) {
|
|
// build a color map as your need.
|
|
var colorList = [
|
|
'#ff2600',
|
|
'#ffc000',
|
|
'#00ad4e',
|
|
'#0073c2',
|
|
'#165868',
|
|
'#e76f00',
|
|
'#316194',
|
|
'#723761',
|
|
'#00b2f1',
|
|
'#4d6022',
|
|
'#4b83bf',
|
|
'#f9c813',
|
|
'#0176c0',
|
|
'#D7504B', '#C6E579', '#F4E001'
|
|
];
|
|
return colorList[params.dataIndex]
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
formatter: '{c}'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
myChart.setOption(option);
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|