var nowClientWidth = document.documentElement.clientWidth; // 当前视口宽度
|
var pieVarietyChart = null; // 品种饼状图 -- 粮食
|
var pieTypeChart = null; // 性质饼状图 -- 粮食
|
var pieLevelChart = null; // 等级饼状图 -- 粮食
|
var pieYearChart = null; // 年份饼状图 -- 粮食
|
var pieAreaChart = null; // 区域饼状图 -- 粮食
|
var hisVarietyChart = null; // 品种柱状图
|
var deptAreaAllList = null; // 所有库区列表信息
|
var deptAreaList = null; // 存放切换库区列表信息
|
var companyList = null; // 公司信息
|
var deptCode = null; // 当前闪烁地区的编码
|
var timer1; // 库区定时
|
var index1 = 0; // 库区切换下标
|
var timer2; // 粮食数量定时
|
var index2 = 0; // 粮食数量切换下标
|
var number2 = 2;// 粮食数量切换总数量
|
var timer3; // 储量饼图定时
|
var index3 = 0; // 储量饼图切换下标
|
var number3 = 2;// 储量饼图切换总数量
|
|
var mapChart = null;
|
var geoMap = [{name: '伊犁哈萨克自治州', value: [81.317946, 43.92186]}]; //默认点位
|
var map = chinaMapOutline; //默认加载全国地图
|
$(function () {
|
// 初始化页面
|
init();
|
|
//提醒
|
// showTip("双击页面标语，切换全屏");
|
});
|
|
|
// 初始化页面
|
function init() {
|
// 适应屏幕大小
|
initScrollbar();
|
// 时间
|
initTime();
|
// 初始化图表
|
initChart();
|
|
//初始化地图
|
initMap();
|
|
//加载指定地区地图
|
renderMapPoints("乌鲁木齐市,克拉玛依市,吐鲁番市,哈密市,昌吉回族自治州,博尔塔拉蒙古自治州,巴音郭楞蒙古自治州,阿克苏地区,克孜勒苏柯尔克孜自治州,喀什地区,和田地区,伊犁哈萨克自治州,塔城地区,阿勒泰地区");
|
// 请求库区信息
|
// ajaxDeptArea();
|
// 获取公司信息
|
// ajaxCompany();
|
// 请求粮食数量统计信息
|
// ajaxFoodNum();
|
// 请求获取库区动态信息
|
// ajaxMsg();
|
}
|
|
//加载库区地图位置
|
function renderMap() {
|
var myChart = mapChart;
|
//注入地图边界
|
echarts.registerMap('chinaMapOutline', map);
|
myChart.option.series[1].data = geoMap;
|
myChart.chart.setOption(myChart.option, true);
|
mapChart = myChart;
|
}
|
|
//加载指定地区地图和点位
|
function renderMapPoints(areaName) {
|
if(!areaName){
|
return;
|
}
|
var names = areaName.split(",");
|
if(names.length < 1){
|
return;
|
}
|
|
//根据需要设置某个地区的地图
|
var all = chinaMap.features;
|
map = {
|
"type": "FeatureCollection",
|
"features": []
|
};
|
|
//默认获取省份省会坐标
|
geoMap = [];
|
for (var j = 0; j < names.length; j++) {
|
for (var i = 0; i < all.length; i++) {
|
if(all[i].properties.name == names[j]){
|
map.features.push(all[i]);
|
if(all[i].properties.name == "伊犁哈萨克自治州"){
|
geoMap.push({
|
name: all[i].properties.centerName,
|
value: [all[i].properties.center[0], all[i].properties.center[1], 12]
|
});
|
}
|
renderMap();
|
break;
|
}
|
}
|
}
|
}
|
|
/**
|
* 初始化加载地图
|
* @param areaName 默认全国地图
|
*/
|
function initMap() {
|
var myChart = echarts.init(document.getElementById('map'));
|
|
//注入地图边界
|
echarts.registerMap('chinaMapOutline', map);
|
|
var option = {
|
backgroundColor:'transparent',
|
tooltip: {
|
show: false,
|
trigger: 'item'
|
},
|
geo: {
|
silent: true,
|
map: 'chinaMapOutline',
|
show: false,
|
zoom: 0.8,
|
top: '0%',
|
label: {
|
normal: {
|
show: false,
|
textStyle: {
|
color: '#fff'
|
}
|
},
|
emphasis: {
|
textStyle: {
|
color: '#fff'
|
}
|
}
|
},
|
|
roam: false,
|
itemStyle: {
|
normal: {
|
areaColor: {
|
type: 'linear-gradient',
|
x: 0.5,
|
y: 0.5,
|
r: 0.8,
|
colorStops: [{
|
offset: 0,
|
color: 'rgba(45,68,121,0.15)' // 0% 处的颜色
|
},
|
{
|
offset: 1,
|
color: 'rgba(45,68,121,0.18)' // 100% 处的颜色
|
}
|
],
|
global: true // 缺省为 false
|
},
|
// areaColor: 'transparent',
|
borderColor: '#83BAFF',
|
borderWidth: 1,
|
shadowColor: 'rgba(56,164,255,.26)',
|
opacity: 0.5,
|
shadowOffsetX: 5,
|
shadowOffsetY: 5,
|
shadowBlur: 5,
|
show: true, // 是否显示对应地名
|
textStyle: {
|
//字体颜色
|
color: '#797979'
|
}
|
},
|
emphasis: {
|
color: 'transparent', //悬浮背景
|
textStyle: {
|
color: '#fff'
|
}
|
}
|
}
|
},
|
visualMap: {
|
type: 'piecewise',
|
show: false,
|
textStyle: {
|
color: '#fff'
|
},
|
color: ['#68cc5c']
|
},
|
series: [
|
{
|
map: 'chinaMapOutline',
|
silent: true,
|
type: 'map',
|
zoom: 1,
|
label: {
|
normal: {
|
show: false,
|
textStyle: {
|
color: '#fff'
|
}
|
},
|
emphasis: {
|
textStyle: {
|
color: '#fff'
|
}
|
}
|
},
|
top: '0%',
|
roam: false,
|
itemStyle: {
|
normal: {
|
areaColor: 'rgba(0,255,255,.02)',
|
borderColor: '#02a5f4',
|
borderWidth: 1.5,
|
shadowColor: '#02a5f4',
|
shadowOffsetX: 0,
|
shadowOffsetY: 4,
|
shadowBlur: 10,
|
},
|
emphasis: {
|
areaColor: 'transparent', //悬浮背景
|
textStyle: {
|
color: '#fff'
|
}
|
}
|
}
|
},
|
{
|
type: 'effectScatter',
|
coordinateSystem: 'geo',
|
data: geoMap,
|
symbolSize: function (val) {
|
return val[2];
|
},
|
rippleEffect: {
|
color: '#68cc5c'
|
},
|
showEffectOn: 'render',
|
label: {
|
normal: {
|
show: true,
|
position: 'top',
|
formatter: '{b}',
|
color: '#ffffff',
|
fontSize: nowSize(15)
|
},
|
emphasis: {
|
show: false
|
}
|
},
|
itemStyle: {
|
emphasis: {
|
borderColor: '#fff',
|
borderWidth: 1
|
}
|
}
|
}
|
]
|
};
|
|
myChart.setOption( option );
|
mapChart = {"chart": myChart, "option": option};
|
}
|
|
/**
|
* 获取公司信息
|
*/
|
function ajaxCompany() {
|
$.ajax({
|
type: "POST",
|
url: "../../visual/index-company",
|
dataType: "json",
|
contentType: "application/json;charset=UTF-8",
|
data: JSON.stringify({
|
"companyId": companyId
|
}),
|
success: function (result) {
|
if (result.code == "0000") {
|
companyList = result.data;
|
}
|
}
|
});
|
}
|
|
/**
|
* 请求获取动态信息
|
*/
|
function ajaxMsg() {
|
$.ajax({
|
type: "POST",
|
url: "../../visual/index-info",
|
dataType: "json",
|
contentType: "application/json;charset=UTF-8",
|
data: JSON.stringify({
|
"companyId": companyId
|
}),
|
success: function (result) {
|
if (result.code == "0000") {
|
renderMsg(result.data);
|
}
|
},
|
error: function (error) {
|
|
}
|
});
|
}
|
|
// 更新动态信息
|
function renderMsg(data) {
|
var html = '';
|
var flag = false;
|
var num1 = '';
|
var num7 = '';
|
if (data != null && data.length > 0) {
|
$.each(data, function (index, item) {
|
var deptAreaId = item.deptAreaId;
|
if(item.dailyTotal === 0){
|
num1 = '当日一切正常';
|
}else{
|
num1 = '当日数量'+ item.dailyTotal + '个';
|
}
|
if(item.warnNum7 === 0){
|
num7 = '近七天一切正常';
|
}else{
|
num7 = '近七天数量'+ item.warnNum7 + '个';
|
}
|
html += '<div class="panel-content-body-tr">';
|
if (item.level && item.level === "01") {
|
flag = true;
|
// html += '<img src="../../static/images/visual/l1.png" style="width:10%; height:85%;" alt="">';
|
html += '<span class="body-item sp" style="color: #bc2032;" onclick=\"toAiHome('+'\''+ deptAreaId+'\'' + ')\" >' + item.deptAreaName + '</span>';
|
html += '<span class="body-item sp" style="color: #bc2032;">' + num1 + '</span>';
|
html += '<span class="body-item sp" style="color: #bc2032;">' + num7 + '</span>';
|
// html += '<span class="body-item" style="color: #bc2032; flex: 0.3;">' + item.createTime + '</span>';
|
} else if (item.level && item.level === "02") {
|
flag = true;
|
// html += '<img src="../../static/images/visual/l2.png" style="width:10%; height:85%;" alt="">';
|
html += '<span class="body-item sp" style="color: #f37b3d;" onclick=\"toAiHome('+'\''+ deptAreaId+'\'' + ')\" >' + item.deptAreaName + '</span>';
|
html += '<span class="body-item sp" style="color: #f37b3d;">' + num1+ '</span>';
|
html += '<span class="body-item sp" style="color: #f37b3d;">' + num7 + '</span>';
|
// html += '<span class="body-item" style="color: #f37b3d; flex: 0.3;">' + item.createTime + '</span>';
|
} else if (item.level && item.level === "03"){
|
flag = true;
|
// html += '<img src="../../static/images/visual/l3.png" style="width:10%; height:85%;" alt="">';
|
html += '<span class="body-item sp" onclick=\"toAiHome('+'\''+ deptAreaId+'\'' + ')\" >' + item.deptAreaName + '</span>';
|
html += '<span class="body-item sp">' + num1 + '</span>';
|
html += '<span class="body-item sp">' + num7 + '</span>';
|
// html += '<span class="body-item" style="flex: 0.3;">' + item.createTime + '</span>';
|
}else {
|
flag = true;
|
// html += '<img src="../../static/images/visual/l3.png" style="width:10%; height:85%;" alt="">';
|
html += '<span class="body-item sp" onclick=\"toAiHome('+'\''+ deptAreaId+'\'' + ')\" >' + item.deptAreaName + '</span>';
|
html += '<span class="body-item sp">' + num1 + '</span>';
|
html += '<span class="body-item sp">' + num7 + '</span>';
|
// html += '<span class="body-item" style="flex: 0.3;">' + item.createTime + '</span>';
|
}
|
html += '</div>';
|
})
|
} else {
|
if (deptAreaList != null && deptAreaList.length > 0) {
|
$.each(deptAreaList, function (index, item) {
|
html += '<div class="panel-content-body-tr">';
|
html += '<span class="body-item sp">' + item.name + '</span>';
|
html += '<span class="body-item sp">' + '当日分析一切正常' + '</span>';
|
html += '<span class="body-item" style="flex: 0.3;">' + formatDate('mm/dd', new Date()) + '</span>';
|
html += '</div>';
|
});
|
}
|
}
|
$("#panel-title").html('监管动态信息 <i class="dot"></i>');
|
$("#inventoryInfo").html(html);
|
}
|
|
/**
|
* 跳转至后台预警页面
|
* @param deptAreaId
|
*/
|
function toAiHome(deptAreaId) {
|
var url = "../home?t=WarnInfo&deptAreaId="+deptAreaId;
|
window.parent.open(url, "_self");
|
}
|
|
/**
|
* 请求获取库区相关信息
|
*/
|
function ajaxDeptArea() {
|
// $.ajax({
|
// type: "POST",
|
// url: "../../visual/index-dept-area",
|
// dataType: "json",
|
// contentType: "application/json;charset=UTF-8",
|
// data: JSON.stringify({
|
// "companyId": companyId
|
// }),
|
// success: function (result) {
|
// if (result.code == "0000") {
|
// deptAreaAllList = result.data;
|
// getChangeDeptArea(null);
|
// }
|
// },
|
// error: function (error) {
|
//
|
// }
|
// });
|
|
//加载库区地图
|
geoMap = updateDeptMap();
|
renderMap();
|
}
|
|
function updateDeptMap() {
|
var points = [];
|
$.each(deptList, function(index, item) {
|
var val = [];
|
var name = '';
|
// if(index == deptNum){
|
// name = item.name;
|
// val = [item.lon, item.lat, 17];
|
// }else {
|
val = [item.jd, item.wd, 8];
|
// }
|
points.push({
|
name: name,
|
value: val
|
});
|
});
|
return points;
|
}
|
|
/* ---------- 获取要切换库区的数据信息 ---------- */
|
function getChangeDeptArea(id) {
|
deptAreaList = [];
|
index1 = 0;
|
clearInterval(timer1);
|
|
if (id) {
|
if (id === "511400") {
|
deptAreaList = deptAreaAllList;
|
} else {
|
if (deptAreaAllList != null && deptAreaAllList.length > 0) {
|
$.each(deptAreaAllList, function (index, item) {
|
if (id.length > 6 && id == item.deptCompany) {
|
deptAreaList.push(item);
|
}
|
if (id.length == 6 && id == item.deptCounty) {
|
deptAreaList.push(item);
|
}
|
})
|
}
|
}
|
} else {
|
deptAreaList = deptAreaAllList;
|
}
|
|
deptAreaSwitch();
|
}
|
|
/* ---------- 库区定时切换 ---------- */
|
function deptAreaSwitch() {
|
timer1 = setInterval(function () {
|
if (index1 == deptAreaList.length) {
|
index1 = 0;
|
}
|
|
renderDeptArea();
|
|
index1 += 1;
|
|
}, 3000);
|
}
|
|
// 更新库区信息
|
function renderDeptArea() {
|
|
if (deptAreaList == null || deptAreaList.length <= 0) {
|
return;
|
}
|
|
$("#cityAndCounty").html(deptAreaList[index1].deptCityName + "-" + deptAreaList[index1].deptCountyName);
|
$("#deptAreaName").html(deptAreaList[index1].name);
|
$("#depotNum").html(deptAreaList[index1].depotNum == null ? "0" : deptAreaList[index1].depotNum);
|
$("#depotOilNum").html(deptAreaList[index1].depotOilNum == null ? "0" : deptAreaList[index1].depotOilNum);
|
|
if (deptAreaList[index1].storageStr.length > 9
|
|| deptAreaList[index1].oilStorageStr.length > 9
|
|| deptAreaList[index1].areaStr.length > 9) {
|
$("#foodNum").css("font-size", "28px");
|
$("#oilNum").css("font-size", "28px");
|
$("#area").css("font-size", "28px");
|
} else if(deptAreaList[index1].storageStr.length > 5
|
|| deptAreaList[index1].oilStorageStr.length > 5
|
|| deptAreaList[index1].areaStr.length > 5){
|
$("#foodNum").css("font-size", "30px");
|
$("#oilNum").css("font-size", "30px");
|
$("#area").css("font-size", "30px");
|
} else {
|
$("#foodNum").css("font-size", "46px");
|
$("#oilNum").css("font-size", "46px");
|
$("#area").css("font-size", "46px");
|
}
|
$("#foodNum").html(deptAreaList[index1].storageStr);
|
$("#oilNum").html(deptAreaList[index1].oilStorageStr);
|
$("#area").html(deptAreaList[index1].areaStr);
|
|
if (deptCode) {
|
$("#" + deptCode).removeClass("kuqu-h");
|
}
|
deptCode = deptAreaList[index1].deptCounty;
|
$("#" + deptCode).addClass("kuqu-h");
|
}
|
|
/**
|
* 请求获取相关数量信息
|
*/
|
function ajaxFoodNum() {
|
$.ajax({
|
type: "POST",
|
url: "../../visual/index-food-number",
|
dataType: "json",
|
contentType: "application/json;charset=UTF-8",
|
data: JSON.stringify({
|
"companyId": companyId
|
}),
|
success: function (result) {
|
if (result.code == "0000") {
|
var data = result.data;
|
renderFoodNum(data);
|
}
|
},
|
error: function (error) {
|
|
}
|
});
|
}
|
|
// 更新库区信息
|
function renderFoodNum(data) {
|
|
if (!data) {
|
return;
|
}
|
|
/*----- 监管库点信息 -----*/
|
$("#companyNum").html(data.companyNum);
|
$("#deptAreaNum").html(data.deptAreaNum);
|
$("#depotSum").html(data.depotNum);
|
|
/*----- 监管数量信息 -----*/
|
if (data.foodSum.length > 8 || data.oilSum.length > 8) {
|
$("#foodSum").css("font-size", "32px");
|
$("#oilSum").css("font-size", "32px");
|
}
|
$("#foodSum").html(data.foodSum);
|
$("#oilSum").html(data.oilSum);
|
|
if (data.goodsFoodSum.length > 8 || data.goodsOilSum.length > 8) {
|
$("#goodsFoodSum").css("font-size", "32px");
|
$("#goodsOilSum").css("font-size", "32px");
|
}
|
$("#goodsFoodSum").html(data.goodsFoodSum);
|
$("#goodsOilSum").html(data.goodsOilSum);
|
|
|
/*----- 分品种柱状图 -----*/
|
if (data.xaxis.length > 0 && data.seriesData.length > 0) {
|
var hisFoodVariety = hisVarietyChart;
|
hisFoodVariety.option.xAxis.data = data.xaxis;
|
hisFoodVariety.option.series[0].data = data.seriesData;
|
hisFoodVariety.chart.setOption(hisFoodVariety.option, true);
|
hisVarietyChart = hisFoodVariety;
|
}
|
|
/*----- 饼图 -----*/
|
// 品种 -- 粮食
|
if (data.varietyChartPie.length > 0) {
|
var varietyChart = pieVarietyChart;
|
varietyChart.option.series[0].data = data.varietyChartPie;
|
varietyChart.chart.setOption(varietyChart.option, true);
|
pieVarietyChart = varietyChart;
|
}
|
// 性质 -- 粮食
|
if (data.typeChartPie.length > 0) {
|
var typeChart = pieTypeChart;
|
typeChart.option.series[0].data = data.typeChartPie;
|
typeChart.chart.setOption(typeChart.option, true);
|
pieTypeChart = typeChart;
|
}
|
// 等级 -- 粮食
|
if (data.levelChartPie.length > 0) {
|
var levelChart = pieLevelChart;
|
levelChart.option.series[0].data = data.levelChartPie;
|
levelChart.chart.setOption(levelChart.option, true);
|
pieLevelChart = levelChart;
|
}
|
// 年份 -- 粮食
|
if (data.yearChartPie.length > 0) {
|
var yearChart = pieYearChart;
|
yearChart.option.series[0].data = data.yearChartPie;
|
yearChart.chart.setOption(yearChart.option, true);
|
pieYearChart = yearChart;
|
}
|
// 区域 -- 粮食
|
if (data.areaChartPie.length > 0) {
|
var areaChart = pieAreaChart;
|
areaChart.option.series[0].data = data.areaChartPie;
|
areaChart.chart.setOption(areaChart.option, true);
|
pieAreaChart = areaChart;
|
}
|
|
// 粮食监管数量切换
|
foodNumSwitch();
|
// 粮食饼图切换
|
pieChartSwitch();
|
}
|
|
/* ---------- 粮食数量监管切换 ---------- */
|
function foodNumSwitch() {
|
$(".lb-body .right-topInfo-jg").eq(0).show().siblings().hide();
|
StartLunbo();
|
|
$(".lb-tab").hover(function () {
|
clearInterval(timer2);
|
index2 = $(this).index();
|
ShowPicTab();
|
}, function () {
|
StartLunbo();
|
});
|
|
$(".lb-btn1").click(function () {
|
clearInterval(timer2);
|
index2--;
|
if (index2 == -1) {
|
index2 = number2 - 1;
|
}
|
|
ShowPicTab();
|
StartLunbo();
|
});
|
|
$(".lb-btn2").click(function () {
|
clearInterval(timer2);
|
index2++;
|
if (index2 == number2) {
|
index2 = 0;
|
}
|
ShowPicTab();
|
StartLunbo();
|
});
|
}
|
|
function ShowPicTab() {
|
if (index2 === 0) {
|
$("#foodNumTitle").html("储备粮油");
|
} else if (index2 === 1) {
|
$("#foodNumTitle").html("商品粮油");
|
}
|
// else if (index2 === 2) {
|
// $("#foodNumTitle").html("小包装粮油");
|
// }
|
$(".lb-body .right-topInfo-jg").eq(index2).fadeIn(300).siblings().fadeOut(300);
|
$(".lb-tab").eq(index2).addClass("bg").siblings().removeClass("bg");
|
}
|
|
function StartLunbo() {
|
timer2 = setInterval(function () {
|
index2++;
|
if (index2 >= number2) {
|
index2 = 0;
|
}
|
ShowPicTab();
|
}, 3000);
|
}
|
|
/* ---------- 粮食饼图切换 ---------- */
|
function pieChartSwitch() {
|
$(".tubiao-Carousel .stats-chart-box").eq(0).show().siblings().hide();
|
StartCarousel();
|
|
$(".carousel-tab").hover(function () {
|
clearInterval(timer3);
|
index3 = $(this).index();
|
ShowTubiao();
|
|
}, function () {
|
StartCarousel();
|
});
|
|
$(".carousel-btn1").click(function () {
|
clearInterval(timer3);
|
index3--;
|
if (index3 == -1) {
|
index3 = number3 - 1;
|
}
|
|
ShowTubiao();
|
StartCarousel();
|
});
|
|
$(".carousel-btn2").click(function () {
|
clearInterval(timer3);
|
index3++;
|
if (index3 == number3) {
|
index3 = 0;
|
}
|
ShowTubiao();
|
StartCarousel();
|
});
|
}
|
|
function ShowTubiao() {
|
if (index3 === 0) {
|
$("#pieCharTitle").html("粮食数量统计(吨)");
|
} else if (index3 === 1) {
|
$("#pieCharTitle").html("油脂数量统计(吨)");
|
}
|
$(".tubiao-Carousel .stats-chart-box").eq(index3).fadeIn(300).siblings().fadeOut(300);
|
$(".carousel-tab").eq(index3).addClass("bg").siblings().removeClass("bg");
|
}
|
|
function StartCarousel() {
|
timer3 = setInterval(function () {
|
index3++;
|
if (index3 >= number3) {
|
index3 = 0;
|
}
|
ShowTubiao();
|
}, 3000);
|
}
|
|
// 刷新时间
|
function initTime() {
|
setInterval(function () {
|
$("#navBarDate").html(formatDate('mm月dd日', new Date()));
|
$("#navBarTime").html(formatDate('HH:MM:SS', new Date()));
|
$("#navBarWeek").html(getWeekDate());
|
}, 1000);
|
}
|
|
/**
|
* 初始化屏幕大小
|
*/
|
function initScrollbar() {
|
|
if (pieVarietyChart) {
|
pieVarietyChart.resize();
|
}
|
|
if (pieTypeChart) {
|
pieTypeChart.resize();
|
}
|
|
if (pieLevelChart) {
|
pieLevelChart.resize();
|
}
|
|
if (pieYearChart) {
|
pieYearChart.resize();
|
}
|
|
if (pieAreaChart) {
|
pieAreaChart.resize();
|
}
|
|
if (hisVarietyChart) {
|
hisVarietyChart.resize();
|
}
|
|
setInterval(function () {
|
if (!hasScrollbar()) {
|
document.getElementById('inventoryInfoBox').scrollTop = 0;
|
} else {
|
if (document.getElementById('inventoryInfoBox').scrollTop >= (document.getElementById('inventoryInfo').clientHeight - document.getElementById('inventoryInfoBox').clientHeight)) {
|
document.getElementById('inventoryInfoBox').scrollTop = 0;
|
} else {
|
document.getElementById('inventoryInfoBox').scrollTop++;
|
}
|
}
|
}, 60);
|
}
|
|
/**
|
* 判断底部是否出现滚动条
|
*
|
* @return {boolean}
|
*/
|
function hasScrollbar() {
|
return document.getElementById('inventoryInfo').clientHeight > document.getElementById('inventoryInfoBox').clientHeight;
|
}
|
|
// 初始化图表
|
function initChart() {
|
|
/* 库存图表加载 */
|
allInventoryChartLoad(
|
['小麦', '玉米', '稻谷', '成品粮', '成品油', '其他'],
|
[1000, 1200, 1500, 1300, 1100, 1600]
|
);
|
|
/* 品种 - 粮食 */
|
pieChartLoad(
|
[
|
{value: 0, name: '稻谷'},
|
{value: 0, name: '玉米'},
|
{value: 0, name: '小麦'}
|
],
|
'pieVarietyChart'
|
);
|
/* 性质 - 粮食 */
|
pieChartLoad(
|
[
|
{value: 0, name: '省级储备'},
|
{value: 0, name: '市级储备'},
|
{value: 0, name: '县级储备'}
|
],
|
'pieTypeChart'
|
);
|
/* 等级 - 粮食 */
|
pieChartLoad(
|
[
|
{value: 0, name: '一等'},
|
{value: 0, name: '二等'},
|
{value: 0, name: '三等'},
|
{value: 0, name: '四等'},
|
{value: 0, name: '五等'},
|
{value: 0, name: '等外'}
|
],
|
'pieLevelChart'
|
);
|
/* 年份 - 粮食 */
|
pieChartLoad(
|
[
|
{value: 0, name: '2019'},
|
{value: 0, name: '2020'},
|
{value: 0, name: '2021'},
|
{value: 0, name: '2022'},
|
{value: 0, name: '2023'}
|
|
],
|
'pieYearChart'
|
);
|
/* 地域 - 粮食 */
|
pieChartLoad(
|
[
|
{value: 0, name: '2019'},
|
{value: 0, name: '2020'},
|
{value: 0, name: '2021'},
|
{value: 0, name: '2022'},
|
{value: 0, name: '2023'}
|
], 'pieAreaChart'
|
);
|
}
|
|
/**
|
* 柱状图加载
|
*
|
* @param names
|
* @param data
|
*/
|
function allInventoryChartLoad(names, data) {
|
var dom = document.getElementById('allInventoryChart');
|
var myChart = echarts.init(dom);
|
|
var options = {
|
grid: {
|
left: '2%',
|
right: '1%',
|
bottom: '1%',
|
top: '15%',
|
containLabel: true
|
},
|
tooltip: {
|
show: true,
|
},
|
xAxis: {
|
type: 'category',
|
// 网格样式
|
splitLine: {
|
show: false,
|
},
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: "#39c9ff"
|
}
|
},
|
axisTick: {
|
show: false,
|
},
|
axisLabel: {
|
textStyle: {
|
color: '#ffffff',
|
fontSize: nowSize(16),
|
},
|
interval: 0,
|
margin: nowSize(15),
|
},
|
data: names,
|
},
|
yAxis: {
|
type: 'value',
|
// 网格样式
|
splitLine: {
|
show: false,
|
},
|
axisLine: {
|
show: false,
|
},
|
axisTick: {
|
show: false,
|
},
|
axisLabel: {
|
show: false,
|
},
|
},
|
series: [{
|
name: '',
|
data: data,
|
type: 'bar',
|
barWidth: '40%',
|
label: {
|
show: true,
|
position: 'top',
|
color: '#ffffff',
|
fontSize: nowSize(12),
|
distance: 0,
|
lineHeight: nowSize(25),
|
},
|
// showBackground: false,
|
// backgroundStyle: {
|
// color: 'rgba(16,52,94,0.41)',
|
// },
|
itemStyle: {
|
normal: {
|
color: function (params) {
|
var colorList = [
|
new echarts.graphic.LinearGradient(
|
0, 1, 0, 0,
|
[{offset: 0, color: '#ff5600'}, {offset: 1, color: '#f27f44'}]
|
),
|
new echarts.graphic.LinearGradient(
|
0, 1, 0, 0,
|
[{offset: 0, color: '#ffb335'}, {offset: 1, color: '#ffcc77'}]
|
),
|
new echarts.graphic.LinearGradient(
|
0, 1, 0, 0,
|
[{offset: 0, color: '#08e53e'}, {offset: 1, color: '#59ff81'}]
|
),
|
new echarts.graphic.LinearGradient(
|
0, 1, 0, 0,
|
[{offset: 0, color: '#02a5f4'}, {offset: 1, color: '#60cbff'}]
|
),
|
new echarts.graphic.LinearGradient(
|
0, 1, 0, 0,
|
[{offset: 0, color: '#0a43bc'}, {offset: 1, color: '#3571f0'}]
|
),
|
new echarts.graphic.LinearGradient(
|
0, 1, 0, 0,
|
[{offset: 0, color: '#af1f2e'}, {offset: 1, color: '#ef3476'}]
|
)
|
];
|
|
return colorList[params.dataIndex]
|
}
|
}
|
}
|
}]
|
};
|
myChart.setOption(options);
|
hisVarietyChart = {"chart": myChart, "option": options};
|
}
|
|
/**
|
* 饼图加载
|
*
|
* @param obj
|
* @param id
|
*/
|
function pieChartLoad(data, id) {
|
var dom = document.getElementById(id);
|
var pieChart = echarts.init(dom);
|
|
var option = {
|
tooltip: {
|
trigger: 'item'
|
},
|
legend: {
|
bottom: 10,
|
right: 10,
|
left: 10,
|
textStyle: {
|
color: '#fff',
|
fontSize: 12
|
},
|
itemWidth: 8,
|
itemHeight: 8,
|
icon: "circle",
|
// 使用回调函数
|
formatter:function(name) {
|
|
var than = option.series[0].data;
|
var total = 0;
|
var tarValue;
|
for (var i = 0, l = than.length; i < l; i++) {
|
total += Number(than[i].value);
|
if (than[i].name == name) {
|
tarValue = Number(than[i].value);
|
}
|
}
|
var p = 0.0;
|
if(total > 0){
|
p = (tarValue / total) * 100;
|
}
|
return name + " " + " " + p.toFixed(2) + "%";
|
}
|
},
|
|
color: ['#26a2cf', '#d36b37', '#d49327', '#2d6be9', '#36b994', '#bc2032', '#d3614f'],
|
series: [
|
{
|
name: '',
|
type: 'pie',
|
radius: ['20%', '50%'],
|
center: ['center', '30%'],
|
avoidLabelOverlap: false,
|
itemStyle: {
|
borderRadius: 10,
|
borderColor: '#041636',
|
borderWidth: 8,
|
},
|
label: {
|
show: false,
|
color: '#fff',
|
formatter: '{b}\n{d}%',
|
fontSize: nowSize(16),
|
lineHeight: nowSize(25),
|
},
|
labelLine: {
|
show: true,
|
lineStyle: {
|
cap: 'round',
|
}
|
},
|
data: data
|
}
|
]
|
};
|
|
pieChart.setOption(option);
|
|
if (id === 'pieVarietyChart') {
|
pieVarietyChart = {"chart": pieChart, "option": option};
|
} else if (id === 'pieTypeChart') {
|
pieTypeChart = {"chart": pieChart, "option": option};
|
} else if (id === 'pieLevelChart') {
|
pieLevelChart = {"chart": pieChart, "option": option};
|
} else if (id === 'pieYearChart') {
|
pieYearChart = {"chart": pieChart, "option": option};
|
} else if (id === 'pieAreaChart') {
|
pieAreaChart = {"chart": pieChart, "option": option};
|
}
|
}
|
|
/**
|
* 换算方法
|
*
|
* @param val
|
* @param initWidth
|
* @return {number}
|
*/
|
nowSize = function (val) {
|
var initWidth = 1920;
|
return val * (nowClientWidth / initWidth);
|
};
|
|
/**
|
* 格式化日期
|
*
|
* @param fmt
|
* @param date
|
* @return {*}
|
*/
|
function formatDate(fmt, date) {
|
var ret;
|
var opt = {
|
"Y+": date.getFullYear().toString(), // 年
|
"m+": (date.getMonth() + 1).toString(), // 月
|
"d+": date.getDate().toString(), // 日
|
"H+": date.getHours().toString(), // 时
|
"M+": date.getMinutes().toString(), // 分
|
"S+": date.getSeconds().toString() // 秒
|
// 有其他格式化字符需求可以继续添加，必须转化成字符串
|
};
|
for (var k in opt) {
|
ret = new RegExp("(" + k + ")").exec(fmt);
|
if (ret) {
|
fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
|
}
|
}
|
return fmt;
|
}
|
|
/**
|
* 获取当前星期几
|
*/
|
function getWeekDate() {
|
var now = new Date();
|
var day = now.getDay();
|
var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
|
var week = weeks[day];
|
return week;
|
}
|
|
// 右下角提醒信息
|
function showTip(msg) {
|
layer.open({
|
// type: 1,
|
btn: null,
|
title: "提示",
|
skin: 'layui-layer-lan',
|
content: msg,
|
// offset: 'rb',
|
offset: 'rt',
|
time: 1500,
|
area: ['250px', '120px'],
|
anim: 1,
|
// shade: false,
|
shadeClose: true
|
});
|
}
|
