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);
        });
    
    -------------------------------------------------------------------------
    ## 极客时间全网最便宜最优惠购买方式,优惠券返现 百度网盘 微信关注公众号“选门好课”
    扫描下方二维码关注我的公众号"选门好课",与我一起交流知识
  • 相关阅读:
    (转)Android IPC机制详解
    (转)android 多线程
    (转)android进程间通信:使用AIDL
    (转)如何调用SQLITE工具查看数据库
    (转)Android 自动 打包
    (转)如何手动编译一个APK
    (转)编译Android源码的全过程
    Js打造层拖动实例:网站菜单拖拽移位效果
    JS鼠标悬停时动态翻滚的紫色导航条
    jQuery1.3.2竖向的伸缩菜单
  • 原文地址:https://www.cnblogs.com/singworld/p/14831288.html
Copyright © 2011-2022 走看看