近期需要做一个鼠标拖动完成油表盘数值改变的功能，使用canvas感觉太麻烦，而且指针不太好监听和拖动，只能另谋出路，在网上参考了某位大神的操作，最终选择了echats来解决这个问题。废话不多说，直接上代码。

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>ECharts练习</title>
<script type="text/javascript" src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.js"></script>
</head>

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var gauge = document.getElementById('main');
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 = {
title: {
text: '业务指标', //标题文本内容
},
toolbox: { //可视化的工具箱
show: true
},
tooltip: { //弹窗组件
formatter: "{a} <br/>{b} : {c}%"
},
series: [{
name: '业务指标',
type: 'gauge',
detail: {
formatter: '{value}%'
},
data: [{
value: 45,
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);
}
// 这里使用 zrender 的事件监听可以监听到画布的所有鼠标事件.
console.log(myChart);
myChart._zr.on('mousedown', function(event) {
changeValue(event);
myChart._zr.on('mousemove', changeValue);
});
myChart._zr.on('mouseup', function(event) {
myChart._zr.off('mousemove', changeValue);
})
</script>
</body>

</html>

直接ctrl+c->ctrl+v即可看效果。

echats 油表盘 鼠标拖动指针改变数值的更多相关文章

  1. extjs grid禁止表格头部使用鼠标拖拽改变宽度

    extjs6 经典版 表格头部使用鼠标拖动 禁止改变列的宽度 只需要给grid 设置属性enableColumnResize:false就可以啦 xtype:'grid', enableColumnR ...

  2. jQuery实现鼠标拖动改变Div高度

    最近项目中需要在DashBoard页面做一个事件通知栏,该通知栏固定位于页面底部,鼠标拖动该DIV实现自动改变高度扩展内容显示区域. 以下是一个设计原型,基于jQuery实现,只实现了拖动效果,没有做 ...

  3. CSharpGL(39)GLSL光照示例：鼠标拖动太阳（光源）观察平行光的漫反射和镜面反射效果

    CSharpGL(39)GLSL光照示例:鼠标拖动太阳(光源)观察平行光的漫反射和镜面反射效果 开始 一图抵千言.首先来看鼠标拖动太阳(光源)的情形. 然后是鼠标拖拽旋转模型的情形. 然后我们移动摄像 ...

  4. unity3d用鼠标拖动物体的一段代码

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 这是一段拖动物体的代码,比较简洁明了,对了解uni ...

  5. Qt：无标题栏无边框程序的拖动和改变大小

    From: http://blog.csdn.net/kfbyj/article/details/9284923 最近做项目遇到的问题,总结下. 有时候我们觉得系统的标题栏和按钮太丑太呆板,想做自己的 ...

  6. as3用鼠标拖动图形拼图——灰常简单的教程

    话说这种效果在课件里面经常用到,鼠标拖动事件,一个运用很频繁的事件,一起学习学习吧 首先SWF贡献给大家看看效果 感觉咋样,原理其实还蛮简单的,做做试试吧 下面来看看源码吧 package { imp ...

  7. 在chrome下鼠标拖动层变文本形状的问题

    学JQ也有一段时间了,想自己写个鼠标拖动层移动的效果(很简单,只是为了练习而已)于是就写下了下面的代码 <!DOCTYPE html> <html> <head> ...

  8. MFC 无边框窗体实现用鼠标拖动窗体边缘实现窗体大小变化

    无边框窗体如何实现用鼠标拖动窗体边缘实现窗体大小变动呢?下面介绍一种方法,通过以下几个步骤即可实现: 1.实现WM_NCHITTEST消息,实现四条边框的模拟 2.实现WM_NCLBUTTONDOWN ...

  9. Qt 无标题无边框程序的拖动和改变大小

    最近做项目遇到的问题,总结下. 有时候我们觉得系统的标题栏和按钮太丑太呆板,想做自己的标题栏以及最大化.最小化.关闭,菜单按钮,我们就需要 setWindowFlags(Qt::FramelessWi ...

随机推荐

  1. Unity3D_(API)Quaternion四元数中的Quaternion.LookRotation()

    四元数百度百科: 传送门 四元数官方文档: 传送门 欧拉旋转.四元数.矩阵旋转之间的差异: 传送门 四元数转换为欧拉角eulerAngles 官方文档: 传送门 欧拉角转换为四元数Euler 官方文档 ...

  2. idea 更新后和新的直接安装前，都需要配置 idea64.exe.vmoptions 后再使用

    配置合适的参数提升性能,默认的性能不高

  3. CopyOnWriteArrayList使用

    1.在遍历操作数量大大超过可变操作是(add,set等等)使用.原因是其可变操作是通过对底层数据进行一次新的复制来实现的. 2.迭代器创建后,其不会反应列表的添加.移除或更改.其迭代器是”快照“风格的 ...

  4. 一、基础篇--1.1Java基础-什么是java的序列化和反序列化

     什么是序列化和反序列化 序列化:把堆内存中的java对象数据,通过某种方式把对象存储到磁盘文件或者传递给其他网络节点.这个过程称为序列化.简单来说呢,就是将对象转换成二进流的过程. 反序列化:把磁盘 ...

  5. OpenCV学习笔记(7)——图像阈值

    简单阈值,自适应阈值,Otsu's二值化等 1.简单阈值 当像素值高于阈值时,我们给这个像素赋予一个新值,否则给他赋予另一个值.这个函数就是cv2.threshhold().这个函数的第一个参数就是原 ...

  6. 代码代码:输入两个正整数m和n，求其最大公约数和最小公倍数。15 20 5

    import java.util.Scanner; //输入两个正整数m和n,求其最大公约数和最小公倍数.15 20 5 public class Test { public static void ...

  7. flutter image_picker

    点击选中图片,底部弹窗让用户选择使用相册还是相机,用户选中选项后,跳转到对应的相册或者相机功能,结果将图片显示出来 image_picker: ^0.6.1+4 iOS使用image_picker需要 ...

  8. nginx不记录指定文件类型的日志

    1.指定记录文件日志记录的内容. vim /usr/local/nginx/conf/nginx.conf如下部分: log_format dd '$remote_addr $http_x_forwa ...

  9. enumerable 可枚举 属性

    一个对象的可枚举属性会在for...in中被访问到 (或是类似的迭代方法, Object.keys() 如果一个属性不是可枚举的,循环会忽略这个属性 var obj = { key: 'val' }; ...

  10. RabbitMQ问题解决

    1.访问http://localhost:15672/#/,输入用户名.密码登录报错500 解决方法:在快捷程序处找到RabbitMQ Service -stop停止服务,然后再点击RabbitMQ ...