12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091 |
- <template>
- <div class="hide-scrollbar" @mousemove="chooseDiv">
- <FollowRingChart id="ring-chart1" class="ring-chart1" :chartProps="chartPrpps1"/>
- <!--<FollowRingChart id="ring-chart2" class="ring-chart2" :chartProps="chartPrpps2"/>-->
- <!--<div style="position: absolute;background: #ff0000;width: 800px;height: 500px;top:500px;left:400px;"></div>-->
- </div>
- </template>
- <script setup>
- import FollowRingChart from './FollowRingChart.vue'
- const chartPrpps1 = ref({
- left : 0,
- top : 0,
- width : 800,
- height : 800,
- borderColor : "#998877",
- color :"#ff00ff",
- bncolor : "#ffffff",
- radiusMax : '85%',
- radiusMin : '80%',
- isFinish : false
- })
- const chartPrpps2 = ref({
- left : 50,
- top : 50,
- width : 700,
- height : 700,
- borderColor : "#223344",
- color :"#aabbcc",
- bncolor : "#ddeeff",
- radiusMax : '85%',
- radiusMin : '80%',
- })
- const centerX = chartPrpps1.value.width/2+chartPrpps1.value.left
- const centerY = chartPrpps1.value.height/2+chartPrpps1.value.top
- function chooseDiv(event){
- let mouse_x = event.pageX;
- let mouse_y = event.pageY;
- let dis = Math.sqrt((centerX-mouse_x)*(centerX-mouse_x)+(centerY-mouse_y)*(centerY-mouse_y))
- if(dis >=320 && dis <=340){
- // document.getElementById("ring-chart2").style.zIndex = 1
- document.getElementById("ring-chart1").style.zIndex = 99999
- }
- if(dis <= 315 && dis >=285){
- document.getElementById("ring-chart1").style.zIndex = 1
- // document.getElementById("ring-chart2").style.zIndex = 99999
- }
- //console.log("dis:",dis)
- }
- //取点和圆心的角度
- function calculateAngleDegrees(x1, y1, x2, y2) {
- const dx = x2 - x1;
- const dy = y2 - y1;
- const radians = Math.atan2(dy, dx);
- return radians * (180 / Math.PI); // 弧度转角度
- }
- </script>
- <style scoped>
- .chart-container {
- display: flex;
- justify-content: center;
- align-items: center;
- width: 100%;
- height: 100vh; /* 使用整个视口高度 */
- }
- .ring-chart1 {
- width: 800px;
- height: 800px;
- position: absolute;
- left: 0px;
- top : 0px;
- background: #ffff00;
- }
- .ring-chart2 {
- position: absolute;
- left : -65px;
- top : 35px;
- }
- .hide-scrollbar::-webkit-scrollbar {
- display: none; /* 对于WebKit浏览器 */
- }
- .hide-scrollbar {
- -ms-overflow-style: none; /* 对于IE和Edge浏览器 */
- scrollbar-width: none; /* 针对Firefox */
- }
- </style>
|