AnYang_UI/WebChartNewest/js/trafficData.js

getworkOrder()
var telCountData
$('.btn_time').click(function(e) {
	if(e.target.tagName == 'SPAN') {
		if($(e.target).attr('data-state') == '1') {
			$(".hwsjtj").hide()
			$('.daySeat').css('display', 'none')
			$('.timeTraffic').css('display', 'inline-block')
			$('#traffic').css('display', 'none')
			$('#timeTraffic').css('display', 'block')
			$(this).siblings(".act").children("label").attr("indexTitle", "日话务数据统计1")
			$('.call_situation h2').text('话务数据统计')
			getworkOrder()
			trafficState = 0
		}
	}
	e.stopPropagation();
})

function getworkOrder() {
	let workOrderData = [];
	let workOrderName = []
	new doAjax({
		url: huayi.config.callcenter_url + "/InfoNew/GetTelCountByNow",
		data: {
			timetype: telCountByNowType
		},
		callBack: function(res) {
			var data = res.data.hw[0]
			telCountData = data
			trafficDataChart(data)
		}
	});
}

function getLabelOption(positionObj, numberType) {
	var labelOption = {
		show: true,
		rotate: 0,
		align: 'left',
		color: '#fff',
		verticalAlign: 'middle',
		position: positionObj,
		formatter: function(params) {
			if(params.value > 0) {
				dataValue = params.seriesName + ': ' + params.value
				if(params.seriesName === "回拨") {
					dataValue = dataValue + '(' + telCountData.hbbili + '%)'
				} else if(params.seriesName === "自助") {
					dataValue = dataValue + '(' + telCountData.zzbili + '%)'
				} else if(params.seriesName === "人工") {
					dataValue = dataValue + '(' + telCountData.jtbili + '%)'
				}
				return dataValue;
			} else {
				return ' ';
			}
		},
		fontSize: 12,
	};
	return labelOption
}

function trafficDataChart(getdata) {
	getOption(getdata)
}

function getOption(getdata) {

	let canvas = document.querySelector('#timeTrafficLeft')
    canvas.width= 500
    canvas.height= 500
    let ctx = canvas.getContext('2d')

    // 绘制 x 轴，y 轴
    ctx.beginPath()
    // 线条开始坐标
    ctx.moveTo(50,100)
    // 线条结束坐标
    ctx.lineTo(50,450)
    ctx.lineTo(450,450)
    ctx.stroke()
    // 绘制数字 x，y
    let context = canvas.getContext('2d')
    // context.beginPath()
    context.font= "15px arial"
    context.fillText("y",40,85)
    context.fillText("x",455,460)
    // context.closePath()

    // 绘制 x ，y 轴箭头
    ctx.beginPath()
    ctx.moveTo(45,105)
    ctx.lineTo(50,100)
    ctx.lineTo(55,105)
    ctx.stroke()
    ctx.closePath()

    ctx.beginPath()
    ctx.moveTo(445,445)
    ctx.lineTo(450,450)
    ctx.lineTo(445,455)
    ctx.stroke()
    ctx.closePath()

    let colorArr = []
    for (let i = 0; i < 8; i++) {
      // 使用随机数生成每条柱子的颜色，使用16进制格式
      let color = '#'+parseInt(Math.random()*0xffffff).toString(16)
      colorArr.push(color)
    }
    // console.log(colorArr);
    // 绘制x轴坐标，在对应坐标位置绘制对应的矩形
    for(let i = 0; i < 8; i++) {
      let xStart = 80 + i * 50
      ctx.beginPath()
      ctx.moveTo(xStart,450)
      ctx.lineTo(xStart,460)
      ctx.stroke()
      ctx.closePath()
      ctx.beginPath()
      ctx.fillStyle = colorArr[i]
      let height = Math.random()*350
      ctx.fillRect(xStart-10,450-height,20,height)
      context.font = "20px Arial"
      context.textAlign = "center"
      context.fillStyle = 'white'
      context.fillText((xStart-80)/50,xStart,475)
      ctx.closePath()
    }

    // 绘制y轴坐标和坐标值
    for(let i = 430; i > 100; i-=50) {
      ctx.beginPath()
      ctx.moveTo(45,i)
      ctx.lineTo(50,i)
      ctx.stroke()
      context.font = "20px Arial"
      // 字体的水平对齐设置
      context.textAlign = "right"
      context.fillStyle = 'white'
      context.fillText(Math.abs(i-430),40,i)
      ctx.closePath()
    }

    for (let i = 0; i < 8; i++) {
      let x = 100 + i * 40
      let y = 30
      ctx.fillStyle = colorArr[i]
      ctx.fillRect(x,y,25,20)
    }


}