|
@@ -0,0 +1,161 @@
|
|
|
+<template>
|
|
|
+ <!-- 图表容器:设置宽度和高度 -->
|
|
|
+ <div class="chartRef" ref="chartRef" id="chartRef" @mousemove="moving" @click="paint"></div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+ var e = ref(0)
|
|
|
+ // 引入 Vue 的 Composition API
|
|
|
+ import {ref, onMounted, onBeforeUnmount} from 'vue'
|
|
|
+ // 引入 echarts 库
|
|
|
+ import * as echarts from 'echarts'
|
|
|
+
|
|
|
+ // 获取 DOM 元素的引用(用于初始化图表)
|
|
|
+ const chartRef = ref(null)
|
|
|
+ // 存储 ECharts 实例
|
|
|
+ let chartInstance = null
|
|
|
+
|
|
|
+ var option =ref( {
|
|
|
+ title: {
|
|
|
+ show: true,
|
|
|
+ // text: e + "%",
|
|
|
+ x: "center",
|
|
|
+ y: "center",// 通过x,y将标题(进度)定位在圆环中心
|
|
|
+ textStyle: {
|
|
|
+ fontSize: "25",
|
|
|
+ color: "white",
|
|
|
+ fontWeight: "400",
|
|
|
+ fontFamily: "DINPro, DINPro-Regular",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ formatter: "{d}%",
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: "vertical",
|
|
|
+ x: "left",
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ series: {
|
|
|
+ name: "",
|
|
|
+ type: "pie",
|
|
|
+ radius: ["65%", "85%"],
|
|
|
+ avoidLabelOverlap: true,
|
|
|
+ hoverAnimation: false,
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: false,
|
|
|
+ position: "center",
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ normal: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: e.value,
|
|
|
+ name: "",
|
|
|
+ itemStyle: {
|
|
|
+ color: "#2AB296",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 100 - e.value,
|
|
|
+ name: "",
|
|
|
+ itemStyle: {
|
|
|
+ color: "transparent",//透明色,也可以设置把其他颜色
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ })
|
|
|
+
|
|
|
+ // 初始化图表的方法
|
|
|
+ const initChart = () => {
|
|
|
+ if (chartRef.value) {
|
|
|
+ // 初始化 echarts 实例
|
|
|
+ chartInstance = echarts.init(chartRef.value)
|
|
|
+
|
|
|
+ // 配置项
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // 使用配置项渲染图表
|
|
|
+
|
|
|
+ paint()
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 窗口大小变化时调整图表尺寸
|
|
|
+ const resizeChart = () => {
|
|
|
+ chartInstance?.resize()
|
|
|
+ }
|
|
|
+
|
|
|
+ // 组件挂载后执行初始化
|
|
|
+ onMounted(() => {
|
|
|
+ initChart()
|
|
|
+ // 监听窗口大小变化事件以支持响应式
|
|
|
+ window.addEventListener('resize', resizeChart)
|
|
|
+ })
|
|
|
+
|
|
|
+ // 组件卸载前清理资源,防止内存泄漏
|
|
|
+ onBeforeUnmount(() => {
|
|
|
+ window.removeEventListener('resize', resizeChart)
|
|
|
+ chartInstance?.dispose() // 销毁 echarts 实例
|
|
|
+ })
|
|
|
+ //孙一石
|
|
|
+ const width = 800
|
|
|
+ const height = 800
|
|
|
+
|
|
|
+ function paint(){
|
|
|
+ option.value.series.data[0].value = e.value
|
|
|
+ option.value.series.data[1].value = 100 -e.value
|
|
|
+ // e.value= parseInt(e.value)+1
|
|
|
+ chartInstance.setOption(option.value)
|
|
|
+ // window.setTimeout(paint,1000)
|
|
|
+ }
|
|
|
+ // let x0 = document.getElementById("chartRef").offsetLeft
|
|
|
+ // let y0 = document.getElementById("chartRef").offsetTop
|
|
|
+ let i =0;
|
|
|
+ function moving(event) {
|
|
|
+ console.log("*********************",i++)
|
|
|
+ let center_x = width/2;
|
|
|
+ let center_y = height/2;
|
|
|
+ let mouse_x = event.pageX;
|
|
|
+ let mouse_y = event.pageY;
|
|
|
+ let ang = 180+calculateAngleDegrees(center_x,center_y,mouse_x,mouse_y)
|
|
|
+ let result;
|
|
|
+ if(ang >=0 && ang <=180){
|
|
|
+ e.value= ang*5/18
|
|
|
+ paint()
|
|
|
+ }
|
|
|
+ // console.log(mouse_x,mouse_y)
|
|
|
+ }
|
|
|
+ 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>
|
|
|
+ .chartRef{
|
|
|
+ position: absolute;
|
|
|
+
|
|
|
+ transform: rotate(-90deg);
|
|
|
+ background: #ffff00;
|
|
|
+ width: 800px;
|
|
|
+ height: 800px;
|
|
|
+ }
|
|
|
+</style>
|