天天看點

echarts雙Y軸分兩側顯示及點選事件

想要兩個Y軸坐标分兩側顯示,需要将第二個series的yAxisIndex設定為大于0的數,因為以0為起點

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 為ECharts準備一個具備大小(寬高)的Dom -->
    <center><div id="main" style="width: 600px;height:400px;"/></center>
    <script type="text/javascript">
        // 基于準備好的dom,初始化echarts執行個體
        var myChart = echarts.init(document.getElementById('main'));


        // 指定圖表的配置項和資料
        var option = {
            title: {
                text: '雙坐标軸事例',   //标題
				show:true				//是否顯示标題
            },
            tooltip: {						//	氣泡
				trigger: 'axis',
				formatter:'{b}<br/>{a0}:{c0}件<br/>{a1}:{c1}%', //b為資料名;a0,a1為系列名,c0為y軸左側資料,c1為右側
                axisPointer : {            // 坐标軸訓示器,坐标軸觸發有效
                    type : 'shadow'        // 預設為直線,可選為:'line' | 'shadow'
                }
			},
            legend: {						//圖例
                data:['銷量','增長率']
            },
            xAxis: {
			  type : 'category',
                    data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
                   
                },
            yAxis: [
				{
					type : 'value',
					name : '銷量',
					axisLabel : {
						formatter: '{value} 件'
					}
				},
				{
					type : 'value',
					name : '增長率',
					axisLabel : {
						formatter: '{value} %'
					}
				}],
            series: [
				{
					name: '銷量',
					type: 'bar',							//柱狀圖
					data: [5, 20, 36, 10, 10, 20]
				},
				{
					name: '增長率',
					type: 'line',							//線形圖
					yAxisIndex:'1',							//使坐标軸在右側顯示,當有多個坐标軸時,數字依次增大,可建立多個Y軸
					data: [0, 300, 80, -72, 0, 100]
				}
			]
        };
        // 使用剛指定的配置項和資料顯示圖表。
        myChart.setOption(option);
		
		myChart.on('click', function (params) {
			alert(
			'我是系列序号:params.seriesIndex'+params.seriesIndex+'\n'+
			'我是數值序列:params.dataIndex'+params.dataIndex+'\n'+
			'我是圖例:params.seriesName'+params.seriesName+'\n'+
			'我是X軸:params.name'+params.name+'\n'+
			'我是Y軸:params.data'+params.data+'\n'+
			'我是Y軸值:params.value'+params.value
			);
		});
    </script>
</body>
</html>
           
echarts雙Y軸分兩側顯示及點選事件

繼續閱讀