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

Posted 2022-11-10 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();
    
;