echarts 儀表板指針點擊事件

 var gauge = document.getElementById('gauge');
    var myChart = echarts.init(gauge);
    var { width, height } = getComputedStyle(gauge);
    // 計算出中心點位置
    var x = parseInt(width.slice(0, -2), 0) / 2;
    var y = parseInt(height.slice(0, -2), 0) / 2;
    var maxAngle = 180;
    var minAngle = 0;
    var maxValue = 100;
    var dataRatio = maxValue / maxAngle;
    var option = {
        animation: false,
        series: [{
            name: '業務指標',
            type: 'gauge',
            startAngle: maxAngle, 
            endAngle: minAngle, 
            detail: {formatter:'{value}%'},
            data: [{value: 50, name: '完成率'}]
        }]
    };
    myChart.setOption(option);
    
    function changeValue(event) {
        var x2 = event.offsetX;
        var y2 = event.offsetY;
        // 當前點擊位置的角度.
        var currentAngle = Math.atan2(y - y2, x - x2) * 180 / Math.PI;
        // 邊界處理
        if (currentAngle < minAngle || currentAngle > maxAngle) {
            let _angle = Math.abs(currentAngle);
            if (_angle > 90) {
                currentAngle = maxAngle;
            } else {
                currentAngle = minAngle;
            }
        }
        // 轉換回數據值, 這里就是實際的值, 默認保留2位小數, 需要傳給后台.
        let value = (currentAngle * dataRatio).toFixed(2);
        option.series[0].data[0].value = value;
        myChart.setOption(option);
    }

    myChart._zr.on('mousedown', function(event) {
        changeValue(event);
        myChart._zr.on('mousemove', changeValue);
    });
    myChart._zr.on('mouseup', function(event) {
        myChart._zr.off('mousemove', changeValue);
    });