解决Echarts窗口自适应失效问题

chuanqi1995

1.之前的窗口自适应关键代码（window.onresize）分别写到了好几个function中，窗口自适应失效了。代码如下：

$(function() {
    // 加载金额、油量、加油笔数、税额
    $.ajax({
        type:"POST",
        url:"Index!getOneAndAll.action",
        data: {"sjkd" : 10 , "startTime" : HOMEDATEYM},
        dataType:"json",
        success: function(data){
            // 如果返回是json数据为null，则退出此方法
            if(null == data){
                return;
            }
            if(null != data.total){
                var je_total = formatThousand2(data.total.je);
                var yl_total = formatThousand2(data.total.yl);
                var jybs_total = formatThousand(data.total.jybs);
                var se_total = formatThousand2(data.total.se);
                je_total = je_total.replace(".","<span class=\'point\'>.")+"</span>";
                yl_total = yl_total.replace(".","<span class=\'point\'>.")+"</span>";
                se_total =  se_total.replace(".","<span class=\'point\'>.")+"</span>";
                $("#je_total").html(je_total);
                $("#yl_total").html(yl_total);
                $("#jybs_total").html (jybs_total);
                $("#se_total").html(se_total);
            }else{
                $("#je_total").html("0<span class=\'point\'>.00</span>");
                $("#yl_total").html("0<span class=\'point\'>.00</span>");
                $("#jybs_total").html("0");
                $("#se_total").html("0<span class=\'point\'>.00</span>");
            }
            createCollectEcharts1(data);
        },
        error:function(data){
            alert("获取首页数据失败！");
        }
    });
    
    // 加载Top10
    $.ajax({
        type:"POST",
        url:"Index!getTopBar.action",
        data: {"sjkd" : 10 , "startTime" : HOMEDATEYM , "topKj" : 10 , "topNum" : 10},
        dataType:"json",
        success: function(data){
            // 如果返回是json数据为null，则退出此方法
            if(null == data){
                return;
            }
            createCollectEcharts2(data);
        },
        error:function(data){
            alert("获取首页数据失败！");
        }
    });
    
    // 加载摘挂枪分析
    $.ajax({
        type:"POST",
        url:"Index!getZgqfxScatter.action",
        data: {"sjkd" : 10 , "startTime" : HOMEDATEYM},
        dataType:"json",
        success: function(data){
            // 如果返回是json数据为null，则退出此方法
            if(null == data){
                return;
            }
            createCollectEcharts3(data);
        },
        error:function(data){
            alert("获取首页数据失败！");
        }
    });
});

