基于js-xlsx插件的echarts账单分析系统

基于js-xlsx插件的echarts账单分析系统

主程序：（注释比较详细，就不再说明了）

$(function() {
	// 头部彩蛋
	// console.log(document.getElementById("demo"));
	// console.log($("#demo")[0].outerHTML);
	$(".header_title_one")[0].click(function() {
		$(".header_title_two").css("opacity", "1");
	});

	// 表面file调用真实file上传
	$("#upfileBtn").click(function() {
		$("#upfileBtn__").click();
	});

	// 当文件上传完成响应change方法
	$("#upfileBtn__").change(function() {
		// 成功上传后外边框改为绿色
		$(".upfileImgDiv").css("border-color", "#009688");
		// 上传成功后按钮图片变为彩色
		$("#upfileImg").attr("src", "images/fenxiicon.png");
		// console.log(this);
		// importExcel(this);
	});

	// 点击分析按钮开始分析
	$("#upfileImg").click(function() {
		// console.log($("#upfileBtn__")[0]);
		layer.load(2, {
			shade: [0.1, '#fff'],
			time: 2000
		});
		// 等待前方的loading
		setTimeout(function() {
			$("#echartsContent").append(
				`<div id="demo" class="col-md-6" style="height: 500px;"></div>
										 <div id="demo1" class="col-md-6" style="height: 500px;"></div>`
			);
			importExcel($("#upfileBtn__")[0]);
		}, 2500);


	});

	var contentArray = [];
	var wb; //读取完成的数据
	var aa = [];
	var text = [];
	var rABS = false; //是否将文件读取为二进制字符串

	// 传递的参数
	var wraningError = 0,
		wraning = 0,
		noWraning = 0;

	var xDataArray = [];
	var zhuDataArray = [];

	//解析主程序
	function importExcel(obj) {
		// 饼图的存放的Dom
		var echartsBingDom = document.getElementById("demo");
		var echartsZhuDom = document.getElementById("demo1");

		// console.log(obj);
		if (!obj.files) {
			return;
		}
		const IMPORTFILE_MAXSIZE = 1 * 2048; //这里可以自定义控制导入文件大小
		var suffix = obj.files[0].name.split(".")[1]
		if (suffix != 'xls' && suffix != 'xlsx') {
			alert('导入的文件格式不正确!')
			return
		}
		if (obj.files[0].size / 1024 > IMPORTFILE_MAXSIZE) {
			alert('导入的表格文件不能大于2M')
			return
		}
		var f = obj.files[0];
		var reader = new FileReader();
		reader.onload = function(e) {
			var data = e.target.result;
			if (rABS) {
				wb = XLSX.read(btoa(fixdata(data)), { //手动转化
					type: 'base64'
				});
			} else {
				wb = XLSX.read(data, {
					type: 'binary'
				});
			}
			//wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
			//wb.Sheets[Sheet名]获取第一个Sheet的数据
			aa = JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]));
			// console.log(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]));
			var u = eval('(' + aa + ')');
			//document.getElementById("demo").innerHTML = JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]));
			contentArray = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]).slice(0);
			// console.log(contentArray[0]);
			for (let item in contentArray) {
				// 循环获取紧急不紧急的统计
				if (contentArray[item].priority == 1) {
					wraningError++;
				} else if (contentArray[item].priority == 2) {
					wraning++;
				} else if (contentArray[item].priority == 3) {
					noWraning++;
				}
				// 循环获取柱状图x轴数据
				let dataMoney = contentArray[item].money;
				let dataThing = contentArray[item].thing;
				// 插入x轴数据
				xDataArray.push(dataMoney);
				// 插入y轴数据
				zhuDataArray.push(dataThing);
			}

			// for(let ii=0; ii<contentArray.length;ii++){
			// 	let number = Number(contentArray[ii].money);
			// 	console.log(number)
			// 	// xDataArray = [...xDataArray, number];
			// 	xDataArray.push(number);
			// }
			// console.log(xDataArray);
			// console.log(zhuDataArray);

			// 建立饼状图
			echartsBing(echartsBingDom, wraningError, wraning, noWraning);

			// 建立柱状图
			echartsZhu(echartsZhuDom, xDataArray, zhuDataArray);

			//获取表格中为address的那列存入text中
			for (var i = 0; i < u.length; i++) {
				text.push(u[i].address);
			}

		};
		if (rABS) {
			reader.readAsArrayBuffer(f);
		} else {
			reader.readAsBinaryString(f);
		}
	}

	/**
	 * 饼状图
	 * dom：创建echarts的dom元素
	 * dataNumber：统计数据*/
	function echartsBing(echartsBingDom, wraningError, wraning, noWraning) {
		let myChart = echarts.init(echartsBingDom);
		let option = {
			color: ['#07c160', '#12b7f5', '#FF0036'],
			title: {
				text: '花费必要程度饼状图',
				left: 'center'
			},
			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b} : {c} ({d}%)'
			},
			legend: {
				orient: 'vertical',
				left: 'left',
				data: ['非常紧急', '紧急', '不必要']
			},
			series: [{
				name: '等级程度',
				type: 'pie',
				radius: '55%',
				center: ['50%', '60%'],
				data: [{
						value: wraningError,
						name: '非常紧急'
					},
					{
						value: wraning,
						name: '紧急'
					},
					{
						value: noWraning,
						name: '不必要'
					}
				],
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				}
			}]
		};

		myChart.setOption(option);
	}

	/**
	 * 柱状图
	 * 展示全部的信息
	 * Dom：传递显示的Dom节点
	 * xData：传递x轴显示的数据
	 * zhuData：传递柱状图的数据*/
	function echartsZhu(echartsZhuDom, xData, zhuData) {
		console.log(xData);
		console.log(zhuData);
		let myChart = echarts.init(echartsZhuDom);
		let option = {
			title: {
				text: '花费项目柱状图',
				left: 'center'
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow',
					label: {
						show: true
					}
				}
			},
			// 工具栏
			toolbox: {
				show: true,
				feature: {
					mark: {
						show: true
					},
					dataView: {
						show: true,
						readOnly: false
					},
					magicType: {
						show: true,
						type: ['line', 'bar']
					},
					restore: {
						show: true
					},
					saveAsImage: {
						show: true
					}
				}
			},
			// 距离边框位置
			grid: {
				top: '12%',
				left: '10%',
				right: '10%',
				containLabel: true
			},
			// x轴
			xAxis: [{
				name: '时间',
				// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				data: zhuData,
				axisLabel: {
					interval: 0,
					rotate: 40
				}
			}],
			// y轴
			yAxis: [{
				type: 'value',
				name: '金额'
			}],
			// 设置时间轴
			dataZoom: [{
				show: true,
				start: 0,
				end: 20
			}],
			// 设置柱状图图例内数据
			series: [{
				name: '金额：',
				type: 'bar',
				// data: [120, 200, 150, 80, 70, 110, 130],
				data: xData,
				itemStyle: {
					color: new echarts.graphic.LinearGradient(
						0, 0, 0, 1,
						[{
								offset: 0,
								color: '#83bff6'
							},
							{
								offset: 0.5,
								color: '#188df0'
							},
							{
								offset: 1,
								color: '#188df0'
							}
						]
					)
				},
				emphasis: {
					itemStyle: {
						color: new echarts.graphic.LinearGradient(
							0, 0, 0, 1,
							[{
									offset: 0,
									color: '#2378f7'
								},
								{
									offset: 0.7,
									color: '#2378f7'
								},
								{
									offset: 1,
									color: '#83bff6'
								}
							]
						)
					}
				}
			}]
		};

		myChart.setOption(option);

	};
})

这里注意，分析系统采用的excel表格式必须是下图所示样子，想要添加其他信息请在其他列中添加

ps：红框中必须照抄

有不想写的兄弟可以直接 下载