214 lines
7.1 KiB
HTML
214 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>中国地图</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
<meta name="renderer" content="webkit">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="format-detection" content="telephone=no">
|
|
<script type="text/javascript" src="../../lib/loading/okLoading.js"></script>
|
|
<link rel="stylesheet" href="../../css/common.css"/>
|
|
<link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all"/>
|
|
<script type="text/javascript" src="../../lib/echarts/echarts.min.js"></script>
|
|
<script type="text/javascript" src="../../lib/echarts/world/js/china.js"></script>
|
|
<style type="text/css">
|
|
.map {
|
|
padding: 20px;
|
|
height: 350px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="childrenBody ok-body-scroll">
|
|
<div class="layui-row layui-col-space15">
|
|
<div class="layui-col-md6">
|
|
<div class="layui-card">
|
|
<div class="map" id="chinaChart1"></div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md6">
|
|
<div class="layui-card">
|
|
<div class="map" id="chinaChart2"></div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md6">
|
|
<div class="layui-card">
|
|
<div class="map" id="chinaChart3"></div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md6">
|
|
<div class="layui-card">
|
|
<div class="map" id="chinaChart4"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
<script type="text/javascript" src="../../lib/layui/layui.js"></script>
|
|
<script type="text/javascript">
|
|
layui.use(["okUtils"], function () {
|
|
let $ = layui.jquery;
|
|
let okUtils = layui.okUtils;
|
|
okLoading.close();
|
|
let data = [{"name": "北京", "value": 100}, {"name": "天津", "value": 83}, {"name": "上海", "value": 113}, {
|
|
"name": "重庆",
|
|
"value": 188
|
|
}, {"name": "河北", "value": 197}, {"name": "河南", "value": 327}, {"name": "云南", "value": 371}, {
|
|
"name": "辽宁",
|
|
"value": 224
|
|
}, {"name": "黑龙江", "value": 295}, {"name": "湖南", "value": 463}, {"name": "安徽", "value": 7}, {
|
|
"name": "山东",
|
|
"value": 176
|
|
}, {"name": "新疆", "value": 0}, {"name": "江苏", "value": 396}, {"name": "浙江", "value": 472}, {
|
|
"name": "江西",
|
|
"value": 243
|
|
}, {"name": "湖北", "value": 226}, {"name": "广西", "value": 404}, {"name": "甘肃", "value": 210}, {
|
|
"name": "山西",
|
|
"value": 451
|
|
}, {"name": "内蒙古", "value": 97}, {"name": "陕西", "value": 369}, {"name": "吉林", "value": 221}, {
|
|
"name": "福建",
|
|
"value": 216
|
|
}, {"name": "贵州", "value": 221}, {"name": "广东", "value": 85}, {"name": "青海", "value": 21}, {
|
|
"name": "西藏",
|
|
"value": 414
|
|
}, {"name": "四川", "value": 380}, {"name": "宁夏", "value": 205}, {"name": "海南", "value": 73}, {
|
|
"name": "台湾",
|
|
"value": 348
|
|
}, {"name": "香港", "value": 54}, {"name": "澳门", "value": 340}];
|
|
let chinaChartOption = {
|
|
"title": {"text": "用户家庭所在地统计", "subtext": "", "x": "center"},
|
|
"tooltip": {"trigger": "item"},
|
|
"visualMap": {
|
|
"show": true,
|
|
"min": 0,
|
|
"max": 1,
|
|
"left": 10,
|
|
"top": "center",
|
|
"orient": "vertical",
|
|
"text": ["高", "低"],
|
|
"realtime": false,
|
|
"calculable": true,
|
|
"inRange": {"color": ["#E0FFFF", "#BEEFEC", "#6cd2d2", "#6CC8C1",]}
|
|
},
|
|
"series": [
|
|
{
|
|
"name": "用户家庭所在地统计",
|
|
"roam": true,
|
|
"type": "map",
|
|
"mapType": "china",
|
|
"data": [],
|
|
"itemStyle": {
|
|
"normal": {"areaColor": "#eeeeee", "borderColor": "#aaaaaa", "borderWidth": 0.5},
|
|
"emphasis": {"areaColor": "rgba(63,177,227,0.25)", "borderColor": "#3fb1e3", "borderWidth": 1}
|
|
},
|
|
"label": {"normal": {"textStyle": {"color": "#000"}}, "emphasis": {"textStyle": {"color": "#000"}}}
|
|
}
|
|
]
|
|
};
|
|
|
|
/**
|
|
* 图表1
|
|
*/
|
|
function chinaChart1() {
|
|
// 获取最大值
|
|
let max = 1;
|
|
for (let i = 0; i < data.length; i++) {
|
|
if (data[i].value > max) {
|
|
max = data[i].value;
|
|
}
|
|
}
|
|
chinaChartOption.visualMap.max = max;
|
|
// 数据源
|
|
chinaChartOption.series[0].data = data;
|
|
// 初始化图表
|
|
let chinaChart1 = echarts.init($('#chinaChart1')[0]);
|
|
chinaChart1.setOption(chinaChartOption);
|
|
okUtils.echartsResize([chinaChart1]);
|
|
}
|
|
|
|
/**
|
|
* 图表2
|
|
*/
|
|
function chinaChart2() {
|
|
chinaChartOption.visualMap.show = false;
|
|
let chinaChart2 = echarts.init($('#chinaChart2')[0]);
|
|
chinaChart2.setOption(chinaChartOption);
|
|
okUtils.echartsResize([chinaChart2]);
|
|
}
|
|
|
|
function randomData() {
|
|
return Math.round(Math.random() * 500);
|
|
}
|
|
|
|
let data2 = [
|
|
{name: '北京', value: '100'}, {name: '天津', value: randomData()},
|
|
{name: '上海', value: randomData()}, {name: '重庆', value: randomData()},
|
|
{name: '河北', value: randomData()}, {name: '河南', value: randomData()},
|
|
{name: '云南', value: randomData()}, {name: '辽宁', value: randomData()},
|
|
{name: '黑龙江', value: randomData()}, {name: '湖南', value: randomData()},
|
|
{name: '安徽', value: randomData()}, {name: '山东', value: randomData()},
|
|
{name: '新疆', value: randomData()}, {name: '江苏', value: randomData()},
|
|
{name: '浙江', value: randomData()}, {name: '江西', value: randomData()},
|
|
{name: '湖北', value: randomData()}, {name: '广西', value: randomData()},
|
|
{name: '甘肃', value: randomData()}, {name: '山西', value: randomData()},
|
|
{name: '内蒙古', value: randomData()}, {name: '陕西', value: randomData()},
|
|
{name: '吉林', value: randomData()}, {name: '福建', value: randomData()},
|
|
{name: '贵州', value: randomData()}, {name: '广东', value: randomData()},
|
|
{name: '青海', value: randomData()}, {name: '西藏', value: randomData()},
|
|
{name: '四川', value: randomData()}, {name: '宁夏', value: randomData()},
|
|
{name: '海南', value: randomData()}, {name: '台湾', value: randomData()},
|
|
{name: '香港', value: randomData()}, {name: '澳门', value: randomData()}
|
|
];
|
|
|
|
let chinaChartOption2 = {
|
|
backgroundColor: '#FFFFFF',
|
|
title: {text: '全国地图大数据', subtext: '', x: 'center'},
|
|
tooltip: {trigger: 'item'},
|
|
visualMap: {
|
|
show: true,
|
|
x: 'left',
|
|
y: 'center',
|
|
splitList: [{start: 500, end: 600}, {start: 400, end: 500}, {start: 300, end: 400}, {
|
|
start: 200,
|
|
end: 300
|
|
}, {start: 100, end: 200}, {start: 0, end: 100},],
|
|
color: ['#5475f5', '#9feaa5', '#85daef', '#74e2ca', '#e6ac53', '#9fb5ea']
|
|
},
|
|
series: [{
|
|
name: '数据统计',
|
|
type: 'map',
|
|
mapType: 'china',
|
|
roam: false,
|
|
label: {normal: {show: true}, emphasis: {show: false}},
|
|
data: data2
|
|
}]
|
|
};
|
|
|
|
/**
|
|
* 图表3
|
|
*/
|
|
function chinaChart3() {
|
|
let chinaChart3 = echarts.init($('#chinaChart3')[0]);
|
|
chinaChart3.setOption(chinaChartOption2);
|
|
okUtils.echartsResize([chinaChart3]);
|
|
}
|
|
|
|
/**
|
|
* 图表4
|
|
*/
|
|
function chinaChart4() {
|
|
chinaChartOption2.visualMap.show = false;
|
|
let chinaChart4 = echarts.init($('#chinaChart4')[0]);
|
|
chinaChart4.setOption(chinaChartOption2);
|
|
okUtils.echartsResize([chinaChart4]);
|
|
}
|
|
|
|
chinaChart1();
|
|
chinaChart2();
|
|
chinaChart3();
|
|
chinaChart4();
|
|
});
|
|
</script>
|