echarts统计图以当前日期为开始的七天数据

毕设作品之一统计图，是使用模板进行动态设置

初次发布文章，如有不当之处，请予指正

图片: 页面效果

HTML页面
代码片.

<!--月运单量统计图-->
<div class="billChart">
<div class="itemTit">
	<span class="border-blue">月运单量统计图<small>(当前日期的后七天)</small></span>
	</div>
<!-- 显示的数据开始 -->
	<div id="myChart1"></div>
<!-- 显示的数据 -->
</div>

JS页代码实现动态数据
代码片.

//月运单量统计图
	var myChart1 = echarts.init(document.getElementById('myChart1')); //获取显示页面的ID
	oe();
	function oe(){
	//m_url 自己端口地址
		$.ajax({
			url: m_url + 'url',//url自己链接获取动态数据
			dataType: 'json', //服务器返回json格式数据
			type: 'post', //HTTP请求类型
			timeout: 10000, //超时时间设置为10秒；
			headers: {
				'Content-Type': 'application/json'
			},
			success: function(data) {
				var w=[];
				var data=data.data;
				for(var a=0;a<data.length;a++){
					var q=data[a];
					w.push(q);
				}
				var option1 = {
					tooltip: {
						trigger: 'item',
						//显示数据
						formatter: function(params) {
							var res = '本月' + params.name + '号运单数：' + params.data; //获取动态值
							return res;
						}
					},
					grid: {
						top: '5%',
						left: '0%',
						width: '100%',
						height: '95%',
						containLabel: true
					},
					//页面可视化图表日期当前日期的开始七天
					xAxis: {
						type: 'category',
						data: arr,
						axisLabel: {
							show: true,
							textStyle: {
								fontSize: '12px',
								color: '#fff',
							}
						},
						axisLine: {
							lineStyle: {
								color: '#fff',
								width: 1,
							}
						}
					},
				
					yAxis: {
						axisLabel: {
							show: true,
							textStyle: {
								fontSize: '12px',
								color: '#fff',
							}
						},
						axisLine: {
							lineStyle: {
								color: '#fff',
								width: 1,
							}
						},
						splitLine: {
							show: false,
						}
					},
					//图表运单数值
					series: {
						name: '',
						type: 'bar',
						barWidth: 10,
						data:w,
						itemStyle: {
							normal: {
								barBorderRadius: [5, 5, 5, 5],//柱形图样式
								color: new echarts.graphic.LinearGradient(
									0, 0, 0, 1,
									[{
											offset: 0,
											color: '#3876cd'
										},
										{
											offset: 0.5,
											color: '#45b4e7'
										},
										{
											offset: 1,
											color: '#54ffff'
										}
									]
								),
							},
						},
					},
				}
				myChart1.setOption(option1);
			},
		})
	}

	//七天时间
	var arr = []; //用来存放最近七天的时间
	function getBeforeDate(n) {
		var s;
		var n = n;
		console.log(n); //
		var d = new Date();
		var year = d.getFullYear();
		var mon = d.getMonth() + 1;
		var day = d.getDate();
		if (day <= n) {
			if (mon > 1) {
				mon = mon - 1;
			} else {
				year = year - 1;
				mon = 12;
			}
		}
		d.setDate(d.getDate() + n); //很重要，+n取得是前一天的时间
		year = d.getFullYear();
		mon = d.getMonth() + 1;
		day = d.getDate();
		s = (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
		return s;
	}
	for (var i = 0; i > -7; i--) {
		arr.push(getBeforeDate(i));
	}
	console.log(arr);

样式就不发出太多了，本人没有详细查看

初次发布文章，如有不当之处，请予指正。