|
@@ -1,8 +1,7 @@
|
|
<template>
|
|
<template>
|
|
<div class="chart-container">
|
|
<div class="chart-container">
|
|
- <div id="ring-chart" ref="chart" class="ring-chart"></div>
|
|
|
|
-
|
|
|
|
-
|
|
|
|
|
|
+ <div id="ring-chart" ref="chart" class="ring-chart"></div>
|
|
|
|
+ <div id="cc" style="position: absolute;width: 5px;height: 5px;background: #ff0000"></div>
|
|
|
|
|
|
<!--<div id="ring-chart" ref="chart" class="ring-chart"-->
|
|
<!--<div id="ring-chart" ref="chart" class="ring-chart"-->
|
|
<!--@mousedown="begin" @mousemove="moving" @mouseup="stopMoving"-->
|
|
<!--@mousedown="begin" @mousemove="moving" @mouseup="stopMoving"-->
|
|
@@ -38,13 +37,13 @@
|
|
const initChart = () => {
|
|
const initChart = () => {
|
|
if (!chart.value) return
|
|
if (!chart.value) return
|
|
|
|
|
|
- myChart = echarts.init(chart.value,null,{width:width,height:height})
|
|
|
|
|
|
+ myChart = echarts.init(chart.value, null, {width: width, height: height})
|
|
|
|
|
|
option.value = {
|
|
option.value = {
|
|
|
|
|
|
series: [{
|
|
series: [{
|
|
type: 'pie',
|
|
type: 'pie',
|
|
- radius: [radiusMax,radiusMin],
|
|
|
|
|
|
+ radius: [radiusMax, radiusMin],
|
|
startAngle: 180,
|
|
startAngle: 180,
|
|
endAngle: 360,
|
|
endAngle: 360,
|
|
avoidLabelOverlap: false,
|
|
avoidLabelOverlap: false,
|
|
@@ -163,12 +162,19 @@
|
|
const center_y = top + height / 2
|
|
const center_y = top + height / 2
|
|
|
|
|
|
function init() {
|
|
function init() {
|
|
|
|
+ //
|
|
|
|
+ var cc =document.getElementById("cc");
|
|
|
|
+ console.log("cccccc","top:",top,"left:",left,"width:",width,"height:",height,"center_y:",center_y,"center_x",center_x)
|
|
|
|
+ cc.style.top = center_y+"px"
|
|
|
|
+ cc.style.left = center_x+"px"
|
|
|
|
+
|
|
let chartDiv = document.getElementById("ring-chart");
|
|
let chartDiv = document.getElementById("ring-chart");
|
|
console.log("开始注册touch事件:")
|
|
console.log("开始注册touch事件:")
|
|
chartDiv.addEventListener('touchstart', begin)
|
|
chartDiv.addEventListener('touchstart', begin)
|
|
chartDiv.addEventListener('touchmove', moving)
|
|
chartDiv.addEventListener('touchmove', moving)
|
|
chartDiv.addEventListener('touchend', stopMoving)
|
|
chartDiv.addEventListener('touchend', stopMoving)
|
|
}
|
|
}
|
|
|
|
+
|
|
function testMove(e) {
|
|
function testMove(e) {
|
|
let x = e.targetTouches[0].pageX;
|
|
let x = e.targetTouches[0].pageX;
|
|
let y = e.targetTouches[0].pageY;
|
|
let y = e.targetTouches[0].pageY;
|
|
@@ -187,7 +193,8 @@
|
|
const beginCorner = ref(0)
|
|
const beginCorner = ref(0)
|
|
|
|
|
|
function begin(event) {
|
|
function begin(event) {
|
|
- if(!isFinish.value){
|
|
|
|
|
|
+
|
|
|
|
+ if (!isFinish.value) {
|
|
if (!event.targetTouches || event.targetTouches.length === 0) return;
|
|
if (!event.targetTouches || event.targetTouches.length === 0) return;
|
|
|
|
|
|
// 获取触摸点坐标(相对于视口)
|
|
// 获取触摸点坐标(相对于视口)
|
|
@@ -208,6 +215,7 @@
|
|
// - 调整为 180° 到 360° 的范围(根据你的半圆设计)
|
|
// - 调整为 180° 到 360° 的范围(根据你的半圆设计)
|
|
ang = (360 - ang) % 360; // 反转方向(逆时针 → 顺时针)
|
|
ang = (360 - ang) % 360; // 反转方向(逆时针 → 顺时针)
|
|
ang = Math.max(180, Math.min(360, ang)); // 限制在半圆范围内
|
|
ang = Math.max(180, Math.min(360, ang)); // 限制在半圆范围内
|
|
|
|
+ console.log("*********************",ang)
|
|
// 更新起始角度
|
|
// 更新起始角度
|
|
beginCorner.value = 360 - ang;
|
|
beginCorner.value = 360 - ang;
|
|
option.value.series[0].startAngle = 180 + ang;
|
|
option.value.series[0].startAngle = 180 + ang;
|
|
@@ -231,12 +239,11 @@
|
|
// }
|
|
// }
|
|
|
|
|
|
function stopMoving() {
|
|
function stopMoving() {
|
|
- nextTick(()=>{
|
|
|
|
- isFinish.value = true
|
|
|
|
- isBegin.value = false
|
|
|
|
|
|
+ nextTick(() => {
|
|
|
|
+ // isFinish.value = true
|
|
|
|
+ // isBegin.value = false
|
|
})
|
|
})
|
|
|
|
|
|
-
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
@@ -250,12 +257,12 @@
|
|
eang = Math.max(180, Math.min(360, eang)); // 限制在半圆范围内
|
|
eang = Math.max(180, Math.min(360, eang)); // 限制在半圆范围内
|
|
eang = 360 - eang
|
|
eang = 360 - eang
|
|
if (eang >= 0 && eang <= 180) {
|
|
if (eang >= 0 && eang <= 180) {
|
|
- if(eang >=0 && eang <=90){
|
|
|
|
|
|
+ if (eang >= 0 && eang <= 90) {
|
|
option.value.series[0].data[0].value = (eang - beginCorner.value) * 5 / 9
|
|
option.value.series[0].data[0].value = (eang - beginCorner.value) * 5 / 9
|
|
option.value.series[0].data[1].value = 100 - (eang - beginCorner.value) * 5 / 9
|
|
option.value.series[0].data[1].value = 100 - (eang - beginCorner.value) * 5 / 9
|
|
- }else{
|
|
|
|
- option.value.series[0].data[0].value = (eang ) * 5 / 9
|
|
|
|
- option.value.series[0].data[1].value = 100 - (eang ) * 5 / 9
|
|
|
|
|
|
+ } else {
|
|
|
|
+ option.value.series[0].data[0].value = (eang) * 5 / 9
|
|
|
|
+ option.value.series[0].data[1].value = 100 - (eang) * 5 / 9
|
|
}
|
|
}
|
|
myChart.setOption(option.value)
|
|
myChart.setOption(option.value)
|
|
}
|
|
}
|
|
@@ -268,7 +275,7 @@
|
|
<style scoped>
|
|
<style scoped>
|
|
.chart-container {
|
|
.chart-container {
|
|
position: relative;
|
|
position: relative;
|
|
- width: 1832px;
|
|
|
|
|
|
+ width: 1700px;
|
|
height: 910px;
|
|
height: 910px;
|
|
display: flex;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
@@ -277,11 +284,11 @@
|
|
}
|
|
}
|
|
|
|
|
|
.ring-chart {
|
|
.ring-chart {
|
|
- width: 1704px;
|
|
|
|
|
|
+ width: 1700px;
|
|
height: 910px;
|
|
height: 910px;
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
- border: 1px solid white;
|
|
|
|
- margin-top: 219px;
|
|
|
|
|
|
+ border: 1px solid white;
|
|
|
|
+ margin-top: 219px;
|
|
}
|
|
}
|
|
|
|
|
|
.instructions {
|
|
.instructions {
|