function createCollectEcharts1(data){
    var xAxisData = [];
    var jeSeriesData = [];
    var ylSeriesData = [];
    var jybsSeriesData = [];
    var seSeriesData = [];
    
    for (var i = 0, size = data.dataList.length; i < size; i++) {
        xAxisData.push(data.dataList[i].sjjc);
        jeSeriesData.push(data.dataList[i].je);
        ylSeriesData.push(data.dataList[i].yl);
        jybsSeriesData.push(data.dataList[i].jybs);
        seSeriesData.push(data.dataList[i].se);
    }
    
    var data = [\'中石油102\', \'大平五一路\', \'中通\', \'和源\', \'德月\', \'铭磊\', \'高桥\', \'大平汽贸城\', \'天盈\', \'宝光\', \'燕港\', \'顺达\', \'长城\'];
    // 散点图声明
    var baseNumber = 45000;
    var variableNumber = 0;
    
    // 指定图表的配置项和数据
    var textBr = function(value) {
        // debugger
        var ret = ""; // 拼接加\n返回的类目项
        var maxLength = 3; // 每项显示文字个数
        var valLength = value.length; // X轴类目项的文字个数
        var rowN = Math.ceil(valLength / maxLength); // 类目项需要换行的行数
        if (rowN > 1) // 如果类目项的文字大于3,
        {
            for (var i = 0; i < rowN; i++) {
                var temp = ""; // 每次截取的字符串
                var start = i * maxLength; // 开始截取的位置
                var end = start + maxLength; // 结束截取的位置
                // 这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                temp = value.substring(start, end) + "\n";
                ret += temp; // 凭借最终的字符串
            }
            return ret;
        } else {
            return value;
        }
    }
    
    var myChart1, myChart2, myChart3, myChart4;
    
    // 基于准备好的dom，初始化echarts实例
    if ($(\'#echarts1\').length > 0) {
        myChart1 = echarts.init(document.getElementById(\'echarts1\'));
    }
    if ($(\'#echarts2\').length > 0) {
        myChart2 = echarts.init(document.getElementById(\'echarts2\'));
    }
    if ($(\'#echarts3\').length > 0) {
        myChart3 = echarts.init(document.getElementById(\'echarts3\'));
    }
    if ($(\'#echarts4\').length > 0) {
        myChart4 = echarts.init(document.getElementById(\'echarts4\'));
    }
    
    /* 第一个图表的配置--月销售额 --柱状图 */
    var option1 = {
        color: [\'#01a1ff\'],
        tooltip: {
            trigger: \'axis\',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: \'shadow\' // 默认为直线，可选为：\'line\' | \'shadow\'
            },
               formatter:function(params){
                   var res = params[0].name;
                   for (var i = 0; i < params.length; i++) {
                       res += "<br>"+params[i].marker+params[i].seriesName+"："+formatThousand2(params[i].data);
                }
                return res;
               }
        },
        dataZoom: [{
            type: \'inside\',
        }],
        grid: {
            top: \'30\',
            left: \'1%\',
            right: \'1%\',
            bottom: \'1%\',
            containLabel: true,
        },
        xAxis: [{
            data: xAxisData,
            axisTick: {
                show: false,
            },
            axisLabel: {
                formatter: function(value) {
                    return textBr(value);
                }
            }
        }],
        yAxis: [{
            type: \'value\',
            axisTick: {
                show: false,
            },
        }],
        series: [{
            name: \'本月销售额\',
            type: \'bar\',
            barWidth: \'40%\',
            label: {
                normal: {
                    show: true,
                    position: \'top\',
                    color: \'#424242\',
                    fontSize: 12,
                    formatter: function(params) {
                        return formatThousand2(params.value);
                    }
                }
            },
            data: jeSeriesData
        }],

    };
    /* 第二个图表的配置--销售量 --折线图 */
    var option2 = {
        color: [\'#ffa801\'],
        dataZoom: [{
            type: \'inside\',
        }],
        tooltip: {
            trigger: \'axis\',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: \'line\' // 默认为直线，可选为：\'line\' | \'shadow\'
            },
               formatter:function(params){
                   var res = params[0].name;
                   for (var i = 0; i < params.length; i++) {
                       res += "<br>"+params[i].marker+params[i].seriesName+"："+formatThousand2(params[i].data);
                }
                return res;
               }
        },
        grid: {
            top: \'30\',
            left: \'1%\',
            right: \'1%\',
            bottom: \'1%\',
            containLabel: true
        },
        xAxis: [{
            data: xAxisData,
            axisTick: {
                show: false,
            },
            axisLabel: {
                formatter: function(value) {
                    return textBr(value);
                }
            }

        }],
        yAxis: [{
            type: \'value\',
            axisTick: {
                show: false,
            },
        }],
        series: [{
            name: \'本月销售量\',
            type: \'line\',
            label: {
                normal: {
                    show: true,
                    position: \'top\',
                    color: \'#424242\',
                    fontSize: 12,
                    formatter: function(params) {
                        return formatThousand2(params.value);
                    }
                },
            },
            clipOverflow: false,
            symbolSize: 10,
            data: ylSeriesData,
            areaStyle: {
                color: {
                    type: \'linear\',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: \'rgba(255,168,1,0.8)\' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: \'rgba(255,168,1,0.2)\' // 100% 处的颜色
                    }],
                }
            }
        }]
    };
    /* 第三个图表的配置--加油笔数 --柱状图 */
    var option3 = {
        color: [\'#64bf0f\'],
        tooltip: {
            trigger: \'axis\',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: \'shadow\' // 默认为直线，可选为：\'line\' | \'shadow\'
            },
               formatter:function(params){
                   var res = params[0].name;
                   for (var i = 0; i < params.length; i++) {
                       res += "<br>"+params[i].marker+params[i].seriesName+"："+formatThousand(params[i].data);
                }
                return res;
               }
        },
        dataZoom: [{
            type: \'inside\',
        }],
        grid: {
            top: \'30\',
            left: \'1%\',
            right: \'1%\',
            bottom: \'1%\',
            containLabel: true,
        },
        xAxis: [{
            data: xAxisData,
            axisTick: {
                show: false,
            },
            axisLabel: {
                formatter: function(value) {
                    return textBr(value);
                }
            }
        }],
        yAxis: [{
            type: \'value\',
            axisTick: {
                show: false,
            },
        }],
        series: [{
            name: \'本月加油笔数\',
            type: \'bar\',
            barWidth: \'26%\',
            data: jybsSeriesData,
            itemStyle: {
                barBorderRadius: [30, 30, 0, 0],
            },
            label: {
                show: true,
                position: \'top\',
                color: \'#424242\',
                fontSize: 12,
                formatter: function(params) {
                    return formatThousand(params.value);
                }
            }
        }]
    };
    /* 第四个图表的配置--税额 --柱状图 */
    var option4 = {
        color: [\'#ea3c33\'],
        tooltip: {
            trigger: \'axis\',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: \'shadow\' // 默认为直线，可选为：\'line\' | \'shadow\'
            },
               formatter:function(params){
                   var res = params[0].name;
                   for (var i = 0; i < params.length; i++) {
                       res += "<br>"+params[i].marker+params[i].seriesName+"："+formatThousand2(params[i].data);
                }
                return res;
               }
        },
        dataZoom: [{
            type: \'inside\',
        }],
        grid: {
            top: \'30\',
            left: \'1%\',
            right: \'1%\',
            bottom: \'1%\',
            containLabel: true,
        },
        xAxis: [{
            data: xAxisData,
            axisTick: {
                show: false,
            },
            axisLabel: {
                formatter: function(value) {
                    return textBr(value);
                }
            }
        }],
        yAxis: [{
            axisTick: {
                show: false,
            },
        }],
        series: [{
            name: \'本月销售额\',
            type: \'bar\',
            barWidth: \'30%\',
            label: {
                normal: {
                    show: true,
                    position: \'top\',
                    rotate: \'20\',
                    color: \'#424242\',
                    fontSize: 12,
                    formatter: function(params) {
                        return formatThousand2(params.value);
                    }
                }
            },
            data: seSeriesData
        }]
    };
    
    myChart1 && myChart1.setOption(option1, true);
    myChart2 && myChart2.setOption(option2, true);
    myChart3 && myChart3.setOption(option3, true);
    myChart4 && myChart4.setOption(option4, true);
    
    /* 窗口自适应，关键代码 */
    window.onresize = function() {
        if ($(\'#echarts1\').length > 0) {
            myChart1.resize();
        }
        if ($(\'#echarts2\').length > 0) {
            myChart2.resize();
        }
        if ($(\'#echarts3\').length > 0) {
            myChart3.resize();
        }
        if ($(\'#echarts4\').length > 0) {
            myChart4.resize();
        }
    };
    
    // 解决tab切换不显示问题 在加载窗口后重新渲染。
    $(\'a[data-toggle="tab"]\').on(\'shown.bs.tab\', function(e) {
        if ($(\'#echarts1\').length > 0) {
            myChart1.resize();
        }
        if ($(\'#echarts2\').length > 0) {
            myChart2.resize();
        }
        if ($(\'#echarts3\').length > 0) {
            myChart3.resize();
        }
        if ($(\'#echarts4\').length > 0) {
            myChart4.resize();
        }
    });
}

function createCollectEcharts2(data){
    var color1 = "#EA1E1E";
    var color2 = "#ED8913";
    var color3 = "#57B115";
    var xAxisData = [];
    var seriesData = [];
    var series = [];
    
    for (var i = 0, size = data.dataList.length; i < size; i++) {
        xAxisData.push(data.dataList[i].sjjc);
    }
    
    for (var i = 0, size = data.dataList.length; i < size; i++) {
        if(i == 0){
            seriesData.push({
                value : data.dataList[i].bq_zje,
                itemStyle : {color: color1}
            });
        }else if(i == 1){
            seriesData.push({
                value : data.dataList[i].bq_zje,
                itemStyle : {color: color2}
            });
        }else if(i == 2){
            seriesData.push({
                value : data.dataList[i].bq_zje,
                itemStyle : {color: color3}
            });
        }else{
            seriesData.push(data.dataList[i].bq_zje);
        }
        
    }
    
    series.push(
        {
            name: \'总销售额\',
            type: \'bar\',
            barWidth: \'22%\',
            label: {
                normal: {
                    show: false,
                    position: \'top\',
                    color: \'#424242\',
                    fontSize: 12,
                }
            },
            data: seriesData
        }
    );
    
    
    // 指定图表的配置项和数据
    var textBr = function(value) {
        // debugger
        var ret = ""; // 拼接加\n返回的类目项
        var maxLength = 3; // 每项显示文字个数
        var valLength = value.length; // X轴类目项的文字个数
        var rowN = Math.ceil(valLength / maxLength); // 类目项需要换行的行数
        if (rowN > 1) // 如果类目项的文字大于3,
        {
            for (var i = 0; i < rowN; i++) {
                var temp = ""; // 每次截取的字符串
                var start = i * maxLength; // 开始截取的位置
                var end = start + maxLength; // 结束截取的位置
                // 这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                temp = value.substring(start, end) + "\n";
                ret += temp; // 凭借最终的字符串
            }
            return ret;
        } else {
            return value;
        }
    }
    
    var myChart5;
    
    // 基于准备好的dom，初始化echarts实例
    if ($(\'#echarts5\').length > 0) {
        myChart5 = echarts.init(document.getElementById(\'echarts5\'));
    }
    
    /* 第5个图表的配置--top分析排名 --柱状图 */
    var option5 = {
        color: [\'#01a1ff\'],
        dataZoom: [{
            type: \'inside\',
        }],
        tooltip: {
            trigger: \'axis\',
            axisPointer: {
                type: \'shadow\'
            },
               formatter:function(params){
                   var res = params[0].name;
                   for (var i = 0; i < params.length; i++) {
                       res += "<br>"+params[i].marker+params[i].seriesName+"："+formatThousand2(params[i].data);
                }
                return res;
               }
        },
        grid: {
            top: \'10\',
            left: \'1%\',
            right: \'1%\',
            bottom: \'20\',
            containLabel: true,
        },
        xAxis: [{
            data: xAxisData,
            axisTick: {
                show: false,
            },
            axisLabel: {
                formatter: function(value) {
                    return textBr(value);
                }
            }
        }],
        yAxis: [{
            type: \'value\',
            axisTick: {
                show: false,
            },
        }],
        series: series,
    };
    
    myChart5 && myChart5.setOption(option5, true);
    
    /* 窗口自适应，关键代码 */
    window.onresize = function() {
        if ($(\'#echarts5\').length > 0) {
            myChart5.resize();
        }
    };
}

function createCollectEcharts3(data){
    var zgqb;
    var titleText;
    var zgqsSeriesdata = [];
    var jybsSeriesdata = [];
    if(null != data.total){
        zgqb = formatPercent2(data.total.zgqb);
        zgqsSeriesdata.push(data.total.zgqs);
        jybsSeriesdata.push(data.total.jybs);
    }
    titleText = "摘挂枪比：" + zgqb;
    
    
    // 散点图声明
    var baseNumber = 45000;
    var variableNumber = 0;
    
    var myChart6;
    
    if ($(\'#echarts6\').length > 0) {
        myChart6 = echarts.init(document.getElementById(\'echarts6\'));
    }
    
    /* 第6个图表的配置--摘挂枪分析 --单轴散点图 */
    var option6 = {
        title: {
            //text: \'摘挂枪比：60.00%\',
            text: titleText,
            left: \'center\',
            bottom: \'20\',
            textStyle: {
                fontSize: 13,
                fontWeight: \'bold\',
                color: [\'#ffb888\'],
                lineHeight: 12,
            },
        },

        legend: {
            data: [\'摘挂枪数\', \'加油笔数\']
        },
        singleAxis: {
            type: \'category\',
            top: \'70%\',
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            }
        },
        tooltip: {
            trigger: \'item\',
        },
        series: [{
            type: \'scatter\',
            name: \'摘挂枪数\',
            coordinateSystem: \'singleAxis\',
            //data: [300000],
            data: zgqsSeriesdata,
            symbolSize: function(value) {
                variableNumber = value;
                return Math.sqrt(baseNumber) * .8
            },
            symbolOffset: [0, \'-50%\'],
            itemStyle: {
                opacity: 1,
                color: \'#ac90cc\'
            },
            label: {
                show: true,
                position: [\'38%\', \'7%\'],
                formatter: \'{c}\',
                color: \'#fff\',
                formatter: function(params) {
                    return formatThousand(params.value);
                }
            }
        }, {
            type: \'scatter\',
            name: \'加油笔数\',
            coordinateSystem: \'singleAxis\',
            //data: [214400],
            data: jybsSeriesdata,
            symbolSize: function(value) {
                if (value >= variableNumber)
                    return Math.sqrt(baseNumber) * .8
                else
                    return Math.sqrt(value / variableNumber * baseNumber) * .8
            },
            symbolOffset: [0, \'-50%\'],
            itemStyle: {
                opacity: 1,
                color: \'#ffb888\'
            },
            label: {
                show: true,
                position: \'inside\',
                formatter: \'{c}\',
                color: \'#fff\',
                formatter: function(params) {
                    return formatThousand(params.value);
                }
            }
        }]
    };
    
    myChart6 && myChart6.setOption(option6, true);
    
    /* 窗口自适应，关键代码 */
    window.onresize = function() {
        if ($(\'#echarts6\').length > 0) {
            myChart6.resize();
        }
    };
}

2.之后将窗口自适应关键代码一起提到了最下边就好使了。代码如下：

$(function() {
    // 加载金额、油量、加油笔数、税额
    $.ajax({
        type:"POST",
        url:"Index!getOneAndAll.action",
        data: {"sjkd" : 10 , "startTime" : HOMEDATEYM},
        dataType:"json",
        success: function(data){
            // 如果返回是json数据为null，则退出此方法
            if(null == data){
                return;
            }
            if(null != data.total){
                var je_total = formatThousand2(data.total.je);
                var yl_total = formatThousand2(data.total.yl);
                var jybs_total = formatThousand(data.total.jybs);
                var se_total = formatThousand2(data.total.se);
                je_total = je_total.replace(".","<span class=\'point\'>.")+"</span>";
                yl_total = yl_total.replace(".","<span class=\'point\'>.")+"</span>";
                se_total =  se_total.replace(".","<span class=\'point\'>.")+"</span>";
                $("#je_total").html(je_total);
                $("#yl_total").html(yl_total);
                $("#jybs_total").html (jybs_total);
                $("#se_total").html(se_total);
            }else{
                $("#je_total").html("0<span class=\'point\'>.00</span>");
                $("#yl_total").html("0<span class=\'point\'>.00</span>");
                $("#jybs_total").html("0");
                $("#se_total").html("0<span class=\'point\'>.00</span>");
            }
            createCollectEcharts1(data);
        },
        error:function(data){
            alert("获取首页数据失败！");
        }
    });
    
    // 加载Top10
    $.ajax({
        type:"POST",
        url:"Index!getTopBar.action",
        data: {"sjkd" : 10 , "startTime" : HOMEDATEYM , "topKj" : 10 , "topNum" : 10},
        dataType:"json",
        success: function(data){
            // 如果返回是json数据为null，则退出此方法
            if(null == data){
                return;
            }
            createCollectEcharts2(data);
        },
        error:function(data){
            alert("获取首页数据失败！");
        }
    });
    
    // 加载摘挂枪分析
    $.ajax({
        type:"POST",
        url:"Index!getZgqfxScatter.action",
        data: {"sjkd" : 10 , "startTime" : HOMEDATEYM},
        dataType:"json",
        success: function(data){
            // 如果返回是json数据为null，则退出此方法
            if(null == data){
                return;
            }
            createCollectEcharts3(data);
        },
        error:function(data){
            alert("获取首页数据失败！");
        }
    });
    
});
var myChart1, myChart2, myChart3, myChart4;
function createCollectEcharts1(data){
    var xAxisData = [];
    var jeSeriesData = [];
    var ylSeriesData = [];
    var jybsSeriesData = [];
    var seSeriesData = [];
    
    for (var i = 0, size = data.dataList.length; i < size; i++) {
        xAxisData.push(data.dataList[i].sjjc);
        jeSeriesData.push(data.dataList[i].je);
        ylSeriesData.push(data.dataList[i].yl);
        jybsSeriesData.push(data.dataList[i].jybs);
        seSeriesData.push(data.dataList[i].se);
    }
    
    var data = [\'中石油102\', \'大平五一路\', \'中通\', \'和源\', \'德月\', \'铭磊\', \'高桥\', \'大平汽贸城\', \'天盈\', \'宝光\', \'燕港\', \'顺达\', \'长城\'];
    // 散点图声明
    var baseNumber = 45000;
    var variableNumber = 0;
    
    // 指定图表的配置项和数据
    var textBr = function(value) {
        // debugger
        var ret = ""; // 拼接加\n返回的类目项
        var maxLength = 3; // 每项显示文字个数
        var valLength = value.length; // X轴类目项的文字个数
        var rowN = Math.ceil(valLength / maxLength); // 类目项需要换行的行数
        if (rowN > 1) // 如果类目项的文字大于3,
        {
            for (var i = 0; i < rowN; i++) {
                var temp = ""; // 每次截取的字符串
                var start = i * maxLength; // 开始截取的位置
                var end = start + maxLength; // 结束截取的位置
                // 这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                temp = value.substring(start, end) + "\n";
                ret += temp; // 凭借最终的字符串
            }
            return ret;
        } else {
            return value;
        }
    }
    
    
    // 基于准备好的dom，初始化echarts实例
    if ($(\'#echarts1\').length > 0) {
        myChart1 = echarts.init(document.getElementById(\'echarts1\'));
    }
    if ($(\'#echarts2\').length > 0) {
        myChart2 = echarts.init(document.getElementById(\'echarts2\'));
    }
    if ($(\'#echarts3\').length > 0) {
        myChart3 = echarts.init(document.getElementById(\'echarts3\'));
    }
    if ($(\'#echarts4\').length > 0) {
        myChart4 = echarts.init(document.getElementById(\'echarts4\'));
    }
    
    /* 第一个图表的配置--月销售额 --柱状图 */
    var option1 = {
        color: [\'#01a1ff\'],
        tooltip: {
            trigger: \'axis\',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: \'shadow\' // 默认为直线，可选为：\'line\' | \'shadow\'
            },
               formatter:function(params){
                   var res = params[0].name;
                   for (var i = 0; i < params.length; i++) {
                       res += "<br>"+params[i].marker+params[i].seriesName+"："+formatThousand2(params[i].data);
                }
                return res;
               }
        },
        dataZoom: [{
            type: \'inside\',
        }],
        grid: {
            top: \'30\',
            left: \'1%\',
            right: \'1%\',
            bottom: \'1%\',
            containLabel: true,
        },
        xAxis: [{
            data: xAxisData,
            axisTick: {
                show: false,
            },
            axisLabel: {
                formatter: function(value) {
                    return textBr(value);
                }
            }
        }],
        yAxis: [{
            type: \'value\',
            axisTick: {
                show: false,
            },
        }],
        series: [{
            name: \'本月销售额\',
            type: \'bar\',
            barWidth: \'30%\',
            label: {
                normal: {
                    show: true,
                    position: \'top\',
                    color: \'#424242\',
                    fontSize: 12,
                    formatter: function(params) {
                        return formatThousand2(params.value);
                    }
                }
            },
            data: jeSeriesData
        }],

    };
    /* 第二个图表的配置--销售量 --折线图 */
    var option2 = {
        color: [\'#ffa801\'],
        dataZoom: [{
            type: \'inside\',
        }],
        tooltip: {
            trigger: \'axis\',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: \'line\' // 默认为直线，可选为：\'line\' | \'shadow\'
            },
               formatter:function(params){
                   var res = params[0].name;
                   for (var i = 0; i < params.length; i++) {
                       res += "<br>"+params[i].marker+params[i].seriesName+"："+formatThousand2(params[i].data);
                }
                return res;
               }
        },
        grid: {
            top: \'30\',
            left: \'1%\',
            right: \'1%\',
            bottom: \'1%\',
            containLabel: true
        },
        xAxis: [{
            data: xAxisData,
            axisTick: {
                show: false,
            },
            axisLabel: {
                formatter: function(value) {
                    return textBr(value);
                }
            }

        }],
        yAxis: [{
            type: \'value\',
            axisTick: {
                show: false,
            },
        }],
        series: [{
            name: \'本月销售量\',
            type: \'line\',
            label: {
                normal: {
                    show: true,
                    position: \'top\',
                    color: \'#424242\',
                    fontSize: 12,
                    formatter: function(params) {
                        return formatThousand2(params.value);
                    }
                },
            },
            clipOverflow: false,
            symbolSize: 10,
            data: ylSeriesData,
            areaStyle: {
                color: {
                    type: \'linear\',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: \'rgba(255,168,1,0.8)\' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: \'rgba(255,168,1,0.2)\' // 100% 处的颜色
                    }],
                }
            }
        }]
    };
    /* 第三个图表的配置--加油笔数 --柱状图 */
    var option3 = {
        color: [\'#64bf0f\'],
        tooltip: {
            trigger: \'axis\',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: \'shadow\' // 默认为直线，可选为：\'line\' | \'shadow\'
            },
               formatter:function(params){
                   var res = params[0].name;
                   for (var i = 0; i < params.length; i++) {
                       res += "<br>"+params[i].marker+params[i].seriesName+"："+formatThousand(params[i].data);
                }
                return res;
               }
        },
        dataZoom: [{
            type: \'inside\',
        }],
        grid: {
            top: \'30\',
            left: \'1%\',
            right: \'1%\',
            bottom: \'1%\',
            containLabel: true,
        },
        xAxis: [{
            data: xAxisData,
            axisTick: {
                show: false,
            },
            axisLabel: {
                formatter: function(value) {
                    return textBr(value);
                }
            }
        }],
        yAxis: [{
            type: \'value\',
            axisTick: {
                show: false,
            },
        }],
        series: [{
            name: \'本月加油笔数\',
            type: \'bar\',
            barWidth: \'26%\',
            data: jybsSeriesData,
            itemStyle: {
                barBorderRadius: [30, 30, 0, 0],
            },
            label: {
                show: true,
                position: \'top\',
                color: \'#424242\',
                fontSize: 12,
                formatter: function(params) {
                    return formatThousand(params.value);
                }
            }
        }]
    };
    /* 第四个图表的配置--税额 --柱状图 */
    var option4 = {
        color: [\'#ea3c33\'],
        tooltip: {
            trigger: \'axis\',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: \'shadow\' // 默认为直线，可选为：\'line\' | \'shadow\'
            },
               formatter:function(params){
                   var res = params[0].name;
                   for (var i = 0; i < params.length; i++) {
                       res += "<br>"+params[i].marker+params[i].seriesName+"："+formatThousand2(params[i].data);
                }
                return res;
               }
        },
        dataZoom: [{
            type: \'inside\',
        }],
        grid: {
            top: \'30\',
            left: \'1%\',
            right: \'1%\',
            bottom: \'1%\',
            containLabel: true,
        },
        xAxis: [{
            data: xAxisData,
            axisTick: {
                show: false,
            },
            axisLabel: {
                formatter: function(value) {
                    return textBr(value);
                }
            }
        }],
        yAxis: [{
            axisTick: {
                show: false,
            },
        }],
        series: [{
            name: \'本月销售额\',
            type: \'bar\',
            barWidth: \'30%\',
            label: {
                normal: {
                    show: true,
                    position: \'top\',
                    rotate: \'20\',
                    color: \'#424242\',
                    fontSize: 12,
                    formatter: function(params) {
                        return formatThousand2(params.value);
                    }
                }
            },
            data: seSeriesData
        }]
    };
    
    myChart1 && myChart1.setOption(option1, true);
    myChart2 && myChart2.setOption(option2, true);
    myChart3 && myChart3.setOption(option3, true);
    myChart4 && myChart4.setOption(option4, true);
    
    
    
    // 解决tab切换不显示问题 在加载窗口后重新渲染。
    $(\'a[data-toggle="tab"]\').on(\'shown.bs.tab\', function(e) {
        if ($(\'#echarts1\').length > 0) {
            myChart1.resize();
        }
        if ($(\'#echarts2\').length > 0) {
            myChart2.resize();
        }
        if ($(\'#echarts3\').length > 0) {
            myChart3.resize();
        }
        if ($(\'#echarts4\').length > 0) {
            myChart4.resize();
        }
    });
}
var myChart5;
function createCollectEcharts2(data){
    var color1 = "#EA1E1E";
    var color2 = "#ED8913";
    var color3 = "#57B115";
    var xAxisData = [];
    var seriesData = [];
    var series = [];
    
    for (var i = 0, size = data.dataList.length; i < size; i++) {
        xAxisData.push(data.dataList[i].sjjc);
    }
    
    for (var i = 0, size = data.dataList.length; i < size; i++) {
        if(i == 0){
            seriesData.push({
                value : data.dataList[i].bq_zje,
                itemStyle : {color: color1}
            });
        }else if(i == 1){
            seriesData.push({
                value : data.dataList[i].bq_zje,
                itemStyle : {color: color2}
            });
        }else if(i == 2){
            seriesData.push({
                value : data.dataList[i].bq_zje,
                itemStyle : {color: color3}
            });
        }else{
            seriesData.push(data.dataList[i].bq_zje);
        }
        
    }
    
    series.push(
        {
            name: \'总销售额\',
            type: \'bar\',
            barWidth: \'36%\',
            label: {
                normal: {
                    show: false,
                    position: \'top\',
                    color: \'#424242\',
                    fontSize: 12,
                }
            },
            data: seriesData
        }
    );
    
    
    // 指定图表的配置项和数据
    var textBr = function(value) {
        // debugger
        var ret = ""; // 拼接加\n返回的类目项
        var maxLength = 3; // 每项显示文字个数
        var valLength = value.length; // X轴类目项的文字个数
        var rowN = Math.ceil(valLength / maxLength); // 类目项需要换行的行数
        if (rowN > 1) // 如果类目项的文字大于3,
        {
            for (var i = 0; i < rowN; i++) {
                var temp = ""; // 每次截取的字符串
                var start = i * maxLength; // 开始截取的位置
                var end = start + maxLength; // 结束截取的位置
                // 这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                temp = value.substring(start, end) + "\n";
                ret += temp; // 凭借最终的字符串
            }
            return ret;
        } else {
            return value;
        }
    }
    

    
    // 基于准备好的dom，初始化echarts实例
    if ($(\'#echarts5\').length > 0) {
        myChart5 = echarts.init(document.getElementById(\'echarts5\'));
    }
    
    /* 第5个图表的配置--top分析排名 --柱状图 */
    var option5 = {
        color: [\'#01a1ff\'],
        dataZoom: [{
            type: \'inside\',
        }],
        tooltip: {
            trigger: \'axis\',
            axisPointer: {
                type: \'shadow\'
            },
               formatter:function(params){
                   var res = params[0].name;
                   for (var i = 0; i < params.length; i++) {
                       res += "<br>"+params[i].marker+params[i].seriesName+"："+formatThousand2(params[i].value);
                }
                return res;
               }
        },
        grid: {
            top: \'10\',
            left: \'1%\',
            right: \'1%\',
            bottom: \'20\',
            containLabel: true,
        },
        xAxis: [{
            data: xAxisData,
            axisTick: {
                show: false,
            },
            axisLabel: {
                formatter: function(value) {
                    return textBr(value);
                }
            }
        }],
        yAxis: [{
            type: \'value\',
            axisTick: {
                show: false,
            },
        }],
        series: series,
    };
    
    myChart5 && myChart5.setOption(option5, true);
}
var myChart6;
function createCollectEcharts3(data){
    var zgqb;
    var titleText;
    var zgqsSeriesdata = [];
    var jybsSeriesdata = [];
    if(null != data.total){
        zgqb = formatPercent2(data.total.zgqb);
        zgqsSeriesdata.push(data.total.zgqs);
        jybsSeriesdata.push(data.total.jybs);
    }
    titleText = "摘挂枪比：" + zgqb;
    
    
    // 散点图声明
    var baseNumber = 45000;
    var variableNumber = 0;
    
    if ($(\'#echarts6\').length > 0) {
        myChart6 = echarts.init(document.getElementById(\'echarts6\'));
    }
    
    /* 第6个图表的配置--摘挂枪分析 --单轴散点图 */
    var option6 = {
        title: {
            //text: \'摘挂枪比：60.00%\',
            text: titleText,
            left: \'center\',
            bottom: \'20\',
            textStyle: {
                fontSize: 13,
                fontWeight: \'bold\',
                color: [\'#ffb888\'],
                lineHeight: 12,
            },
        },

        legend: {
            data: [\'摘挂枪数\', \'加油笔数\']
        },
        singleAxis: {
            type: \'category\',
            top: \'70%\',
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            }
        },
        tooltip: {
            trigger: \'item\',
        },
        series: [{
            type: \'scatter\',
            name: \'摘挂枪数\',
            coordinateSystem: \'singleAxis\',
            //data: [300000],
            data: zgqsSeriesdata,
            symbolSize: function(value) {
                variableNumber = value;
                return Math.sqrt(baseNumber) * .8
            },
            symbolOffset: [0, \'-50%\'],
            itemStyle: {
                opacity: 1,
                color: \'#ac90cc\'
            },
            label: {
                show: true,
                position: [\'38%\', \'7%\'],
                formatter: \'{c}\',
                color: \'#fff\',
                formatter: function(params) {
                    return formatThousand(params.value);
                }
            }
        }, {
            type: \'scatter\',
            name: \'加油笔数\',
            coordinateSystem: \'singleAxis\',
            //data: [214400],
            data: jybsSeriesdata,
            symbolSize: function(value) {
                if (value >= variableNumber)
                    return Math.sqrt(baseNumber) * .8
                else
                    return Math.sqrt(value / variableNumber * baseNumber) * .8
            },
            symbolOffset: [0, \'-50%\'],
            itemStyle: {
                opacity: 1,
                color: \'#ffb888\'
            },
            label: {
                show: true,
                position: \'inside\',
                formatter: \'{c}\',
                color: \'#fff\',
                formatter: function(params) {
                    return formatThousand(params.value);
                }
            }
        }]
    };
    myChart6 && myChart6.setOption(option6, true);
}
/* 窗口自适应，关键代码 */
window.onresize = function() {
    if ($(\'#echarts1\').length > 0) {
        myChart1.resize();
    }
    if ($(\'#echarts2\').length > 0) {
        myChart2.resize();
    }
    if ($(\'#echarts3\').length > 0) {
        myChart3.resize();
    }
    if ($(\'#echarts4\').length > 0) {
        myChart4.resize();
    }
    if ($(\'#echarts5\').length > 0) {
        myChart5.resize();
    }
    if ($(\'#echarts6\').length > 0) {
        myChart6.resize();
    }
};

 

分类：

技术点：

相关文章：

  • 2022-12-23
  • 2021-12-11
  • 2021-09-02
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-08-21
  • 2022-12-23
猜你喜欢
  • 2021-08-25
  • 2022-12-23
  • 2021-08-06
  • 2022-12-23
  • 2021-10-19
  • 2021-11-13
  • 2022-12-23
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode