ECharts 支持常規的鼠標事件類型，包括 'click'、'dblclick'、'mousedown'、'mousemove'、 'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu' 事件。下面先來看一個簡單的點擊柱狀圖后打開相應的百度搜索頁面的示例。
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts-en.common.js"></script> //引入在線 </head> <body>
<div id="demo1" style="width: 600px; height:400px"> </div> </body> <script type="text/javascript"> // 基於准備好的dom，初始化echarts實例 var demo1 = echarts.init(document.getElementById('demo1')); // 指定圖表的配置項和數據 var option = { title: { text: 'ECharts 入門示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用剛指定的配置項和數據顯示圖表。 demo1.setOption(option);
//注冊事件 demo1.on('click', function (params) { //params包含很多的信息 下標索引 如橫坐標名稱 對應的值 console.log("click",params); }); //ECharts 支持常規的鼠標事件類型，包括 'click'、'dblclick'、'mousedown'、'mousemove'、 // 'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu' 事件。下面先來看一個簡單的點擊柱狀圖后打開相應的百度搜索頁面的示例。 </script>
