JS----按小时统计，小时为空，用0补充

按小时统计，小时为空，用0补充

初始化

line: function (xAxisData, seriesData, legendData) {
	return  {
		title: {
			text: "",
			subtext: "",
			x: 'center',
		},
		tooltip: {
			show: true,
			trigger: 'axis',
			formatter: "{b} <br/>{a} : {c}",
		},
		legend: {
			orient: 'vertical', //垂直：vertical； 水平 horizontal
			left: 'right',
			data: legendData || []
		},
		xAxis: [
			{
				type : 'category',
				data: xAxisData || [],
				axisLabel :{
					// rotate: -20
				}
			}
		],
		yAxis: [
			{
				type : 'value',
			}
		],
		series: [
			{
				name: '数量',
				type: 'line',
				data: seriesData || []
			},
		]
	};
},
initChart: function (id, option) {
			
			var chart = echarts.getInstanceByDom(document.getElementById(id)), timer = null;

			if (chart == null) {
				chart = echarts.init(document.getElementById(id), layui.echartsTheme);
			}

			chart.setOption(option);

			$(window).on('resize', function () {
					timer && clearTimeout(timer)
					timer = setTimeout(function() {
						chart && chart.resize()
					}, 400);
				}
			);

			return chart;
		},

使用

function initRenderChart(data, id) {
    admin.req({
        url,
        data,
        success: function (res) {
            if (res.code === 0 && res.data.length > 0) {
                renderChart(layui.myChart.dataFormat.getData(res.data, 'day', 'value'), id);
            } else {
                layui.myChart.set.empty(id);
            }
        }
    })
}

function renderChart (data, id) {
    var option = layui.myChart.option.line(data.dateList, data.valueList);
    layui.myChart.initChart(id, option)
}

格式化数据

dataFormat: {
	getData(data, dateLabel, valueLabel, legendLabel) {
		var dateList = [], valueList = [], legendList = [];
		dateLabel = dateLabel || 'category';
		valueLabel = valueLabel || 'value';
		legendLabel = legendLabel || 'group'

		data.map((item) => {
			dateList.push(item[dateLabel] || '');
			valueList.push(item[valueLabel] || 0);

			if (item[legendLabel] && !legendList.contains(item[legendLabel])) {
				legendList.push(item[legendLabel]);
			}
		})

		return {dateList, valueList};
	}
},