刘翔宇-旅管家 3 years ago
parent 5515c7290b
commit 2cbaa39e97

@ -0,0 +1,180 @@
[!--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--]
Loading…
Cancel
Save