|
|
[!--temp.common_file--]
|
|
|
[!--temp.header--]
|
|
|
<!-- banner区域 -->
|
|
|
<div class="banner" style="background-image: url(<?=ReturnClassAddField(0,'banner')?>)"></div>
|
|
|
<!-- 二级导航 -->
|
|
|
|
|
|
<div class="menubox">
|
|
|
<div class="container clearfix">
|
|
|
<div class="menusub">
|
|
|
[showclasstemp]2,12,0,0[/showclasstemp]
|
|
|
</div>
|
|
|
<div class="newsnav">[!--newsnav--]</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mainWrapper">
|
|
|
<div class="container">
|
|
|
<div class="columnname">
|
|
|
<span><?=ReturnClassAddField(0,'enwords')?></span>
|
|
|
<h1>[!--class.name--]</h1>
|
|
|
</div>
|
|
|
<!--Step:2 为ECharts准备一个具备大小（宽高）的Dom-->
|
|
|
<div id="mainMap">
|
|
|
|
|
|
</div>
|
|
|
<span id="wrong-message" style="color:red;display:none;">当前选择：江苏 </span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script src="/skin/default/js/echarts.min.js" type="text/javascript"></script>
|
|
|
<script src="/skin/default/js/china.js" type="text/javascript"></script>
|
|
|
<script src="/skin/default/js/common.js" type="text/javascript"></script>
|
|
|
<script type="text/javascript">
|
|
|
//状态的颜色枚举
|
|
|
var colorArr = {
|
|
|
"1": "#bee8fd",
|
|
|
"2": "#67abfc",
|
|
|
"3": "#136acb",
|
|
|
"4": "#0641a2"
|
|
|
}
|
|
|
//状态的值的枚举
|
|
|
var statusArr = {
|
|
|
"1": "待投档",
|
|
|
"2": "录取中",
|
|
|
"3": "录取结束",
|
|
|
"4": "已邮寄通知书"
|
|
|
}
|
|
|
|
|
|
//地图的配置参数
|
|
|
var optionMap = {
|
|
|
backgroundColor: '#FFFFFF',
|
|
|
title: {},
|
|
|
tooltip: {
|
|
|
trigger: 'item',
|
|
|
formatter: function(val) {
|
|
|
console.log(val)
|
|
|
// return "省份:" + val.name + "<br>当前进度: " + statusArr[val.data.itemStyle.status]; //
|
|
|
},
|
|
|
},
|
|
|
//配置属性
|
|
|
series: [{
|
|
|
name: '中国',
|
|
|
type: 'map',
|
|
|
mapType: 'china',
|
|
|
roam： false
|
|
|
zoom: 1.25,
|
|
|
label: {
|
|
|
normal: {
|
|
|
show: true, //省份名称
|
|
|
textStyle: {
|
|
|
fontSize: 15,
|
|
|
color: '#999'
|
|
|
}
|
|
|
},
|
|
|
|
|
|
emphasis: {
|
|
|
show: false
|
|
|
}
|
|
|
}, //左侧小导航图标
|
|
|
visualMap: {
|
|
|
min: 0,
|
|
|
max: 10000,
|
|
|
show: true,
|
|
|
x: 'left',
|
|
|
y: 'center',
|
|
|
pieces: [{
|
|
|
gt: 200,
|
|
|
label: "> 200 人",
|
|
|
color: "#f61b14"
|
|
|
}, {
|
|
|
gte: 100,
|
|
|
lte: 200,
|
|
|
label: "100 - 200 人",
|
|
|
color: "#ffa31b"
|
|
|
}, {
|
|
|
gte: 0,
|
|
|
lte: 100,
|
|
|
label: "1 - 100 人",
|
|
|
color: "#2fff1d"
|
|
|
}]
|
|
|
},
|
|
|
// 地图的样式
|
|
|
normal: {
|
|
|
borderColor: "#FFFFFF", // 省份边框颜色
|
|
|
areaColor: {
|
|
|
type: "linear",
|
|
|
x: 0,
|
|
|
y: 1,
|
|
|
x2: 0,
|
|
|
y2: 0,
|
|
|
colorStops: [{
|
|
|
offset: 0,
|
|
|
color: "rgb(93,170,242)", // 100% 处的颜色
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
color: "rgb(2,128,241)", // 0% 处的颜色
|
|
|
|
|
|
},
|
|
|
],
|
|
|
global: false, // 缺省为 false
|
|
|
},
|
|
|
borderWidth: 1, // 省份边框宽度
|
|
|
shadowColor: "rgba(255,255,255,0.5)", // 省份边框阴影
|
|
|
shadowBlur: 5, // 省份边框聚焦
|
|
|
},
|
|
|
emphasis: {
|
|
|
// 鼠标hover显示
|
|
|
show: false,
|
|
|
//areaColor: "#0D30D4",
|
|
|
areaColor: {
|
|
|
type: "linear",
|
|
|
x: 1,
|
|
|
y: 0,
|
|
|
x2: 0,
|
|
|
y2: 0,
|
|
|
colorStops: [{
|
|
|
offset: 0,
|
|
|
color: "rgb(243,135,36)", // 0% 处的颜色
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
color: "rgb(218,172,113)", // 100% 处的颜色
|
|
|
},
|
|
|
],
|
|
|
global: false, // 缺省为 false
|
|
|
},
|
|
|
color: "#fff"
|
|
|
},
|
|
|
},
|
|
|
data: [] //数据
|
|
|
}]
|
|
|
};
|
|
|
|
|
|
|
|
|
//初始化echarts实例
|
|
|
var myChart = echarts.init(document.getElementById('mainMap'));
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
comm.get("/api/progress", function(res) {
|
|
|
|
|
|
let arr = [];
|
|
|
for (var mod of res) {
|
|
|
arr.push({
|
|
|
name: mod.province.name,
|
|
|
itemStyle: {
|
|
|
areaColor: colorArr[mod.status_id],
|
|
|
status: mod.status_id
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
optionMap.series[0].data = arr;
|
|
|
console.log(optionMap)
|
|
|
//使用制定的配置项和数据显示图表
|
|
|
myChart.setOption(optionMap);
|
|
|
})
|
|
|
</script>
|
|
|
[!--temp.footer--] |
