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

其他 2019-09-18 17:21:16 阅读次数: 0

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();
    }
};

猜你喜欢

转载自www.cnblogs.com/chuanqi1995/p/11543765.html
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
[编程题]学英语
[codeforces 1288A] Deadline 约数+模
Python的web开发
Docker在Centos 7上的部署
python编码
解决Ubuntu16.04 fatal error: json/json.h: No such file or directory
mysql并发插入
rest接口如何适应jsonp的方案
linux 终端上网设置
高数——等号两边同时求导、积分的解释
每日归档
更多
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022