del:抽离js
bobi
parent
bb8dd0ad92
commit
689a41f7f9
|
|
@ -24,30 +24,22 @@
|
|||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-card">
|
||||
<div class="yskj-card-body clearfix cart-data">
|
||||
<div class="map" id="china1"></div>
|
||||
</div>
|
||||
<div class="map" id="chinaChart1"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-card">
|
||||
<div class="yskj-card-body clearfix cart-data">
|
||||
<div class="map" id="china2"></div>
|
||||
</div>
|
||||
<div class="map" id="chinaChart2"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-card">
|
||||
<div class="yskj-card-body clearfix cart-data">
|
||||
<div class="map" id="china3"></div>
|
||||
</div>
|
||||
<div class="map" id="chinaChart3"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-card">
|
||||
<div class="yskj-card-body clearfix cart-data">
|
||||
<div class="map" id="china4"></div>
|
||||
</div>
|
||||
<div class="map" id="chinaChart4"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -55,64 +47,104 @@
|
|||
</html>
|
||||
<script type="text/javascript" src="../../lib/layui/layui.js"></script>
|
||||
<script type="text/javascript">
|
||||
function clone(origin) {
|
||||
return JSON.parse(JSON.stringify(origin))
|
||||
}
|
||||
layui.use(["okUtils"], function () {
|
||||
let $ = layui.jquery;
|
||||
let okUtils = layui.okUtils;
|
||||
|
||||
layui.config({
|
||||
base: "../../js/"
|
||||
}).use(["jquery", "okUtils", "mapTest", "echartsData"], function () {
|
||||
var $ = layui.jquery,
|
||||
okUtils = layui.okUtils,
|
||||
echartsData = layui.echartsData;
|
||||
var data = echartsData.Address;//地图数据
|
||||
var chinaData = echartsData.mapChina2;
|
||||
var max = 1;//最高的数据
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
if (data[i].value > max) {
|
||||
max = data[i].value;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
chinaData.visualMap.max = max;
|
||||
chinaData.series[0].data = data;
|
||||
|
||||
china1();
|
||||
china2();
|
||||
china3();
|
||||
china4();
|
||||
|
||||
function china1() {
|
||||
let chinaTemp = JSON.parse(JSON.stringify(chinaData));
|
||||
let china1 = echarts.init($('#china1')[0]);
|
||||
china1.setOption(chinaTemp);
|
||||
okUtils.echartsResize([china1]);
|
||||
chinaChartOption.visualMap.max = max;
|
||||
// 数据源
|
||||
chinaChartOption.series[0].data = data;
|
||||
// 初始化图表
|
||||
let chinaChart1 = echarts.init($('#chinaChart1')[0]);
|
||||
chinaChart1.setOption(chinaChartOption);
|
||||
okUtils.echartsResize([chinaChart1]);
|
||||
}
|
||||
|
||||
function china2() {
|
||||
let chinaTemp = JSON.parse(JSON.stringify(chinaData));
|
||||
chinaTemp.visualMap.show = false;//不显示数据条
|
||||
let china1 = echarts.init($('#china2')[0]);
|
||||
china1.setOption(chinaTemp);
|
||||
okUtils.echartsResize([china1]);
|
||||
/**
|
||||
* 图表2
|
||||
*/
|
||||
function chinaChart2() {
|
||||
chinaChartOption.visualMap.show = false;
|
||||
let chinaChart2 = echarts.init($('#chinaChart2')[0]);
|
||||
chinaChart2.setOption(chinaChartOption);
|
||||
okUtils.echartsResize([chinaChart2]);
|
||||
}
|
||||
|
||||
function china3() {
|
||||
let chinaTemp = echartsData.mapChina3;
|
||||
let china1 = echarts.init($('#china3')[0]);
|
||||
china1.setOption(chinaTemp);
|
||||
okUtils.echartsResize([china1]);
|
||||
function randomData() {
|
||||
return Math.round(Math.random() * 500);
|
||||
}
|
||||
|
||||
function china4() {
|
||||
let chinaTemp = JSON.parse(JSON.stringify(echartsData.mapChina3));
|
||||
chinaTemp.visualMap.show = false;//不显示数据条
|
||||
let china1 = echarts.init($('#china4')[0]);
|
||||
china1.setOption(chinaTemp);
|
||||
okUtils.echartsResize([china1]);
|
||||
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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue