echarts圖表關聯案例

echarts是非常好用的圖表插件，echarts官網：http://echarts.baidu.com/index.html

需求：展示資料比較多，放在一個圖不好展示，體驗不好，是以用兩個圖進行關聯展示，X軸資料一樣

我封裝成了一個方法，直接傳資料進去調用即可，代碼：

function calltrend_view(xdata,callQuantity,successRate,failureRate,zoomSize){	
	// 基于準備好的dom，初始化echarts執行個體
	var myChart1 = echarts.init(document.getElementById('calltrend_view1'));
	var myChart2 = echarts.init(document.getElementById('calltrend_view2'));
	// 指定圖表的配置項和資料
		option1 = {
			title: {
				text: '',
				subtext: ''
			},
			tooltip: {
				trigger: 'axis',
				backgroundColor : 'rgba(255, 255, 255, 0.9)',
        		borderColor : 'rgb(222, 222, 222)',
        		borderRadius : 4,
        		borderWidth: 1,
        		textStyle : {
		            color: '#666',
		            decoration: 'none',
		            fontSize: 12
		        },
		        formatter: function (params){
		            return params[0].name + '<br/>'
		                   + params[0].seriesName + ' : ' + params[0].value+'ms';
		        }           
			},
			legend: {
				data: ["調用成功平均耗時"],
				x: '40px'
			},
			dataZoom : {
			    show : false,
			    realtime : true,
			    start : 0,
			    end : zoomSize
			},
			grid: {
		        y: 80
		    },
			xAxis: {
				type: 'category',
				data : xdata,
				splitLine : {
	                show:false
	            },
            	axisTick : {
                	show:false
               	},
				axisLabel: { //X軸刻度配置
					interval:'auto',//0：表示全部顯示不間隔；auto:表示自動根據刻度個數和寬度自動設定間隔個數
					formatter: '{value}',
	                textStyle: {
	                    color: '#999999',
	                    fontSize: 12
	                }
				}
			},
			yAxis: [
		        {
		            type: 'value',
		            axisLine:{
						show:false
					},
					splitLine : {
		                show:true,
		                lineStyle: {
		                    color: '#e5e5e5',
		                    type: 'dashed',
		                    width: 1
		                }
		            },
					axisTick : {
                		show:false
                	},
                	axisLabel: {
						interval:'0',
						formatter: '{value}',
		                textStyle: {
		                    color: '#999999',
		                    fontSize: 12
		                }
					}
		        }
			],
			series: [
	        	
	        	{
	           	 	name:'調用成功平均耗時',
		            type:'line',
		            data:failureRate,
		            markPoint : {
		                data : [
		                    {type : 'max', name: '最大值'},
		                    {type : 'min', name: '最小值'}
		                ]
		            },
		            
		            itemStyle: {
					    normal: {
					        color:'#4466ee'
					    }
					},
					barCategoryGap :'50%'
	        	}
			]
	};
	option2 = {
		tooltip: {
			trigger: 'axis',
			backgroundColor : 'rgba(255, 255, 255, 0.9)',
        	borderColor : 'rgb(222, 222, 222)',
        	borderRadius : 4,
        	borderWidth: 1,
        	textStyle : {
		        color: '#666',
		        decoration: 'none',
		        fontSize: 12
		    },
		    formatter: function (params){
		        return params[0].name + '<br/>'
		            + params[0].seriesName + ' : ' + params[0].value+'' + '<br/>'
		            + params[1].seriesName + ' : ' + params[1].value+'%' + '<br/>'
		            + params[2].seriesName + ' : ' + params[2].value+'%';
		    }
		},
		legend: {
			data: ["調用量","成功率","有效率"],
			x: '40px'
		},
		dataZoom : {
		    show : true,
		    realtime : true,
		    start : 0,
		    end : zoomSize
		},
		xAxis: {
			type: 'category',
			data : xdata,
			splitLine : {
	            show:false
	        },
            axisTick : {
               	show:false
            },
			axisLabel: { //X軸刻度配置
				interval:'auto',//0：表示全部顯示不間隔；auto:表示自動根據刻度個數和寬度自動設定間隔個數
				formatter: '{value}',
	            textStyle: {
	                color: '#999999',
	                fontSize: 12
	            }
			}
		},
		yAxis: [
			{
		        type:'value',
				splitLine : {
	                show:false
	            },
				axisLine:{
					show:false
				},
				axisTick : {
                	show:false
                },
                axisLabel: {
					interval:'0',
					formatter: '{value}',
		            textStyle: {
		                color: '#999999',
		                fontSize: 12
		            }
				}
		    },
		    {
		        type: 'value',
		        axisLine:{
					show:false
				},
				splitLine : {
		            show:true,
		            lineStyle: {
		                color: '#e5e5e5',
		                type: 'dashed',
		                width: 1
		            }
		        },
				axisTick : {
                	show:false
                },
                axisLabel: {
					interval:'0',
					formatter: '{value}',
		            textStyle: {
		                color: '#999999',
		                fontSize: 12
		            }
				}
		    }
		],
		series: [
			{
		        name:'調用量',
		        type:'bar',
		        data:callQuantity,
		        markPoint : {
		            data : [
		                {type : 'max', name: '最大值'},
		                {type : 'min', name: '最小值'}
		            ]
		        },
		           
		        itemStyle: {
					normal: {
					    color:'#69a3ec',
					    barBorderRadius:[5, 5, 0, 0]
					 }
				},
				barCategoryGap :'50%'
	        },
	        {
		        name:'成功率',
		        type:'line',
		        yAxisIndex: 1,
		        data:successRate,
		        markPoint : {
		            data : [
		                {type : 'max', name: '最大值'},
		                {type : 'min', name: '最小值'}
		            ]
		        },
		             
		        itemStyle: {
					normal: {
					    color:'#ee6276'
					}
				},
				barCategoryGap :'50%'
	        },
	        {
	           	name:'有效率',
		        type:'line',
		        yAxisIndex: 1,
		        data:failureRate,
		        markPoint : {
		            data : [
		                {type : 'max', name: '最大值'},
		                {type : 'min', name: '最小值'}
		            ]
		        },
		            
		        itemStyle: {
					normal: {
					    color:'#9587dc'
					}
				},
				barCategoryGap :'50%'
	        }
		]
	};
	
	// 使用剛指定的配置項和資料顯示圖表。
	myChart1.setOption(option1);
	myChart2.setOption(option2);
        // 兩個圖表進行關聯
        myChart1.connect([myChart2]);
   	myChart2.connect([myChart1]);

	setTimeout(function (){
	    window.onresize = function () {
	        myChart1.resize();
	        myChart2.resize();
	    }
	},200)
};
           

效果圖：

拖動dataZoom,兩個表會同步關聯

希望對大家有所幫助。。。