supply-chain-web/views/priceScreen/index.js

var host = 'http://192.168.1.222:8081';
//图表对象定义
(function (win) {
    win.myEcharts = function (id, option) {
        var _this = this;
        _this.mapJsonUrl = typeof (option) == 'undefined' ? '' : option.mapJsonUrl || ''; //地图包数据接口
        _this.dataJsonUrl = typeof (option) == 'undefined' ? '' : option.dataJsonUrl || ''; //用户数据接口
        _this.elem = document.getElementById(id);
        _this.mapName = 'china';
        _this.xAxisData = [];
        _this.yAxisData = [];
        _this.option = {
            //鼠标经过提示
            tooltip: {
                trigger: 'axis'
            },
            //图表位置,坐标系类型，grid直角坐标
            grid: {
                top: '21%',
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: true,
                data: _this.xAxisData,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#609dbd"
                    },
                    interval: 0,
                    // rotate: 40
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#609dbd"
                    },
                    formatter: '{value}'
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                }
            },
        };
        for (var t in option) {
            _this.option[t] = option[t];
        }
        _this.show();
        win.myEcharts.prototype.resizeObj.push(_this);
    }
    /**
     * 所有对象集合
     */
    win.myEcharts.prototype.resizeObj = [];
    /**
     * 设置AJAX数据地图,并更新显示
     */
    win.myEcharts.prototype.setMap = function (id) {
        var _this = this;
        $.ajax({
            url: _this.mapJsonUrl,
            datatype: "JSON",
            success: function (res) {
                echarts.registerMap(_this.mapName, res);
                _this.show();
            }
        });
        return _this;
    }
    /**
     * 清除并设置容器元素图表
     */
    win.myEcharts.prototype.dispose = function () {
        var _this = this;
        echarts.dispose(_this.elem);
        _this.myChart = echarts.init(_this.elem);
        return _this;
    }
    /**
     * 显示渲染图表
     */
    win.myEcharts.prototype.show = function (option, tool) {
        var _this = this;
        _this.dispose();
        if ((option || _this.option) && typeof ((option || _this.option)) === "object") {
            _this.myChart.setOption((option || _this.option), true);
        }
        //自动轮播tooltip
        if (tool) {
            var index = 0; //播放所在下标
            clearInterval(mTime);
            _this.myChart.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: 0
            });
            var mTime = setInterval(function () {
                _this.myChart.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                });
                _this.myChart.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0,
                    dataIndex: index + 1
                });
                index++;
                if (index > option.series[0].data.length - 1) {
                    index = 0;
                    _this.myChart.dispatchAction({
                        type: 'showTip',
                        seriesIndex: 0,
                        dataIndex: 0
                    });
                }
            }, 15 * 1000);
        }
        return _this;
    }
    /**
     * 重绘图表
     */
    win.myEcharts.prototype.resize = function () {
        var _this = this;
        _this.myChart.resize();
        return _this;
    };
    /**
     * 更新dataJsonUrl
     */
    win.myEcharts.prototype.setDataUrl = function (url) {
        var _this = this;
        if (url) {
            _this.dataJsonUrl = url;
        }
        return _this;
    }
    /**
     * 配置图表类型
     */
    win.myEcharts.prototype.setTable = function (setData) {
        var _this = this;
        $.ajax({
            url: _this.dataJsonUrl,
            datatype: "JSON",
            success: function (res) {
                if (setData) {
                    _this.temp = setData;
                    _this.temp(res);
                    return;
                }
                try {
                    _this.option.xAxis.data = res.name;
                    if (res.type) {
                        for (var xc in _this.option.series) {
                            _this.option.series[xc].data = res.data[xc];
                        }
                    } else {
                        _this.option.series[0].data = res.data;
                    }
                    _this.show();
                } catch (e) {
                    //TODO handle the exception
                }
            }
        });
        return _this;
    }
    /**
     * 更新配置地图数据
     */
    win.myEcharts.prototype.setMapData = function (setData, id) {
        var _this = this;
        $.ajax({
            url: _this.dataJsonUrl,
            datatype: "JSON",
            success: function (res) {
                if (setData) {
                    _this.temp = setData;
                    _this.temp(res);
                    return;
                }
                try {
                    if (type) {
                        _this.option.series[0].data = res;
                    } else {
                        for (var i in _this.option.series[0].data) {
                            _this.option.series[0].data[i].value = res.data[i];
                        };
                    }

                } catch (e) {

                }
            }
        });
        _this.show();
        return _this;
    }
})(window);

