TaoLer/public/view/echarts/script/line4.js

layui.use(['echarts'], function() {
	let echarts = layui.echarts;

	var line4 = echarts.init(document.getElementById('line4'),null, {
		width: 600,
		height: 400
	});

	const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
	option = {
		title: {
			text: '用电量'
		},
		tooltip: {
			trigger: 'axis'
		},
		legend: {
			data: ['2018', '2019']
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		toolbox: {
			feature: {
				saveAsImage: {}
			}
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,//坐标轴两边留白
			data: ['12201', '12202', '12203','12204','12301','12302','12303','12304','12401', '12402', '12403','12404'],
			axisLabel: { //坐标轴刻度标签的相关设置。
				interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
			//	margin:15,
				
				color: '#1B253A',
				fontStyle: 'normal',
				fontFamily: '微软雅黑',
				fontSize: 12,
				
				formatter:function(params) {
					var newParamsName = "";
					var paramsNameNumber = params.length;
					var provideNumber = 4;  //一行显示几个字
					var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
					if (paramsNameNumber > provideNumber) {
						for (var p = 0; p < rowNumber; p++) {
							var tempStr = "";
							var start = p * provideNumber;
							var end = start + provideNumber;
							if (p == rowNumber - 1) {
								tempStr = params.substring(start, paramsNameNumber);
							} else {
								tempStr = params.substring(start, end) + "\n";
							}
							newParamsName += tempStr;
						}
	
					} else {
						newParamsName = params;
					}
					return newParamsName
				},
				//rotate:50,
			},
			axisTick:{//坐标轴刻度相关设置。
				show: false,
			},
			axisLine:{//坐标轴轴线相关设置
				lineStyle:{
					color:'#E5E9ED',
					// opacity:0.2
				}
			},
			splitLine: { //坐标轴在 grid 区域中的分隔线。
				show: true,
				lineStyle: {
					color: '#E5E9ED',
				// 	opacity:0.1
				}
			}
		},
		yAxis: [
			{
				type: 'value',
				splitNumber: 5,
				axisLabel: {
					
					color: '#a8aab0',
					fontStyle: 'normal',
					fontFamily: '微软雅黑',
					fontSize: 12
					
				},
				axisLine:{
					show: false
				},
				axisTick:{
					show: false
				},
				splitLine: {
					show: true,
					lineStyle: {
						color: '#E5E9ED',
					// 	opacity:0.1
					}
				}
	
			}
		],
		series: [
			{
				name: '2018',
				type: 'line',
				itemStyle: {			       
					color:'#3A84FF',
					lineStyle: {
						color: "#3A84FF",
						width:1
					},
					areaStyle: { 
						color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
							offset: 0,
							color: 'rgba(58,132,255,0)'
						}, {
							offset: 1,
							color: 'rgba(58,132,255,0.35)'
						}]),
					}			        
				},
				data: [ 1, 2, 3, 3, 5, 6, 5, 3, 6, 5, 5, 4]
			},
			{
				name: '2019',
				type: 'line',
				itemStyle: {			       
					color:'rgba(255,80,124,1)',
					lineStyle: {
						color: "rgba(255,80,124,1)",
						width:1
					},
					areaStyle: { 
						color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
							offset: 0,
							color: 'rgba(255,80,124,0)'
						}, {
							offset: 1,
							color: 'rgba(255,80,124,0.35)'
						}]),
					}			        
				},
				data: [9, 5,7,8,6,7,8,7,7,6,8,6]
			}
		]
	};


	line4.setOption(option);

	window.onresize = function() {
		line4.resize();
	}
	
})