paint3.vue 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. <template>
  2. <div class="hide-scrollbar" @mousemove="chooseDiv">
  3. <FollowRingChart id="ring-chart1" class="ring-chart1" :chartProps="chartPrpps1"/>
  4. <!--<FollowRingChart id="ring-chart2" class="ring-chart2" :chartProps="chartPrpps2"/>-->
  5. <!--<div style="position: absolute;background: #ff0000;width: 800px;height: 500px;top:500px;left:400px;"></div>-->
  6. </div>
  7. </template>
  8. <script setup>
  9. import FollowRingChart from './FollowRingChart.vue'
  10. const chartPrpps1 = ref({
  11. left : 0,
  12. top : 0,
  13. width : 800,
  14. height : 800,
  15. borderColor : "#998877",
  16. color :"#ff00ff",
  17. bncolor : "#ffffff",
  18. radiusMax : '85%',
  19. radiusMin : '80%',
  20. isFinish : false
  21. })
  22. const chartPrpps2 = ref({
  23. left : 50,
  24. top : 50,
  25. width : 700,
  26. height : 700,
  27. borderColor : "#223344",
  28. color :"#aabbcc",
  29. bncolor : "#ddeeff",
  30. radiusMax : '85%',
  31. radiusMin : '80%',
  32. })
  33. const centerX = chartPrpps1.value.width/2+chartPrpps1.value.left
  34. const centerY = chartPrpps1.value.height/2+chartPrpps1.value.top
  35. function chooseDiv(event){
  36. let mouse_x = event.pageX;
  37. let mouse_y = event.pageY;
  38. let dis = Math.sqrt((centerX-mouse_x)*(centerX-mouse_x)+(centerY-mouse_y)*(centerY-mouse_y))
  39. if(dis >=320 && dis <=340){
  40. // document.getElementById("ring-chart2").style.zIndex = 1
  41. document.getElementById("ring-chart1").style.zIndex = 99999
  42. }
  43. if(dis <= 315 && dis >=285){
  44. document.getElementById("ring-chart1").style.zIndex = 1
  45. // document.getElementById("ring-chart2").style.zIndex = 99999
  46. }
  47. //console.log("dis:",dis)
  48. }
  49. //取点和圆心的角度
  50. function calculateAngleDegrees(x1, y1, x2, y2) {
  51. const dx = x2 - x1;
  52. const dy = y2 - y1;
  53. const radians = Math.atan2(dy, dx);
  54. return radians * (180 / Math.PI); // 弧度转角度
  55. }
  56. </script>
  57. <style scoped>
  58. .chart-container {
  59. display: flex;
  60. justify-content: center;
  61. align-items: center;
  62. width: 100%;
  63. height: 100vh; /* 使用整个视口高度 */
  64. }
  65. .ring-chart1 {
  66. width: 800px;
  67. height: 800px;
  68. position: absolute;
  69. left: 0px;
  70. top : 0px;
  71. background: #ffff00;
  72. }
  73. .ring-chart2 {
  74. position: absolute;
  75. left : -65px;
  76. top : 35px;
  77. }
  78. .hide-scrollbar::-webkit-scrollbar {
  79. display: none; /* 对于WebKit浏览器 */
  80. }
  81. .hide-scrollbar {
  82. -ms-overflow-style: none; /* 对于IE和Edge浏览器 */
  83. scrollbar-width: none; /* 针对Firefox */
  84. }
  85. </style>