//图表置入对象实例
(function (win) {

    //左上角数据读取 价格监控统计
    (function leftTop() {
        $.ajax({
            url: host + '/main/monitorTheStatistical',
            type: 'get',
            success: function (res) {
                if (res.retHead.errCode == 0) {
                    let resData = res.retBody;
                    var html = "";
                    for (var i = 0; i < resData.length; i++) {
                        html += '<li><h4 class="name">' + resData[i].type + '</h4><div class="number"><ul class="number-list"></ul><span class="unit">' + resData[i].unit + '</span></div></li>'
                    }
                    $('.left-top').html(html);

                    for (let j = 0; j < resData.length; j++) {
                        this['num' + j] = '';
                        let totalNUm = resData[j].number.toString();
                        for (let z in totalNUm) {
                            this['num' + j] += '<li>' + totalNUm[z] + '</li>'
                        }
                        $("#left-top .number-list").eq(j).html(this['num' + j]);
                    }
                }
            }
        });
    })();

    //左下角滚动
    (function leftBotTable(e, type) {
        $.ajax({
            url: host + '/main/wholesaleMarketToday?isLimit=false',
            type: 'get',
            success: function (res) {
                if (res.retHead.errCode == 0) {
                    let resData = res.retBody;
                    let cts = '-'
                    var html = "";
                    for (var i in resData) {
                        let str = resData[i].amplitude.indexOf(cts) != -1 ? "fall-number" : "rise-number";
                        html += '<li class="ui-flex table-row"><span>' + resData[i].productName + '</span><span>' + resData[i].price + '</span><span class="number ' + str + '"><b class="num">' + resData[i].amplitude + '</b><b class="arrow"></b></span></li>'
                    }
                    $('#left-bot-table').html(html);
                }
                if (type) {
                    //启用滚动
                    $('.left-bot-table').myScroll({
                        speed: 40, //数值越大，速度越慢
                        rowHeight: 40 //li的高度
                    });
                }
            }
        });
    })(1, true);

    function zhidong(e) {
        let ld = $("#priceIndex li").length - 1,
            riseFallData = [],
            productData = [];
        let ul = $("#priceIndex li").width() * (ld + 1),
            box = $(".productBox").width(),
            li = parseInt(box / 110);
        if (e > ld) {
            e = 0;
        }
        if (e < li - 1) {
            $("#priceIndex").css('margin-left', '0px');
        } else if (e >= li - 1 && e <= ld) {
            $("#priceIndex").css('margin-left', -110 * (e - (li - 1)) + 'px');
        } else if (e > ld) {
            $("#priceIndex").css('margin-left', (ul - box) + 'px');
        }
        let id = $($("#priceIndex li")[e]).attr('id');
        $.ajax({
            url: host + "/main/chartOfUpsAndDowns?id=" + id,
            type: "get",
            success: function (res) {
                if (res.retHead.errCode == 0) {
                    let resData = res.retBody;
                    if (resData) {
                        for (let j = 0; j < resData.length; j++) {
                            riseFallData.push(resData[j].amplitude)
                            productData.push(resData[j].productName)
                        }
                        chartObj1.option.xAxis.data = productData;
                        chartObj1.option.series[0].data = riseFallData;
                        chartObj1.show();
                    } else {
                        chartObj1.option.xAxis.data = [];
                        chartObj1.option.series[0].data = [];
                        chartObj1.show();
                    }
                }
            }
        });
        $($("#priceIndex li")[e]).addClass('active');
        setTimeout(function () {
            $($("#priceIndex li")[e]).removeClass('active');
            zhidong(++e);
        }, 15 * 1000);
    };

    //左中折线图
    $.ajax({
        url: host + '/main/kindOfUpsAndDowns',
        success: function (res) {
            let resData = res.retBody;
            let html = "";
            let cts = '-'
            for (let i = 0; i < resData.length; i++) {
                let str = resData[i].amplitude.indexOf(cts) != -1 ? "fall-arrow" : "rise-arrow";
                if (resData[i].amplitude == '-') {
                    html += '<li id="' + resData[i].id + '"><div><h4 class="number">' + resData[i].amplitude + '</h4><p class="name">' + resData[i].type.substring(0, 5) + '</p></div></li>'
                } else {
                    html += '<li id="' + resData[i].id + '"><div><h4 class="number">' + resData[i].amplitude + '<span class="arrow ' + str + '"></span></h4><p class="name">' + resData[i].type.substring(0, 5) + '</p></div></li>'
                }
            }
            $('#priceIndex').html(html);
            $($("#priceIndex li")[0]).addClass('active');
        }
    });

    var chartObj1 = new myEcharts('riseFallChart', {
        //dataJsonUrl: "json/middle/bar.json",
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line',
            },
            formatter: function (params) {
                var res = '<div><p>' + params[0].name + '</p></div>'
                for (var i = 0; i < params.length; i++) {
                    if (params[i].data >= 0) {
                        res += '<p>涨价:' + params[i].data + '</p>'
                    } else {
                        res += '<p>跌价:' + params[i].data + '</p>'
                    }
                }
                return res;
            }
        },
        grid: {
            top: '20%',
            right: '5%',
            left: '12%',
            bottom: '38%',
        },
        xAxis: {
            type: 'category',
            axisLine: {
                lineStyle: {
                    color: '#0c3563',
                    width: 1
                }
            },
            axisTick: {
                alignWithLabel: true
            },
            splitLine: {
                show: false,
            },
            axisLabel: {
                color: "#609dbd",
                interval: 0
            },
            data: []
        },
        series: [{
            name: '涨价',
            type: 'bar',
            stack: '总量',
            barWidth: 8,
            itemStyle: {
                normal: {
                    barBorderRadius: 50,
                    color: function (params) {
                        var colorList;
                        if (params.data >= 0) {
                            colorList = new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [{
                                        offset: 0,
                                        color: '#e21166'
                                    },
                                    {
                                        offset: 0.6,
                                        color: '#700779'
                                    }
                                ]
                            )
                        } else {
                            colorList = new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [{
                                        offset: 0,
                                        color: '#0264af'
                                    },
                                    {
                                        offset: 1,
                                        color: '#0aeef5'
                                    }
                                ]
                            )
                        }
                        return colorList;
                    },
                }
            },
            label: {
                show: true,
                position: 'top',
                textStyle: {
                    color: '#c9e8f9',
                    fontSize: 13
                }
            },
        }]
    }).setTable(function (res) {
        zhidong(0);
    });

    //地图
    var chartObj2 = new myEcharts('mapChart', {
        mapJsonUrl: "js/china.json",
        //dataJsonUrl: host + "/main/findById"
    });
    chartObj2.option = {
        tooltip: {
            trigger: 'item',
            formatter: function (data) {
                if (!isNaN(data.value)) {
                    return data.name + "：" + data.value;
                }
            }
        },
        visualMap: {
            min: 0,
            max: 10,
            itemWidth: 15,
            itemHeight: 80,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'],
            textStyle: {
                color: '#fff',
                left: 20
            },
            calculable: true,
            textGap: 10,
            left: '15%',
            inRange: {
                color: ['#0693ff', '#0aeef5', '#e21166', ]
            },
        },
        series: [{
            name: '价格',
            type: 'map',
            mapType: 'china',
            zoom: 1.2,
            roam: false,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true,
                    color: '#fff'
                }
            },
            itemStyle: {
                normal: {
                    areaColor: '#103d7e',
                    borderColor: '#03204a',
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                    shadowBlur: 5,
                    shadowOffsetX: 1,
                    shadowOffsetY: 1
                },
                emphasis: {
                    areaColor: '#0693ff'
                }
            }
        }]
    };

    $.ajax({
        url: host + "/collect/product/monitorProducts?isLimit=false",
        type: "get",
        success: function (res) {
            if (res.retHead.errCode == 0) {
                console.log('地图', res)
                var resData = res.retBody.list;
                var html = "";
                for (let i = 0; i < resData.length; i++) {
                    html += '<li id="' + resData[i].id + '"><h4 class="name">' + resData[i].name.substring(0, 5) + '</h4></li>'
                }
                $('#mapIndex').html(html);
                chartObj2.setMap().setMapData(function (res) {
                    mapRoll(0);

                }, res.retBody.id);
            } else {
                layer.msg(res.retHead.errMsg)
            }
        }
    });

    function mapRoll(e) {
        let ld = $("#mapIndex li").length - 1,
            mapData = [];
        if (e > ld) {
            e = 0;
        }
        let ul = $("#mapIndex li").width() * (ld + 1);
        let box = $(".mapIndexBox").width();
        if (e < 4) {
            $("#mapIndex").css('margin-left', '0px');
        } else if (e >= 4 && e <= ld) {
            $("#mapIndex").css('margin-left', -95 * (e - 2) + 'px');
        } else if (e > ld) {
            $("#mapIndex").css('margin-left', (ul - box) + 'px');
        }
        let id = $($("#mapIndex li")[e]).attr('id');
        $.ajax({
            url: host + "/main/findById?id=" + id,
            type: "get",
            success: function (res) {
                if (res.retHead.errCode == 0) {
                    let resMap = res.retBody;
                    if (resMap) {
                        for (let j = 0; j < resMap.provinces.length; j++) {
                            mapData[j] = {
                                name: resMap.provinces[j].name,
                                value: resMap.provinces[j].price
                            }
                        }
                        $($("#avgPrice li")).find('.nationalAvg').text(resMap.nationalAvg || '-');
                        $($("#avgPrice li")).find('.provinceAvg').text(resMap.provinceAvg || '-');
                        chartObj2.option.series[0].data = mapData;
                        chartObj2.show();
                    } else {
                        $($("#avgPrice li")).find('.nationalAvg').text('-');
                        $($("#avgPrice li")).find('.provinceAvg').text('-');
                        chartObj2.option.series[0].data = [];
                        chartObj2.show();
                    }
                }
            }
        });

        $.ajax({
            url: host + "/main/salesAndPriceDistribution?id=" + id,
            type: "get",
            success: function (res) {
                if (res.retHead.errCode == 0) {
                    let resData = res.retBody;
                    if (resData) {
                        let saleData = [],
                            priceData = [],
                            dateData = [];
                        for (let i = 0; i < resData.length; i++) {
                            saleData.push(resData[i].sales)
                            priceData.push(resData[i].price)
                            dateData.push(resData[i].day)
                        }
                        chartObj3.option.xAxis.data = dateData;
                        chartObj3.option.series[0].data = saleData;
                        chartObj3.option.series[1].data = priceData;
                        chartObj3.show();
                    } else {
                        chartObj3.option.series[0].data = [];
                        chartObj3.show();
                    }
                }
            }
        });

        $.ajax({
            url: host + "/main/trendPrediction?id=" + id,
            type: "get",
            success: function (res) {
                if (res.retHead.errCode == 0) {
                    let resData = res.retBody;
                    if (resData) {
                        let maxData = [],
                            minData = [],
                            dateData = [],
                            avgData = [];
                        for (let i = 0; i < resData.length; i++) {
                            maxData.push(resData[i].maxPrice)
                            minData.push(resData[i].minPrice)
                            dateData.push(resData[i].day)
                            avgData.push((resData[i].maxPrice - resData[i].minPrice).toFixed(2))
                        }
                        console.log('差值', avgData)
                        chartObj4.option.xAxis.data = dateData;
                        chartObj4.option.series[0].data = maxData;
                        chartObj4.option.series[1].data = minData;
                        chartObj4.option.series[2].data = avgData;
                        chartObj4.show();
                    } else {
                        chartObj4.option.series[0].data = [];
                        chartObj4.option.series[1].data = [];
                        chartObj4.show();
                    }
                }
            }
        });

        $($("#mapIndex li")[e]).addClass('active');
        setTimeout(function () {
            $($("#mapIndex li")[e]).removeClass('active');
            mapRoll(++e);
        }, 15 * 1000);
    }


    //中左下方表
    var chartObj3 = new myEcharts('priceLineChart', {
        //dataJsonUrl: host + '/main/salesAndPriceDistribution',
        tooltip: {
            trigger: 'axis'
        },
        yAxis: [{
                type: 'value',
                name: '数量',
                splitNumber: 4,
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                nameTextStyle: {
                    color: '#609dbd'
                },
                axisLabel: {
                    color: "#609dbd"
                }
            },
            {
                type: 'value',
                name: '元',
                splitNumber: 4,
                position: 'right',
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                nameTextStyle: {
                    color: '#609dbd',
                    align: 'right',
                },
                axisLabel: {
                    color: "#609dbd"
                }
            }
        ],
        series: [{
                name: '销量',
                type: 'bar',
                barWidth: 8,
                itemStyle: {
                    normal: {
                        color: function (params) {
                            var colorList;
                            colorList = new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [{
                                        offset: 0,
                                        color: '#0aeef5'
                                    },
                                    {
                                        offset: 1,
                                        color: '#0264af'
                                    }
                                ]
                            )
                            return colorList;
                        },
                        barBorderRadius: 50,
                    }
                },
                data: [200, 210, 220, 210, 230, 290, 310],
            },
            {
                name: '价格',
                type: 'line',
                yAxisIndex: 1,
                smooth: true,
                showSymbol: false,
                itemStyle: {
                    normal: {
                        color: '#e21166',
                        lineStyle: {
                            width: 1
                        }
                    }
                },
                data: [97, 110, 110, 70, 121, 132, 109],
            }
        ]
    }).setTable(function (res) {
    });

    //中右下方表
    var chartObj4 = new myEcharts('axisBarChart', {
        //dataJsonUrl: "json/middle/line.json",
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                var res = '<div><p>' + params[0].name + '</p></div>'
                for (var i = 0; i < params.length - 1; i++) {
                    res += '<p>' + params[i].seriesName + ':' + params[i].data + '</p>'
                }
                return res;
            }
        },
        grid: {
            top: '15%',
            left: '6%',
            right: '2%',
            bottom: '6%',
            containLabel: true
        },
        yAxis: {
            type: 'value',
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                color: "#609dbd"
            },
        },
        series: [{
                name: '最高',
                // stack: '总量',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                showSymbol: false,
                lineWidth: 1,
                itemStyle: {
                    normal: {
                        color: 'rgb(6, 147, 255)',
                        lineStyle: {
                            width: 1
                        }
                    }
                },
                data: [220, 182, 191, 134, 250, 120, 110, 125, 145, 122, 165, 122]
            },
            {
                name: '最低',
                stack: '总量',
                type: 'line',
                smooth: true,
                showSymbol: false,
                lineWidth: 1,
                itemStyle: {
                    normal: {
                        color: 'rgb(226, 17, 102)',
                        lineStyle: {
                            width: 1
                        }
                    },
                },
                data: [120, 110, 125, 145, 122, 165, 122, 220, 282, 191, 134, 150]
            },
            {
                name: '差距',
                stack: '总量',
                type: 'line',
                smooth: true,
                showSymbol: false,
                lineStyle: {
                    normal: {
                        type: 'dashed',
                        color: 'rgba(0,0,0,0)'
                    }
                },
                areaStyle: {
                    normal: {
                        color: 'rgba(6, 147, 255,0.2)',
                        shadowColor: 'rgba(0, 0, 0, 0.1)',
                        shadowBlur: 10
                    }
                },
                data: [220, 182, 191, 134, 250, 120, 110, 125, 145, 122, 165, 122]
            }
        ]
    }).setTable(function (res) {
    });

    //右上方表
    var chartObj5 = new myEcharts('poarChart', {
        dataJsonUrl: host + "/main/sourceDistribution",
        tooltip: {
            trigger: 'axis',
            transitionDuration: 1,
            axisPointer: {
                type: 'line'
            }
        },
        xAxis: {
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            }
        },
        yAxis: [{
            type: 'value',
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            }
        }],
        angleAxis: {
            type: 'category',
            data: ['修文县', '黔东南', '黔西南', '遵义市', '毕节市', '贵阳市', '兴义市'],
            z: 10,
            axisLine: {
                lineStyle: {
                    color: '#0c3563',
                }
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: '#0c3563',
                }
            },
            axisLabel: { //刻度标签设置
                textStyle: {
                    color: '#c9e8f9'
                },
                interval: 0,
            }
        },
        radiusAxis: {
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#0c3563',
                }
            },
            splitNumber: 4, // 坐标轴的分割段数
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(76,99,111,0.1)'
                }
            }
        },
        polar: {},
        series: [{
            type: 'bar',
            data: [8, 2, 3, 4, 3, 5, 1],
            coordinateSystem: 'polar',
            name: '来源量',
            stack: 'a',
            itemStyle: {
                normal: {
                    color: function (params) {
                        // console.log(params.dataIndex)
                        let colorList = [
                            new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [{
                                        offset: 0,
                                        color: '#e21166'
                                    },
                                    {
                                        offset: 0.6,
                                        color: '#700779'
                                    }
                                ]
                            ),
                            new echarts.graphic.LinearGradient(
                                0, 1, 0, 0,
                                [{
                                        offset: 0,
                                        color: '#0264af'
                                    },
                                    {
                                        offset: 1,
                                        color: '#0aeef5'
                                    }
                                ]
                            ),
                        ];
                        if ((params.dataIndex) % 2 == 0) {
                            currentItem = 1
                            return colorList[0]
                        } else {
                            currentItem = 0
                            return colorList[1]
                        }

                    }
                },
            },
        }]
    }).setTable(function (res) {
        let resData = res.retBody;
        let city = [],
            numberData = []
        for (let i = 0; i < resData.length; i++) {
            city.push(resData[i].source.substring(0, 5))
            numberData.push(resData[i].number)
        }
        this.option.angleAxis.data = city;
        this.option.series[0].data = numberData;
        this.show(this.option, true);
    });

    //右中滚动
    (function rightMiddleTable(e, type) {
        $.ajax({
            url: host + '/main/monthlyWholesaleVolumeRanking',
            type: 'get',
            success: function (res) {
                let resData = res.retBody;
                let html = "";
                for (var i in resData) {
                    if (i == 0) {
                        html += '<li class="ui-flex table-row one"><span class="index"><b>' + resData[i].rank + '</b></span><span>' + resData[i].mark + '</span><span>' + resData[i].number + '</span></li>'
                    } else if (i == 1) {
                        html += '<li class="ui-flex table-row two"><span class="index"><b>' + resData[i].rank + '</b></span><span>' + resData[i].mark + '</span><span>' + resData[i].number + '</span></li>'
                    } else if (i == 2) {
                        html += '<li class="ui-flex table-row three"><span class="index"><b>' + resData[i].rank + '</b></span><span>' + resData[i].mark + '</span><span>' + resData[i].number + '</span></li>'
                    } else {
                        html += '<li class="ui-flex table-row"><span class="index"><b>' + resData[i].rank + '</b></span><span>' + resData[i].mark + '</span><span>' + resData[i].number + '</span></li>'
                    }
                }
                $('#right-middle-table').html(html);
                // if (type) {
                //     //启用滚动
                //     $('.right-middle-table').myScroll({
                //         speed: 40, //数值越大，速度越慢
                //         rowHeight: 40 //li的高度
                //     });
                // }
            }
        });
    })(1, true);

    //右下角滚动
    (function rightBotTable(e, type) {
        $.ajax({
            url: host + '/main/productWholesaleVolumeRanking',
            success: function (res) {
                let resData = res.retBody;
                let html = "";
                for (var i in resData) {
                    if (i == 0) {
                        html += '<li class="ui-flex table-row one"><span class="index"><b>' + resData[i].rank + '</b></span><span>' + resData[i].productName + '</span><span>' + resData[i].wholesaleQuantity + '</span></li>'
                    } else if (i == 1) {
                        html += '<li class="ui-flex table-row two"><span class="index"><b>' + resData[i].rank + '</b></span><span>' + resData[i].productName + '</span><span>' + resData[i].wholesaleQuantity + '</span></li>'
                    } else if (i == 2) {
                        html += '<li class="ui-flex table-row three"><span class="index"><b>' + resData[i].rank + '</b></span><span>' + resData[i].productName + '</span><span>' + resData[i].wholesaleQuantity + '</span></li>'
                    } else {
                        html += '<li class="ui-flex table-row"><span class="index"><b>' + resData[i].rank + '</b></span><span>' + resData[i].productName + '</span><span>' + resData[i].wholesaleQuantity + '</span></li>'
                    }
                }
                $('#right-bot-table').html(html);
                // if (type) {
                //     //启用滚动
                //     $('.right-bot-table').myScroll({
                //         speed: 40, //数值越大，速度越慢
                //         rowHeight: 40 //li的高度
                //     });
                // }
            }
        });
    })(1, true);

    //窗口变化，重绘图表
    win.addEventListener("resize", function () {
        chartObj1.resize();
        chartObj2.setMap().setMapData();
        chartObj3.resize();
        chartObj4.resize();
        chartObj5.resize();
    });

    //全屏
    (function (css) {
        var runPrefixMethod = function (element, method) {
            var usablePrefixMethod;
            ["webkit", "moz", "ms", "o", ""].forEach(function (prefix) {
                if (usablePrefixMethod) return;
                if (prefix === "") {
                    // 无前缀，方法首字母小写
                    method = method.slice(0, 1).toLowerCase() + method.slice(1);
                }
                var typePrefixMethod = typeof element[prefix + method];

                if (typePrefixMethod + "" !== "undefined") {
                    if (typePrefixMethod === "function") {
                        usablePrefixMethod = element[prefix + method]();
                    } else {
                        usablePrefixMethod = element[prefix + method];
                    }
                }
            });

            return usablePrefixMethod;
        };
        if (typeof screenX === "number") {
            if (window.top != window.self) {
                try {
                    let elem = parent.document.getElementsByTagName('iframe');
                    for (let i = 0; i < elem.length; i++) {
                        elem[i].setAttribute('allowFullScreen', true); //添加内联框架全屏属性
                    }
                } catch (e) {

                }
            }
            let full = document.querySelector(css);
            full.addEventListener("click", function () {
                if (runPrefixMethod(document, "FullScreen") || runPrefixMethod(document, "IsFullScreen")) {
                    runPrefixMethod(document, "CancelFullScreen");
                    this.title = this.title.replace("退出", "");
                } else if (runPrefixMethod(document.body, "RequestFullScreen")) {
                    this.title = this.title.replace("点击", "点击退出");
                }
            });
        } else {
            alert("浏览器太老了!!");
        }
    })('#full-screen');
})(window);