YH_Web_UI/WebUI/CallCenterWe.../WebChart/js/dataCockpitR...

var hjCompaer; //图形
$(function() {
    $('#sc_times').val(getNowYear() - 1 + ' ~ ' + getNowYear());
    laydate.render({
        elem: '#sc_times',
        format: 'yyyy',
        range: "~",
        type: 'year',
        theme: '#249fea',
    });

    //初始化图形
    initChart();
    //加载数据
    getDataList();
    //搜索事件
    $("#sc_btns").click(function() {
        if($('#sc_times').val() == '') {
            layer.confirm('请选择时间！', {
                btn: ['确定']
            });
            return;
        }
        getDataList();
    });
    $("#HY_export").click(function() {
        if($('#sc_times').val() == '') {
            layer.confirm('请选择时间！', {
                btn: ['确定']
            });
            return;
        }
        dcexcel(this)
    });
});
//加载数据
function getDataList() {
	//var content = res.data;
	var arr = [];
	var allData = [];
	//var content = res.data;
    if(content && content.length > 0) {
        $.each(content, function(index, ele) {
            arr.push(content[index].key);
            allData.push(content[index].value) //console.log(allData);
        });

        option.legend.data = arr; //图例
        option.series[0].name = arr[0]; //图例
        //添加数据name
        for(var i = 0; i < arr.length; i++) {
            option.series[i].name = arr[i];
        }
        //添加图形数据
        for(var j = 0; j < allData.length; j++) {
            option.series[j].data = allData[j];
        }
        hjCompaer.setOption(option);
    }
//  $.ajax({
//      type: 'get',
//      url: huayi.config.callcenter_url + 'callcenterapi/api/yearcontrast/getdatalist',
//      dataType: 'json',
//      data: {
//          beginyear: $('#sc_times').val() && $('#sc_times').val().split(' ~ ')[0],
//          endyear: $('#sc_times').val() && $('#sc_times').val().split(' ~ ')[1]
//      },
//      async: true,
//      success: function(res) {
//          //						hjCompaer.hideLoading();
//          var arr = [];
//          var allData = [];
//          var content = res.data;
//          if(content && content.length > 0) {
//              $.each(content, function(index, ele) {
//                  arr.push(content[index].key);
//                  allData.push(content[index].value) //console.log(allData);
//              });
//
//              option.legend.data = arr; //图例
//              option.series[0].name = arr[0]; //图例
//              //添加数据name
//              for(var i = 0; i < arr.length; i++) {
//                  option.series[i].name = arr[i];
//              }
//              //添加图形数据
//              for(var j = 0; j < allData.length; j++) {
//                  option.series[j].data = allData[j];
//              }
//              hjCompaer.setOption(option);
//          }
//      }
//  });
}
//初始化图形
function initChart() {
    hjCompaer = echarts.init(document.getElementById('hjCompaer'));
    option = {
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            data: [],
            textStyle: {
				color: '#00e9ff'
			},
            bottom: 0
        },
        grid: {
            left: '5%',
            right: '5%',
            bottom: '15%',
            //			containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisLine: {
            	show: false,
				lineStyle: {
					
					color: '#3061a2'
				}
			},
			axisTick: {
				alignWithLabel: true,
				show: false
			},
			axisLabel: { //横轴字体颜色
				show: false,
				textStyle: {
					color: '#eff0f4'
				}
			},
			show: false, 
			splitLine: {
			    show: false 
			},
            axisPointer: {
                type: ''
            }
        }],
        yAxis: [{
            type: 'value',
            name: '电话数量',
            nameLocation: 'end',
            nameGap: 40,
            axisTick:{ //y轴刻度线
				show:false
			},
			
            axisLine: {
            	show:true,
				lineStyle: {
					color: '#3061a2'
				}
			},
            axisLabel: {
            	show: true,
				textStyle: {
					color: '#eff0f4'
				},
                formatter: '{value} '
            },
            splitLine: {
                show: false
            }
        }, {
            type: 'value',
            name: '百分比',
            nameLocation: 'end',
            nameGap: 35,
            axisTick:{ //y轴刻度线
				show:false
			},
            interval: 10,
            axisLine: {
				lineStyle: {
					color: '#3061a2'
				}
			},
            axisLabel: {
            	show: true,
				textStyle: {
					color: '#eff0f4'
				},
                formatter: '{value} '
            },
            splitLine: {
                show: false
            }
        }],
        series: [{
            name: '',
            type: 'bar',
            data: []
        }, {
            name: '',
            type: 'bar',
            data: []
        }, {
            name: '',
            type: 'line',
            yAxisIndex: 1,
            data: []
        }, {
            name: '',
            type: 'bar',
            data: []
        }, {
            name: '',
            type: 'bar',
            data: []
        }, {
            name: '',
            type: 'line',
            yAxisIndex: 1,
            data: []
        }],
        color: ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#88ebc4', '#fa957f']
    };

    hjCompaer.setOption(option);
}

function getNowYear() {
    //获取当前年份
    var myDate = new Date();
    return myDate.getFullYear(); //获取完整的年份(4位,1970-????) 
}
//导出
function dcexcel(obj) {
    var beginyear=$('#sc_times').val() && $('#sc_times').val().split(' ~ ')[0];
    var endyear=$('#sc_times').val() && $('#sc_times').val().split(' ~ ')[1];
    var url=huayi.config.callcenter_url +"callcenterapi/api/yearcontrast/exportexcel?beginyear=" +beginyear ;
    url += "&endyear=" + endyear;
    obj.href = url;
}