zoukankan      html  css  js  c++  java
  • 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);
        });
    
    -------------------------------------------------------------------------
    ## 极客时间全网最便宜最优惠购买方式,优惠券返现 百度网盘 微信关注公众号“选门好课”
    扫描下方二维码关注我的公众号"选门好课",与我一起交流知识
  • 相关阅读:
    此心本净四——圣言录·下·平等无分别
    此心本净三——圣言录·中·空性
    一饮一啄,自成因果
    心为何而动······
    此心漂泊
    喜欢看心的幻化
    (js描述的)数据结构[集合结构](6)
    (js描述的)数据结构[双向链表](5)
    (js描述的)数据结构[链表](4)
    微信小程序(黑马优购)完成!!{10天}
  • 原文地址:https://www.cnblogs.com/singworld/p/14831288.html
Copyright © 2011-2022 走看看