echarts多图多轴

本文详细介绍如何使用ECharts插件创建包含多个X轴和Y轴的复杂图表,并自定义悬浮窗显示内容,通过具体代码示例展示了图表的布局、图例、数据系列等关键配置。

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

使用echarts插件制作多x轴多y轴图、自定义悬浮窗内容

渲染之后的样子是:
一次echarts渲染完成两个图

echarts的option设置

option = {
	    tooltip: { //鼠标划入的指示器样式
	        trigger: 'item',
	        axisPointer: {
	            type: 'cross',
	            crossStyle: {
	                color: '#999'
	            }
	        }
	    },
	     title: [{
	        text: '图一标题:',
	        x: 'left',
	    },{
	        text: '图二标题:',
	        x:'50%'
	    }],
	    grid: [//表示有两个图(表示两个x轴) 重点一
	        {x: '7%', y: '7%', width: '38%',top:80},
	        {x2: '7%', y: '7%', width: '38%',top:80}
	    ],
	    legend: {
	    	top:30,//图例距离上边框的距离
	    },
		//xAxis与yAxis的数量依赖于grid属性中定义的数组长度  重点二
		//其中,gridIndex指的是该轴归属于grid数组中的第几个元素
	    xAxis: [ //x轴的设置,因type为category(类目轴),所以data是必须要有的
	        {
	            type: 'category',
	            gridIndex:0,
	            data: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月'],
	            axisPointer: {
	                type: 'shadow'
	            }
	        },
	        {
	            type: 'category',
	            gridIndex:1,
	            data:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月'],
	            axisPointer: {
	                type: 'shadow'
	            }
	        }
	    ],
	    yAxis: [ //y轴设置,每个x轴对应两个y轴,所以共有4个y轴
	        {
	            type: 'value',
	            gridIndex: 0,
	            name: '总金额'
	        },
	        {
	            type: 'value',
	            name: '总累计占比',
	            gridIndex: 0,
	            axisLabel: {
	                formatter: '{value}%'
	            }
	        },
	        {
	            type: 'value',
	            name: '单金额',
	            gridIndex: 1
	        },
	        {
	            type: 'value',
	            name: '单累计占比',
	            gridIndex: 1,
	            axisLabel: {
	                formatter: '{value}%'
	            }
	        }
	    ],
		//重点三
		//每个数据都应设置xAxisIndex和yAxisIndex。用于告诉echarts该数据渲染时依靠的轴
	    series: [
	        {
	            name:'总金额',
	            type:'bar',
	            xAxisIndex: 0,
            	yAxisIndex: 0,
				data:charData.bar,
				//用于自定义悬浮窗上展示的内容。
				/*tooltip:{
					formatter:function(params){
						//自定义悬浮窗上展示的内容的时候。图例的样式。用于展示
						//该样式来源于params
						var bar = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#c23531;"></span>';
						var line = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#2f4554;"></span>';
						return "总金额<br />"+bar+
							params.data.name+":"+params.data.text+
							"<br/>" + line + charData.line[params.dataIndex].name + 
							":"+ charData.line[params.dataIndex].text;
					}
				}*/
	        },
	        {
	            name:'总累计占比',
	            type:'line',
	            xAxisIndex: 0,
            	yAxisIndex: 1,
				data:charData.line,
				/*tooltip:{
					formatter:function(params){
						var bar = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#c23531;"></span>';
						var line = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#2f4554;"></span>';
						return "总累计占比<br />"+line+
							params.data.name+":"+params.data.text+
							"<br/>" + bar + charData.bar[params.dataIndex].name + 
							":"+ charData.bar[params.dataIndex].text;
					}
				}*/
	        },
	        {
	            name:'单金额',
	            type:'bar',
	            xAxisIndex: 1,
            	yAxisIndex: 2,
				data:charData.bar1,
				/*tooltip:{
					formatter:function(params){
						var bar = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#61a0a8;"></span>';
						var line = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#d48265;"></span>';
						return "单金额<br />"+bar+
							params.data.name+":"+params.data.text+
							"<br/>" + line + charData.line[params.dataIndex].name + 
							":"+ charData.line[params.dataIndex].text;
					}
				}*/
	        },
	        {
	            name:'单累计占比',
	            type:'line',
	            xAxisIndex: 1,
            	yAxisIndex: 3,
				data:charData.line1,
				/*tooltip:{
					formatter:function(params){
						var bar = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#61a0a8;"></span>';
						var line = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#d48265;"></span>';
						return "单累计占比<br />"+line+
							params.data.name+":"+params.data.text+
							"<br/>" + bar + charData.bar[params.dataIndex].name + 
							":"+ charData.bar[params.dataIndex].text;
					}
				}*/
	        }
	    ]
	}
ECharts支持设计,可以实现在同一个表中显示多个不同坐标系的数据。 首先,需要在option中定义多个坐标系,每个坐标系可以有自己的线和数据。可以使用`grid`属性来定义多个坐标系,每个坐标系可以使用不同的`id`来区分,例如: ```javascript option = { grid: [ {id: 'grid1', top: '10%', bottom: '60%'}, {id: 'grid2', top: '70%', bottom: '10%'} ], xAxis: [ {gridIndex: 0, data: ['A', 'B', 'C']}, {gridIndex: 1, data: ['D', 'E', 'F']} ], yAxis: [ {gridIndex: 0}, {gridIndex: 1} ], series: [ {type: 'line', data: [1, 2, 3], xAxisIndex: 0, yAxisIndex: 0}, {type: 'bar', data: [4, 5, 6], xAxisIndex: 1, yAxisIndex: 1} ] }; ``` 上面的代码定义了两个坐标系,分别使用`id`为`grid1`和`grid2`来区分。第一个坐标系包含一条折线,使用第一个`xAxis`和`yAxis`。第二个坐标系包含一个柱状,使用第二个`xAxis`和`yAxis`。 注意,每个系列需要指定对应的`xAxisIndex`和`yAxisIndex`,以确定它们在哪个坐标系中显示。 除此之外,ECharts还支持在同一个坐标系中使用多个线。可以使用`xAxis`和`yAxis`数组来定义多个线,例如: ```javascript option = { xAxis: [ {type: 'value'}, {type: 'value'} ], yAxis: [ {type: 'value'}, {type: 'value'} ], series: [ {type: 'line', data: [1, 2, 3], xAxisIndex: 0, yAxisIndex: 0}, {type: 'line', data: [4, 5, 6], xAxisIndex: 1, yAxisIndex: 1} ] }; ``` 上面的代码定义了两个横和两个纵,分别使用`xAxis`和`yAxis`数组来区分。第一个折线使用第一个横和第一个纵,第二个折线使用第二个横和第二个纵。 希望这些示例能够帮助你理解ECharts设计的用法。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值