Echarts 監聽滑鼠右鍵或者雙擊

pimkle發表於2019-01-03
Echarts

1、監聽 contextmenu

官方文件(注意切換引用控制元件所對應版本的文件)
ECharts 中的事件和行為

引用官方文件示例程式碼：

// 基於準備好的dom，初始化ECharts例項
var myChart = echarts.init(document.getElementById('main'));

// 指定圖表的配置項和資料
var option = {
    xAxis: {
        data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
    },
    yAxis: {},
    series: [{
        name: '銷量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};
// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption(option);
// 處理點選事件並且跳轉到相應的百度搜尋頁面
myChart.on('click', function (params) {
    window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
});
複製程式碼

2、遮蔽 右鍵預設事件

params.event.event.preventDefault();
複製程式碼

ps: 任意事件遮蔽預設都效此法。唯獨 tree[樹] click 收攏展開無效。

3、監聽 雙擊 dblclick

監聽方法雷同 右鍵的 contextmenu
但是如果在 tree樹 裡的話，點一下，就會觸發收攏，第二下使用者根本點不了
解決方案是新增動畫延遲 300 ms，讓使用者有時間點第二下，當然可以主張把雙擊改成右鍵響應咯：

series: [{
    animationDelayUpdate: 300
}]
複製程式碼

相關文章