echarts双折线图

最新推荐文章于 2024-06-05 09:44:46 发布

一名写前端的GISer

最新推荐文章于 2024-06-05 09:44:46 发布

阅读量452

点赞数

CC 4.0 BY-SA版权

文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/wangchaohpu/article/details/130972395

这段代码展示了如何使用Echarts库生成堆叠折线图，数据来源于dataInfo.rows。它设置了两个系列（南北，东西），并定义了x轴为时间，y轴为数值。图例、提示信息、网格、数据区域缩放等功能也进行了配置，同时调整了标签和线条的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var rows = dataInfo.rows;
var xData = [];
var yData1 = [];
var yData2 = [];
for (var i = 0; i < rows.length; i++) {
	xData.push(rows[i].time);
	yData1.push(rows[i].x);
	yData2.push(rows[i].y);
}

var myChart1 = echarts.init(document.getElementById('main1'));

var option = {
	title: {
		// text: 'Stacked Line'
	},
	tooltip: {
		trigger: 'axis'
	},
	legend: {
		data: ['南北', '东西'],
		textStyle:{
			color:'ffffff',
			fontSize:24
		}

 },
	grid: {
		left: '3%',
		right: '4%',
		bottom: '10%',
		containLabel: true
	},
	dataZoom: [{
		type: 'slider',
		show: true,
		start: 0,
		end: 30,
		// xAxisIndex: [0],
	}, ],
	xAxis: {
		type: 'category',
		boundaryGap: false,
		data: xData,
		axisLabel: {
			show: true,
			textStyle: {
				color: '#ffffff',
				fontSize: 20,
				// fontSize: 16, 可直接写数字,单位px
			},
		},
		boundaryGap:false // 设置这个 使得左侧紧贴着y轴
	},
	yAxis: {
		type: 'value',
		axisLabel: {
			show: true,
			textStyle: {
				color: '#ffffff',
				fontSize: 20,
				// fontSize: 16, 可直接写数字,单位px
			},
		},
		scale:true ,// y轴的起点 不从0开始  按照数值更智能化 脱离0值比例
		splitLine:{show: false}
	},
	
	series: [{
			name: '南北',
			type: 'line',
			stack: 'Total', 
			data: yData1,
			itemStyle:{
				normal:{
					lineStyle:{
						color:'#00aaff',// 折线的颜色
						width:5, // 折线的宽度
						type:'solid'  //'dotted'点型虚线 'solid'实线 'dashed'线性虚线
					},
					//下面是拐点样式配置属性
					  color:'#00aaff',// 这里设置的拐点颜色
					  borderColor: "#D3D3D3", //  拐点边框颜色
					  borderWidth: 3, //  拐点边框宽度
					  shadowColor: "#F5F5F5", //  阴影颜色
					  shadowBlur: 5, //  阴影渐变范围控制
					  
					  // 拐点上显示数据
					  label: {
						show: true,
						position: 'bottom',//数据在中间显示
						fontSize:20
					  }
				},
				
				
				
			},
			symbol: "circle", //拐点的形状
			symbolSize: 25,//拐点大小
			label: {
				show: true,
				position: 'top',//数据在中间显示
			}
			
		},
		{
			name: '东西',
			type: 'line',
			stack: 'Total',
			data: yData2,
			itemStyle:{
				normal:{
					lineStyle:{
						color:'#0055ff',// 折线的颜色
						width:3, // 折线的宽度
						type:'solid'  //'dotted'点型虚线 'solid'实线 'dashed'线性虚线
					},
					//下面是拐点样式配置属性
					  color:'#0055ff',// 这里设置的拐点颜色
					  borderColor: "#D3D3D3", //  拐点边框颜色
					  borderWidth: 3, //  拐点边框宽度
					  shadowColor: "#F5F5F5", //  阴影颜色
					  shadowBlur: 5, //  阴影渐变范围控制
					  // 拐点上显示数据
					  label: {
						show: true,
						position: 'bottom',//数据在中间显示
						fontSize:20
					  }
				},
				
			},
			symbol: "circle", //拐点的形状
			symbolSize: 15,//拐点大小
			
		},

	]
};
myChart1.setOption(option);
window.addEventListener("resize", function() {
	myChart1.resize();
});