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

    看看就好了(滑稽) 数据结构 栈 栈 单调栈 队列 一般队列 优先队列/单调队列 循环队列 双端队列 链表 一般链表 循环链表 双向链表 块状链表 十字链表 邻接表/邻接矩阵 邻接表 邻接多重表 Ha ...

  2. axios多并发请求

    场景: 点击导出Excel按钮实现,姓名列表中前五个的所有的文章数据发送给后端,姓名列表中点击过的数据会被存放到localStorage中: 思路: 点击导出按钮,把前五个数据逐个和localStor ...

  3. react属性之exact

    exact是Route下的一个属性,react路由会匹配到所有能匹配到的路由组件,exact能够使得路由的匹配更严格一些. exact的值为bool型,为true时表示严格匹配,为false时为正常匹 ...

  4. ASP.NET图片防盗链（使用一般处理程序）

    <img src="你的一般处理程序的地址"/> context.Response.ContentType = "image/jpeg"; Uri ...

  5. Android 编程下Touch 事件的分发和消费机制和OnTouchListener，OnClickListener和OnLongClickListener的关系

    1.事件分发:public boolean dispatchTouchEvent(MotionEvent ev) Touch 事件发生时 Activity 的 dispatchTouchEvent(M ...

  6. C++类继承方式及实践

    直接上图: 以及: 实践如下: #include <iostream> using namespace std; class Father{ private: int father1; i ...

  7. C# NAudio 变声

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  8. leetcode227 基本计算器

    1先利用符号栈转化为逆波兰表达式,并添加‘,’作为一个数字的结尾: 2然后利用数字栈计算逆波兰表达式的值: class Solution { public: int calculate(string ...

  9. Linux_Ubuntu之用户目录

    位于/home/user,称之为用户工作目录或家目录,表示方式: /home/user ~

  10. Exceptionless安装的一些坑

    零．参考网站: https://www.cnblogs.com/zgshi/p/9152196.html 博客园上介绍.基本上介绍了如何安装和放到IIS上面. https://www.cnblogs. ...