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: [87.617733, 43.792818]}]; //默认点位
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]);
                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
    });
}