让Echarts仪表盘指针可拖动

 

Echarts 的仪表盘事件默认只能作用在指针上. 如果我们希望通过监听鼠标事件来控制指针的值, 可以通过 Echarts 底层的渲染引擎 zrender 来间接实现. 实现思路主要是通过获取到仪表盘中心点的位置, 和鼠标点击/移动的位置, 来计算出倾角, 再和数据进行一个转换, 重新设置到data上即可.

一个拖动指针的例子

    // 拿到画布元素
    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 minAngle = 0;
    var maxAngle = 180;
    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: &