80 lines
		
	
	
		
			1.3 KiB
		
	
	
	
		
			JavaScript
		
	
	
		
			Executable File
		
	
	
	
	
			
		
		
	
	
			80 lines
		
	
	
		
			1.3 KiB
		
	
	
	
		
			JavaScript
		
	
	
		
			Executable File
		
	
	
	
	
| layui.use(['echarts'], function () {
 | |
| 	let echarts = layui.echarts;
 | |
| 	var column2 = echarts.init(document.getElementById('project_income_expense'));
 | |
| 
 | |
| 	option = {
 | |
| 		title: {
 | |
| 			text: '项目收支情况',
 | |
| 			left: 'center',
 | |
| 			top: 2,
 | |
| 			fontSize: 15,
 | |
| 			textStyle: {
 | |
| 				color: '#666666',
 | |
| 				fontWeight: 'normal'
 | |
| 			}
 | |
| 		},
 | |
| 		color: ['#fed46b', '#2194ff',],
 | |
| 		tooltip: {
 | |
| 			trigger: 'axis',
 | |
| 			axisPointer: {
 | |
| 				type: 'shadow'
 | |
| 			}
 | |
| 		},
 | |
| 		grid: {
 | |
| 			left: '3%',
 | |
| 			right: '4%',
 | |
| 			bottom: '10%',
 | |
| 			containLabel: true
 | |
| 		},
 | |
| 		legend: {
 | |
| 			left: 'center',
 | |
| 			top: 'bottom',
 | |
| 			data: ['支出金额', '收入金额']
 | |
| 		},
 | |
| 		xAxis: [{
 | |
| 			type: 'category',
 | |
| 			data: ['阿里云', '上海帆软', '简道云', '腾讯云', '华为云', '金山云', '腾讯云'],
 | |
| 			axisTick: {
 | |
| 				alignWithLabel: true
 | |
| 			}
 | |
| 		}],
 | |
| 		yAxis: [{
 | |
| 			name: '单位:元',
 | |
| 			type: 'value'
 | |
| 		}],
 | |
| 		barMaxWidth: '30',
 | |
| 		label: {
 | |
| 			show: true,
 | |
| 			position: 'top',
 | |
| 		},
 | |
| 		series: [
 | |
| 			{
 | |
| 				name: '支出金额',
 | |
| 				type: 'bar',
 | |
| 				data: [10, 52, 90, 70, 90, 70, 90],
 | |
| 				itemStyle: {
 | |
| 					normal: {
 | |
| 						color: '#f89588'
 | |
| 					}
 | |
| 				}
 | |
| 			},
 | |
| 			{
 | |
| 				name: '收入金额',
 | |
| 				type: 'bar',
 | |
| 				data: [90, 52, 90, 80, 90, 70, 90],
 | |
| 				itemStyle: {
 | |
| 					normal: {
 | |
| 						color: '#76da91'
 | |
| 					}
 | |
| 				}
 | |
| 			},
 | |
| 		]
 | |
| 	};
 | |
| 	column2.setOption(option);
 | |
| 
 | |
| 	window.onresize = function () {
 | |
| 		column2.resize();
 | |
| 	}
 | |
| 
 | |
| })
 |