近期需要做一个鼠标拖动完成油表盘数值改变的功能，使用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. [The Annotated Transformer] Iterators

    Iterators 对torchtext的batch实现的修改算法原理 Batching matters a ton for speed. We want to have very evenly di ...

  2. 使用R进行方差分析

    eff=c(58.2,52.6,56.2,41.2,65.3,60.8,49.1,42.8,54.1,50.5,51.6,48.4,60.1,58.3,70.9,73.2,39.2,40.7,75.8 ...

  3. 实现一个成熟的底层毛玻璃效果（纯CSS）

    写在前面 毛玻璃背景是一个很常见的网页样式,想要实现,其实并不难,但经过我在网上的搜索发现,大量实现方法都较为不规范,且把问题复杂化了(例如各种z-index属性和position的定位)现提供一个代 ...

  4. echarts_02

    1. 如果数据加载时间较长,一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了,因此需要一个 loading 的动画来提示用户数据正在加载. ECharts 默认有提供了一个简单的加载动画. ...

  5. cmd 查看域名对应的 IP

    1.cmd nslookup 2.输入 域名,例如:www.baidu.com

  6. SQLServer2012R2部署手册

    1. 安装软件.net framework3.5 1.在安装SQL SERVER 2012前需要3.5的支持.在WIN 2012系统可以在系统管理的添加角色和功能中安装,如下将[.NET Framew ...

  7. heigth innerheigt outerheight详解

    height() :height innerHeight(): height + paddingouterHeight(): height + padding + border outerHeight ...

  8. Win10卸载预装应用

    Win10的预装应用大多数都比较鸡肋,没啥用,喜欢纯净的系统的朋友可以将其卸载掉. 1.以管理员身份启动powershell,键入命令[Get-AppxPackage | Select Name, P ...

  9. 在Tomcat中配置MySQL数据源

    打开context.xml文件,路劲为:apache-tomcat-7.0.61\conf,添加如下代码: <Resource auth="Container" driver ...

  10. 代码实现:取一个整数a从右端开始的4～7位

    import java.util.Scanner; //取一个整数a从右端开始的4-7位. public class Test { public static void main(String[] a ...