fixed:echartsResize
bobi
parent
3adb25bfce
commit
c027756ae2
|
|
@ -1,8 +1,6 @@
|
|||
"use strict";
|
||||
var useModel = ["okUtils", "table", "laytpl", "laydate", "element", "countUp", "echartsData", "okMock"];
|
||||
layui.config({
|
||||
base: "../js/"
|
||||
}).use(useModel, function () {
|
||||
var useModel = ["okUtils", "table", "laytpl", "laydate", "element", "countUp", "okMock"];
|
||||
layui.use(useModel, function () {
|
||||
var countUp = layui.countUp;
|
||||
var table = layui.table;
|
||||
var okUtils = layui.okUtils;
|
||||
|
|
@ -74,9 +72,9 @@ layui.config({
|
|||
* 用户访问
|
||||
*/
|
||||
function userSource() {
|
||||
var mapTree = echarts.init($("#mapOne")[0], "mytheme");
|
||||
okUtils.echartsResize(userSourceOption);
|
||||
mapTree.setOption(userSourceOption);
|
||||
var userSourceMap = echarts.init($("#userSourceMap")[0], "mytheme");
|
||||
userSourceMap.setOption(userSourceOption);
|
||||
okUtils.echartsResize(userSourceMap);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -106,29 +104,58 @@ layui.config({
|
|||
return {
|
||||
"code": res.code,
|
||||
"count": res.data.count,
|
||||
"data": res.data.list //解析数据列表
|
||||
"data": res.data.list
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var userLocationOption = {
|
||||
"title": {"text": "用户家庭所在地统计", "subtext": "", "x": "center"},
|
||||
"tooltip": {"trigger": "item"},
|
||||
"visualMap": {
|
||||
"color": ["#eeeeee"], "show": false, "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}
|
||||
]
|
||||
},
|
||||
"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"}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
/**
|
||||
* 用户位置
|
||||
*/
|
||||
function userLocation() {
|
||||
var userLocationMap = echarts.init($("#userLocationMap")[0]);
|
||||
var 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}];
|
||||
userLocationOption.series.data = data;
|
||||
userLocationMap.setOption(userLocationOption);
|
||||
okUtils.echartsResize(userLocationMap);
|
||||
}
|
||||
|
||||
statText();
|
||||
userSource();
|
||||
userList();
|
||||
|
||||
/**静态数据**/
|
||||
var echartsData = layui.echartsData;
|
||||
init();
|
||||
|
||||
function init() {
|
||||
// var mapTree = echarts.init($("#mapOne")[0], "mytheme");
|
||||
// okUtils.echartsResize([mapTree, mapChina]);
|
||||
// mapTree.setOption(echartsData.mapTree);//数据图
|
||||
|
||||
var mapChina = echarts.init($('#mapChina')[0]);
|
||||
echartsData.mapChina.series[0].data = echartsData.Address;//地图数据
|
||||
mapChina.setOption(echartsData.mapChina);//地图
|
||||
}
|
||||
userLocation();
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,36 +1,33 @@
|
|||
"use strict";
|
||||
layui.define(["layer"], function(exprots) {
|
||||
var $ = layui.jquery;
|
||||
var okUtils = {
|
||||
layui.define(["layer"], function (exprots) {
|
||||
var $ = layui.jquery;
|
||||
var okUtils = {
|
||||
/**
|
||||
* 是否前后端分离
|
||||
*/
|
||||
isFrontendBackendSeparate: false,
|
||||
isFrontendBackendSeparate: false,
|
||||
/**
|
||||
* 服务器地址
|
||||
*/
|
||||
baseUrl: "http://localhost:8080",
|
||||
/**
|
||||
* 获取body的总宽度
|
||||
*/
|
||||
getBodyWidth: function() {
|
||||
return document.body.scrollWidth;
|
||||
},
|
||||
/**
|
||||
* 主要用于对echart视图自动适应宽度
|
||||
*/
|
||||
echartsResize: function(elemnt) {
|
||||
elemnt = elemnt || [];
|
||||
window.addEventListener("resize", function() {
|
||||
var isResize = localStorage.getItem("isResize");
|
||||
if (isResize != 'false') {
|
||||
for (var i = 0; i < elemnt.length; i++) {
|
||||
elemnt[i].resize();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
/**
|
||||
* 获取body的总宽度
|
||||
*/
|
||||
getBodyWidth: function () {
|
||||
return document.body.scrollWidth;
|
||||
},
|
||||
/**
|
||||
* 主要用于对ECharts视图自动适应宽度
|
||||
*/
|
||||
echartsResize: function (element) {
|
||||
window.addEventListener("resize", function () {
|
||||
var isResize = localStorage.getItem("isResize");
|
||||
if (isResize == "false") {
|
||||
element.resize();
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* ajax()函数二次封装
|
||||
* @param url
|
||||
* @param type
|
||||
|
|
@ -99,6 +96,6 @@ layui.define(["layer"], function(exprots) {
|
|||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
exprots("okUtils", okUtils);
|
||||
};
|
||||
exprots("okUtils", okUtils);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@
|
|||
<div class="layui-col-md8">
|
||||
<div class="layui-card">
|
||||
<div class="yskj-card-body map-body">
|
||||
<div style="height: 100%;" id="mapOne"></div>
|
||||
<div style="height: 100%;" id="userSourceMap"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -156,7 +156,7 @@
|
|||
<div class="layui-col-md6">
|
||||
<div class="layui-card">
|
||||
<div class="yskj-card-body clearfix">
|
||||
<div class="map-china" id="mapChina"></div>
|
||||
<div class="map-china" id="userLocationMap"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue