| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167 |
- var token = $.cookie("token");
- var seriesData = []; //柱形图数据
- var date; //初始日期
- var arrNum = [];
- var myChart;
- var aa = true;
- //日期
- laydate.skin('molv');
- laydate({
- elem: '#chooseTime',
- event: 'focus',
- format: 'YYYY', // 分隔符可以任意定义,该例子表示只显示年月
- });
- //tab切换
- $('.hu-tab li').click(function() {
- $(this).addClass('active')
- .siblings().removeClass('active');
- var index = $(this).index();
- $('.hu-content >div').eq(index).show()
- .siblings().hide();
- })
- $(document).ready(function() {
- //柱形图
- // 基于准备好的dom,初始化echarts实例
- myChart = echarts.init(document.getElementById('huData'));
- option = {
- color: ['#1ab394'],
- tooltip: {
- trigger: 'axis',
- axisPointer: { // 坐标轴指示器,坐标轴触发有效
- type: 'line' // 默认为直线,可选为:'line' | 'shadow'
- }
- },
- toolbox: {
- show: true,
- },
- calculable: true,
- xAxis: [{
- type: 'category',
- name: '月份',
- splitLine: {
- show: false
- }, //去除网格线
- data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
- axisTick: {
- alignWithLabel: true
- }
- }],
- yAxis: [{
- type: 'value',
- name: '通话量',
- nameLocation: 'end',
- splitLine: {
- show: false
- } //去除网格线
- }],
- series: [{
- name: '通话量',
- type: 'bar',
- barWidth: '30%', //图形宽度
- data: arrNum,
- itemStyle: {
- normal: {
- label: {
- show: true,
- textStyle: {
- color: '#800080' //顶部数据颜色
- }
- }
- }
- },
- label: {
- normal: {
- show: true,
- position: 'top' //顶部数据显示位置
- }
- }
- }
- ]
- };
- // 使用刚指定的配置项和数据显示图表。
- tu(date);
- myChart.setOption(option);
- myChart.on('click', function(params) {
- console.log(params);
- if(params.componentType === 'series') {
- if(params.dataIndex) {
- console.log(params.data)
- var month = params.name;
- console.log(month);
- }
- }
- });
- })
- Ajax(date);
- //搜索事件
- $(".sear").click(function() {
- $(".huTable tbody").html('');
- date = $("#chooseTime").val();
- Ajax(date);
- tu(date);
- myChart.setOption(option);
- });
- function Ajax(date) {
- $.ajax({
- type: "get",
- url: huayi.config.callcenter_url + "TotalCall/GetDataList",
- async: true,
- dataType: 'json',
- data: {
- token: token,
- years: date
- },
- success: function(data) {
- var con = data.data;
- if(con == null) {
- // $(".huTable tbody").html('');
- $('<tr><td colspan="3">暂无数据</td></tr>').appendTo('.huTable tbody');
- } else {
- for(var i = 0; i < con.length; i++) {
- $('<tr><td>' + con[i].月份 + '</td><td>' + con[i].日期 + '</td><td>' + con[i].总数 + '</td></tr>').appendTo(".huTable tbody")
- }
- }
- }
- });
- }
- function tu(date) {
- var arr = [];
- $.ajax({
- type: "get",
- url: huayi.config.callcenter_url + "TotalCall/GetChartData",
- async: false,
- dataType: 'json',
- data: {
- token: token,
- years: date
- },
- success: function(data) {
- //console.log(data.data)
- arr = data.data;
- console.log(arr)
- }
- });
- arrNum = arr;
- console.log(arrNum);
- option.series[0].data = arrNum;
- }
- //导出
- $('.export').click(function() {
- dcexcel(this);
- })
- function dcexcel(obj) {
- var url = huayi.config.callcenter_url + "TotalCall/ExptList?token=" + $.cookie("token");
- url += "&years=" + $("#chooseTime").val();
- obj.href = url;
- }
|