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);
        });
    
    -------------------------------------------------------------------------
    ## 极客时间全网最便宜最优惠购买方式,优惠券返现 百度网盘 微信关注公众号“选门好课”
    扫描下方二维码关注我的公众号"选门好课",与我一起交流知识
  • 相关阅读:
    Docker安装IBM MQ
    Spark On Yarn搭建及各运行模式说明
    Hadoop2.0之YARN组件
    HBase记录
    Spark对接Kafka、HBase
    SparkStreaming个人记录
    Java解决异常之try、catch、finally、throw、throws&log4j记录日志步骤
    Java访问权限修饰符public protected friendly private用法总结(转载好文Mark)
    租赁车辆(多车)程序
    考试答案对应
  • 原文地址:https://www.cnblogs.com/singworld/p/14831288.html
Copyright © 2011-2022 走看看