echarts添加點擊事件

由於工作需要，需要用echarts 進行展示圖表，卻又個新的需求，要點擊展示的地方，同時下面出現table展示內容

如圖所示：

一開始找了好多博客，發現都不好用，大部分都是用到了
var ecConfig = require('echarts/config');
其實是echats2中的。

實現步驟：

• echart所在的div增加事件（onmousedown = "mousedown()"）

					<div class="chart swiper-slide">
						<div id="main" onmousedown = "mousedown()"></div>
					</div>

• 寫js方法，在tooltip中增加回調函數賦值（需要聲明一個全局變量Xindex 來接收x軸點擊的處的值）

tooltip : {
			trigger : 'axis',
			axisPointer : { // 坐標軸指示器，坐標軸觸發有效
							type : 'shadow' // 默認為直線，可選為：'line' | 'shadow'
						},
			formatter:function(params){
					var html = '';
					if(params.length>0){
						Xindex = params[0].dataIndex;
						for ( var int = 0; int < params.length; int++) {
						html+=params[int].seriesName+':'+params[int].data+'<br>';
							}
					}
					return html;
								
					}
						
			},

官方對回調函數的介紹

• 鼠標事件中增加相應

			mousedown:function(){

			    	console.log(Xindex);
			    	//TODO
			    	
			    	

			},

現在我已經實現了，點擊陰影區域任何一個點，改變下面的值。

如果你只想點擊點來進行觸發事件，則要更簡單，在設置option 前面增加

					myChart.on('click', function (params) {

                  //TODO
				    
					});

希望可以幫助到大家！玩的開心！