近期需要做一个鼠标拖动完成油表盘数值改变的功能，使用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=" 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即可看效果。