jquery +Echart画图表

$(function () {
    $.ajax({
        type:"post",
        async:false,
        data:{},
        url:"../codeindex/codeFormatConvert",
        success:function(d){
            var data = d.data;
            //概况
            codeStatus(data);
            chart1(data);
            chart2(data);
            chart3(data);
            chart4(data);
        }
    });
});

function codeStatus(data){
    $(".main_round:eq(0)").html(data.monthCodeHeat.codeSum);
    $(".main_round:eq(1)").html(data.monthCodeHeat.monthCodeSum);
    $(".main_round:eq(2)").html(data.cityCodeHeat.viewCount);
    $(".main_round:eq(3)").html(data.cityCodeHeat.apraiseCount);
}
function chart1(data){
    if(data && data.monthCodeHeats){
        var arr1 = new Array();
        var arr2 = new Array();
        var arr3 = new Array();
        for(var i=0;i<data.monthCodeHeats.length;i++){
            var time=data.monthCodeHeats[i].statisDate.substr(4,2)+"/"+data.monthCodeHeats[i].statisDate.substr(6,2);
            arr1.push(time);
            arr2.push(data.monthCodeHeats[i].dateCodeSum);
        }
        // ----------------------------第1个echarts  当月模型热度趋势图 start--------------------------
        var myChart1 = echarts.init(document.getElementById('model_hot_trend'));
        option = {
            tooltip:{
                trigger:'axis',
            },
            legend: {
                name: ['上传数量'],
                right: 43,
                selectedMode: false, // 图例不可点击
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                //data: ['4/1', '4/3', '4/7', '4/9', '4/11', '4/13', '4/15'],
                data:arr1,
                axisLine: {
                    lineStyle: {
                        color: "#aaa", //x轴坐标轴轴线颜色
                    }
                },
                axisTick: {
                    show: true, //是否显示坐标轴刻度
                    inside: true, //坐标轴刻度是否朝内，true为朝内，false为朝外
                },
                axisLabel:{
                    color:"#666",   //刻度标签的文字颜色
                }
            },
            yAxis: {
                type: 'value',
                axisLine: { //设置坐标轴轴线样式
                    lineStyle: {
                        color: "#aaa", //y轴坐标轴轴线颜色
                    }
                },
                axisTick: {
                    show: false, //是否显示坐标轴刻度
                },
                axisLabel:{
                    color:"#666",   //刻度标签的文字颜色
                }
            },
            series: [{
                // data: [130, 187, 110, 190, 120, 240, 50],
                data:arr2,
                type: 'line',
                name: "上传数量",
                symbolSize: 8, //设定实心点的大小
                legendHoverLink: false, //鼠标经过图例时，不高亮
                areaStyle: {
                    color: "#408EF0", //区域背景颜色
                    opacity: 0.2 //区域背景透明度，值为0-1
                },
                itemStyle: {
                    normal: {
                        color: "#91AFE1", //设置折线点上的颜色
                        lineStyle: {
                            color: "#91AFE1", //设置折线的颜色
                        }
                    }
                },
                silent: true, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
            }
            ]
        };
        myChart1.setOption(option);
        // ----------------------------第1个echarts  当月模型热度趋势图 end--------------------------
    }
}
function chart2(data){
    if(data && data.userCodeHeats){
        var arr1 = new Array();
        var arr2 = new Array();
        var arr3 = new Array();
        for(var i=0;i<data.userCodeHeats.length;i++){
            arr1.push(data.userCodeHeats[i].tenantName);
            arr2.push(data.userCodeHeats[i].viewCount);
            arr3.push(data.userCodeHeats[i].apraiseCount);
        }

        // -----------------------------第2个echarts  当月租户模型热度分析 start-------------------------
        var myChart2 = echarts.init(document.getElementById('tenement_hot_analysis'));
        option = {
            tooltip:{
                trigger:'axis',
            },
            legend: {
                name: ['访问次数', '评论次数'],
                right: 43,
                selectedMode: false, // 图例不可点击
            },
            xAxis: {
                data: arr1,
                axisTick: { //坐标轴相关配置
                    show: true, //是否显示坐标轴刻度
                    inside: true //坐标轴刻度朝向，true为朝内，false朝外，默认false
                },
                axisLine: {
                    lineStyle: {
                        color: "#aaa", //x轴坐标轴轴线颜色
                    }
                },
                axisLabel:{
                    color:"#666",   //刻度标签的文字颜色
                }
            },
            yAxis: {
                splitLine: { //坐标轴在grid区域中的分割线
                    show: true, //显示分割线
                },
                axisLine: {
                    lineStyle: {
                        color: "#aaa", //x轴坐标轴轴线颜色
                    }
                },
                axisLabel:{
                    color:"#666",   //刻度标签的文字颜色
                }
            },
            // animationDurationUpdate: 1200,
            series: [{
                type: 'bar',
                name: '访问次数',
                legendHoverLink: false, //鼠标经过图例时，不高亮
                itemStyle: { //柱状图图形样式
                    normal: {
                        color: '#4B9CF8' //柱颜色
                    }
                },
                silent: true, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
                barWidth: 20, //柱状图宽度
                barGap: 0, //不同系列的柱间间距
                data:arr2
            },
                {
                    type: 'bar',
                    name: '评论次数',
                    legendHoverLink: false, //鼠标经过图例时，不高亮
                    itemStyle: { //柱状图图形样式
                        normal: {
                            color: '#BBB3E4'
                        }
                    },
                    barWidth: 20,
                    silent: true, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
                    //z: 10,  //柱状图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
                    data: arr3
                }
            ]
        };
        myChart2.setOption(option);
        // -----------------------------第2个echarts 当月租户模型热度分析 end-------------------------
    }
}
function chart3(data){
    if(data && data.cityCodeHeats){
        var arr1 = new Array();
        var arr2 = new Array();
        var arr3 = new Array();
        for(var i=0;i<data.cityCodeHeats.length;i++){
            arr1.push(data.cityCodeHeats[i].departmentName);
            arr2.push(data.cityCodeHeats[i].viewCount);
            arr3.push(data.cityCodeHeats[i].apraiseCount);
        }
        // -----------------------------第3个echarts 当月地市模型热度分析 start-------------------------
        var myChart3 = echarts.init(document.getElementById('cities_hot_analysis'));
        option = {
            tooltip:{
                trigger:'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                name: ['访问次数', '评论次数'],
                right: 43,
                selectedMode: false, // 图例不可点击
            },
            yAxis: {
                data: arr1,
                axisTick: { //坐标轴相关配置
                    show: true, //是否显示坐标轴刻度
                    inside: true //坐标轴刻度朝向，true为朝内，false朝外，默认false
                },
                axisLine: {
                    lineStyle: {
                        color: "#aaa", //x轴坐标轴轴线颜色
                    }
                },
                axisLabel:{
                    color:"#000",   //刻度标签的文字颜色
                }
            },
            xAxis: {
                splitLine: { //坐标轴在grid区域中的分割线
                    show: true, //显示分割线
                },
                axisLine: {
                    lineStyle: {
                        color: "#aaa", //x轴坐标轴轴线颜色
                    }
                },
                axisLabel:{
                    color:"#000",   //刻度标签的文字颜色
                }
            },
            // animationDurationUpdate: 1200,
            series: [{
                type: 'bar',
                name: '访问次数',
                legendHoverLink: false, //鼠标经过图例时，不高亮
                itemStyle: { //柱状图图形样式
                    normal: {
                        color: '#21AE9E' //柱颜色
                    }
                },
                silent: true, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
                barWidth: 8, //柱状图宽度
                barGap: 0, //不同系列的柱间间距
                data:arr2
            },
                {
                    type: 'bar',
                    name: '评论次数',
                    legendHoverLink: false, //鼠标经过图例时，不高亮
                    itemStyle: { //柱状图图形样式
                        normal: {
                            color: '#FFC94F'
                        }
                    },
                    barWidth: 8,
                    silent: true, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
                    //z: 10,  //柱状图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
                    data: arr3
                }
            ]
        };
        myChart3.setOption(option);
        // -----------------------------第3个echarts 当月地市模型热度分析-------------------------
    }
}
function chart4(data){
    if(data && data.businessCodeHeats){
        var arr1 = new Array();
        var arr2 = new Array();
        var arr3 = new Array();
        for(var i=0;i<data.businessCodeHeats.length;i++){
            arr1.push(data.businessCodeHeats[i].projectName);
            arr2.push(data.businessCodeHeats[i].viewCount);
            arr3.push(data.businessCodeHeats[i].apraiseCount);
        }
        // ----------------------------第4个echarts 当月业务模型热度分析 start--------------------------
        var myChart4 = echarts.init(document.getElementById('business_hot_analysis'));
        option = {
            tooltip:{
                trigger:'axis',
            },
            legend: {
                name: ['访问次数', '评论次数'],
                right: 43,
                selectedMode: false, // 图例不可点击
            },
            xAxis: {
                data: arr1,
                axisTick: { //坐标轴相关配置
                    show: true, //是否显示坐标轴刻度
                    inside: true //坐标轴刻度朝向，true为朝内，false朝外，默认false
                },
                axisLine: {
                    lineStyle: {
                        color: "#aaa", //x轴坐标轴轴线颜色
                    }
                },
                nameTextStyle: {
                    color: "#000", //坐标轴名称的颜色
                },
                axisLabel:{
                    color:"#666",   //刻度标签的文字颜色
                }
            },
            yAxis: [{
                type: 'value',
                name: '访问次数',
                data:arr2,
                /*min: 0,
                max: 10000,*/
                axisLine: {
                    lineStyle: {
                        color: "#aaa", //x轴坐标轴轴线颜色
                    }
                },
                nameTextStyle: {
                    color: "#666", //坐标轴名称的颜色
                },
                axisTick: { //  坐标轴刻度相关设置
                    show: false,
                },
                splitLine: { //坐标轴在grid区域中的分割线
                    show: false, //隐藏分割线
                },
                axisLabel:{
                    color:"#666",   //刻度标签的文字颜色
                }
            },
                {
                    type: 'value',
                    name: '评论次数',
                    data:arr3,
                    /*min: 0,
                    max: 10000,*/
                    axisLine: {
                        lineStyle: {
                            color: "#aaa", //x轴坐标轴轴线颜色
                        }
                    },
                    nameTextStyle: {
                        color: "#666", //坐标轴名称的颜色
                    },
                    axisTick: { //  坐标轴刻度相关设置
                        show: false,
                    },
                    axisLabel:{
                        color:"#666",   //刻度标签的文字颜色
                    }
                }
            ],
            series: [{
                type: 'bar',
                name: '访问次数',
                itemStyle: { //柱状图图形样式
                    normal: {
                        color: '#BBB3E4', //柱颜色
                        borderColor: '#7869C4',
                    }
                },
                //legendHoverLink: false, //鼠标经过图例时，不高亮
                barWidth: 30, //柱状图宽度
                barGap: 0, //不同系列的柱间间距
                data: arr2,
                //silent: true, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
            },
                {
                    type: 'line',
                    name: '评论次数',
                    itemStyle: { //柱状图图形样式
                        normal: {
                            color: '#EC6E71'
                        }
                    },
                    symbolSize: 8, //设定实心点的大小
                    //legendHoverLink: false, //鼠标经过图例时，不高亮
                    data: arr3,
                    yAxisIndex: 1,
                    //silent: true, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
                }
            ]
        };
        myChart4.setOption(option);
        // ----------------------------第4个echarts 当月业务模型热度分析 end--------------------------
    }
}