echarts多图多轴

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

渲染之后的样子是：

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;
					}
				}*/
	        }
	    ]
	}