近期需要做一个鼠标拖动完成油表盘数值改变的功能，使用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. echarts 有关饼形图和map的使用技巧1(饼图)

    http://blog.csdn.net/yhn1121/article/details/52041742 先上个链接,百度无意间搜到的,写得比我全面,可以直接飞去看它: 之前写网页用过echarts ...

  2. python虚环境

    有的项目使用tornado框架比较好,有的用Django框架比较好,容易发生冲突,这个时候可以建立一个虚拟的python环境. 安装virtualenv包 进入项目所在目录,执行命令 virtuale ...

  3. Zookeeper入门(五)之Linux环境下Zookeeper安装

    本文参考地址为:http://www.mamicode.com/info-detail-2243059.html1.安装wget http://archive.apache.org/dist/zook ...

  4. div随窗口变化设置高度

    window.onscroll = function () { sc(); }; window.onresize = function () { sc(); }; window.onload = fu ...

  5. GreyMagic

    hearthbuddy中的一段代码 // Token: 0x06001A79 RID: 6777 RVA: 0x000DD024 File Offset: 0x000DB224 internal In ...

  6. shell脚本之awk、sed、grep案例

    1.BEGIN END用法user        DIR,内容显示用户名称.用户家目录   $NF为awk的内置变量,表示最后一行,$(NF-1)就表示倒数第二行,最后打印页脚 页眉显示 cat /e ...

  7. leetcode-easy-others-191. Number of 1 Bits-NO

    mycode  不会... 输入是二进制....我还以为十进制.... 00000001011 = 11 题意: 编写一个将(无符号)整数作为输入的函数,并返回该数字二进制表示中等于1的位数.例如:输 ...

  8. Cas服务器以及客户端搭建

    一.搭建cas服务器 官网:http://jasig.github.io/cas/ Cas Server 下载:http://developer.jasig.org/cas/ Cas Client 下 ...

  9. OpenCV学习笔记(6)——几何变换

    对图像进行各种变换,如移动,旋转,仿射变换等 变换 opencv提供了两个变换函数cv2.warpAffine cv2.warpPerspective使用这两个函数你可以实现所有类型的变换.前者接收的 ...

  10. Storm之WordCount初探

    刚接触Strom,记录下执行过程 1.pom.xml <?xml version="1.0" encoding="UTF-8"?> <proj ...