echart 多Y轴展示

最新推荐文章于 2024-07-04 10:50:41 发布

iorn_mangg

最新推荐文章于 2024-07-04 10:50:41 发布

阅读量979

点赞数 1

分类专栏： echarts js 文章标签： js 数据可视化

本文链接：https://blog.csdn.net/iorn_mangg/article/details/117357021

版权

js 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

echarts

4 篇文章 1 订阅

订阅专栏

本文展示了如何使用Echarts创建一个包含多个Y轴的联动折线图，每个Y轴对应不同的数据系列，并详细解释了配置项设置，包括颜色、轴标签、图例等。代码示例中，数据系列通过`yAxisIndex`属性关联对应的Y轴，`legend`用于显示图例，`tooltip`用于显示悬浮提示信息。

摘要由CSDN通过智能技术生成

效果图：

代码：

let menuData=[
				{
					name:'BS-BS-SB', //名字
					color:'#B6A476', //echart 折现颜色
					yAxisIndex:0,// 以第几个Y轴为标准
					data:[80,90,40,50,89,72,34,80,90,40,50,89] //数据
				},
				{
					name:'CS-DF-TH',
					color:'#DEDBD4',
					yAxisIndex:1,
					data:[40,50,70,20,45,77,30,60,10,60,34,59]
				},
				{
					name:'CS-DF-TH-gg',
					color:'#DEDBD4',
					yAxisIndex:2,
					data:[20,50,40,23,55,70,34,65,21,45,37,90]
				},
				{
					name:'SS-BS-HJ-wendu',
					color:'#dd3ee5',
					yAxisIndex:3,
					data:[43,134,250,470,595,672,245,50,170,790,924,271] //数据
				}
			]
			let html = ''
			let seiresData=[]
			let legend=[]
			let color=[]
			menuData.forEach(el=>{
				// html +=`<p class="detection-menu-item"><span class="detection-menu-item-line" style="background:${el.color}"></span>${el.name}</p>`
				let obj=	{
				                name: el.name,
				                type: 'line',
				                yAxisIndex: el.yAxisIndex,
				                data: el.data,
				                lineStyle: {
				                    normal: {
				                        color: el.color
				                    }
				                }
				            }
				seiresData.push(obj)
				legend.push(el.name)
				color.push(el.color)
			})
			// $(".detection-echart-menu").append(html)
			function main1(id, data) {
				var myChart = echarts.init(document.getElementById(id));
						var xAxis = ["06.01", "06.02", "06.03", "06.04", "06.05", "06.06", "06.07", "06.08", "06.09", "06.10", "06.11", "06.12"];
						var tempData = [3.0, 3.3, 5, 4.5, 4.3, 3.3, 4.3, 3.4, 3.0, 4.5, 4.0, 4.3];


				var option = {
						//默认色板
				        color: color,
						//标题，可以自定义标题的位置和样式     
						title: {
				            //text: '服务指标'
						},
						//鼠标hover提示框
				        tooltip: {
				            trigger: 'axis', //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
				            axisPointer: {  //坐标轴指示器，坐标轴触发有效，
				                type: 'cross', //默认为line，line直线，cross十字准星，shadow阴影
				                crossStyle: {
				                    color: '#fff'
				                }
				            },
							formatter:function(e){
			let htmlChild=''
								menuData.forEach(el=>{
									let curData=0
									e.forEach(item=>{
										if(el.name==item.seriesName){
											curData=item.data
										}
									})
									
									htmlChild+=`<div class="dete-echart-html-item">
						<p>${el.name}</p>
						<p><span class="dete-echart-point" style="background:${el.color}"></span>检测值：${curData}</p>
					</div>`
								})
								let html = `<div class="dete-echart-html">
				<p class="dete-echart-html-time">${e[0].axisValue}</p>
				<div class="dete-echart-html-content">
					${htmlChild}
				</div>
			</div>`
								return html
							}
				        },
				 
						//图例
				        legend: {
				            data: legend, //注意：图例的名字必须跟下面series数组里面的name一致
				            itemHeight: 9,//改变圆圈大小
				            icon: "circle",
				            textStyle: {
				                color: '#B0CEFC'  // 图例文字颜色
				            }
				        },
						//直角坐标系内绘图网格，设置表格显示区域
				        grid: {
				            x: 225, //图表左上角到左边界的距离
				            y: 78, //图表左上角到上边界的距离
				            x2: 165, //图表右下角到右边界的距离
				            y2: 46, // 图表右下角到下边界的距离
							x3: 115, //图表右下角到右边界的距离
				            y3: 26, // 图表右下角到下边界的距离
							x4: 65, //图表右下角到右边界的距离
				            y4: 6, // 图表右下角到下边界的距离
				        },
				        xAxis: [
				            {
				                type: 'category', //轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value'，
				                data: xAxis,
				                axisPointer: { //坐标轴指示器
				                    type: 'shadow'  //在tooltip的cross基础上，增加阴影类型的X轴指示器
				                },
								//坐标轴文字标签
				                axisLabel: {
				                    show: true, //如果为false，则X轴不显示文字标签
				                    textStyle: {
				                        color: '#B0CEFC',
				                    }
				                },
				            },
				        ],
				        yAxis: [
							//第一个Y轴
				            {
				                position:'left',
								type: 'value', //轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value'，
				                name: '度',
				                // interval: 1,  //Y轴间隔
								//坐标轴文本样式，nameTextStyle和axisLabel区别是，前者管坐标轴顶端文字（坐标轴标题），或者管轴上断点的文字标签
				                nameTextStyle: {
				                    color: '#B0CEFC',
				                    padding: 10 //内边距
				                },
								//坐标轴文字标签
				                axisLabel: {
				                    show: true,
				                    textStyle: {
				                        color: '#B0CEFC',
				                    }
				                },
								//坐标轴线
				                axisLine: {
				                    show: true
				                },
				            },
							
				            //第二个Y轴在左边，距离第一个Y轴50像素
				            {
				            	position:'left',
				            	offset:35, //距离第一个Y轴50像素，注意grid: x=85，给第三个Y轴预留空间
				            	type: 'value',
				                name: 'ML',
				                //不设置min、max、interval，坐标浮动处理
				                nameTextStyle: {  //坐标轴文字样式
				                    color: '#B0CEFC',
				                    padding: 10
				                },
				                axisLabel: {
				                    show: true,
				                    textStyle: {
				                        color: '#B0CEFC',
				                    }
				                },
								//坐标轴线
				                axisLine: {
				                    show: false
				                },
				                //分割线
				                splitLine: {
				                    show: false,                    
				                }
				            },
							{
				            	position:'left',
				            	offset:80, //距离第一个Y轴50像素，注意grid: x=85，给第三个Y轴预留空间
				            	type: 'value',
				                name: 'RH',
				                //不设置min、max、interval，坐标浮动处理
				                nameTextStyle: {  //坐标轴文字样式
				                    color: '#B0CEFC',
				                    padding: 10
				                },
				                axisLabel: {
				                    show: true,
				                    textStyle: {
				                        color: '#B0CEFC',
				                    }
				                },
								//坐标轴线
				                axisLine: {
				                    show: false
				                },
				                //分割线
				                splitLine: {
				                    show: false,                    
				                }
				            },
							{
				            	position:'left',
				            	offset:125, //距离第一个Y轴50像素，注意grid: x=85，给第三个Y轴预留空间
				            	type: 'value',
				                name: '℃',
				                //不设置min、max、interval，坐标浮动处理
				                nameTextStyle: {  //坐标轴文字样式
				                    color: '#B0CEFC',
				                    padding: 10
				                },
				                axisLabel: {
				                    show: true,
				                    textStyle: {
				                        color: '#B0CEFC',
				                    }
				                },
								//坐标轴线
				                axisLine: {
				                    show: false
				                },
				                //分割线
				                splitLine: {
				                    show: false,                    
				                }
				            },
							
				        ],
				        series: [
							...seiresData
							
				        ]
				    };
				myChart.setOption(option);
			}

注意点：选择以第几个Y轴为标准要用seires中的yAxisIndex设置，参考链接https://blog.csdn.net/qiudechao1/article/details/97402776?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_baidulandingword-1&spm=1001.2101.3001.4242