diff --git a/src/App.vue b/src/App.vue
index ed1f1950eb24a761c642f85299da0bddc4e6223e..4424d979863ada2c5b9da566bea99fe71abe05fe 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,7 @@
新冠疫情时空传播过程可视化模拟
- 数据来源:{{ uploadName == "" ? "无" : uploadName }}
@@ -17,7 +17,10 @@
:before-upload="beforeUpload"
:show-file-list="false"
>
- 上传区域
+
+ 上传区域
+
(1 - n) * a + n * b;
+
+//定义了一个getStyle函数，用于获取指定元素的指定样式属性的值，并处理了兼容性。
+const getStyle = (el, attr) => {
+ try {
+ return window.getComputedStyle
+ ? window.getComputedStyle(el)[attr]
+ : el.currentStyle[attr];
+ } catch (e) {}
+ return "";
+};
+
+//定义了一个Cursor类，该类包含了鼠标指针的位置信息、
+//光标的样式等属性和方法。在构造函数中，初始化了鼠标指针并绑定了事件监听。
+class Cursor {
+ constructor() {
+ this.pos = {curr: null, prev: null};
+ this.pt = [];
+ this.create();
+ this.init();
+ this.render();
+ }
+
+//move方法用于移动光标的位置。
+ move(left, top) {
+ this.cursor.style["left"] = `${left}px`;
+ this.cursor.style["top"] = `${top}px`;
+ }
+
+//create方法用于创建鼠标指针和获取指定元素中鼠标指针样式为"pointer"的元素的外部内容
+ create() {
+ if (!this.cursor) {
+ this.cursor = document.createElement("div");
+ this.cursor.id = "cursor";
+ this.cursor.classList.add("hidden");
+ document.body.append(this.cursor);
+ }
+
+ var el = document.getElementsByTagName('*');
+ for (let i = 0; i < el.length; i++)
+ if (getStyle(el[i], "cursor") == "pointer")
+ this.pt.push(el[i].outerHTML);
+
+ document.body.appendChild((this.scr = document.createElement("style")));
+ // 这里改变鼠标指针的颜色 由svg生成
+ this.scr.innerHTML = `* {cursor: url("data:image/svg+xml,") 4 4, auto}`;
+ }
+//refresh方法用于刷新鼠标指针状态，并重新生成光标和初始化事件监听。
+ refresh() {
+ this.scr.remove();
+ this.cursor.classList.remove("hover");
+ this.cursor.classList.remove("active");
+ this.pos = {curr: null, prev: null};
+ this.pt = [];
+
+ this.create();
+ this.init();
+ this.render();
+ }
+//init方法用于初始化事件监听，包括鼠标移动、悬停、离开等操作。
+ init() {
+ document.onmouseover = e => this.pt.includes(e.target.outerHTML) && this.cursor.classList.add("hover");
+ document.onmouseout = e => this.pt.includes(e.target.outerHTML) && this.cursor.classList.remove("hover");
+ document.onmousemove = e => {(this.pos.curr == null) && this.move(e.clientX - 8, e.clientY - 8);
+ this.pos.curr = {x: e.clientX - 8, y: e.clientY - 8}; this.cursor.classList.remove("hidden");};
+ document.onmouseenter = e => this.cursor.classList.remove("hidden");
+ document.onmouseleave = e => this.cursor.classList.add("hidden");
+ document.onmousedown = e => this.cursor.classList.add("active");
+ document.onmouseup = e => this.cursor.classList.remove("active");
+ }
+//render方法用于渲染光标的动态效果，通过不断触发requestAnimationFrame来实现光标位置的平滑过渡。
+ render() {
+ if (this.pos.prev) {
+ this.pos.prev.x = Math.lerp(this.pos.prev.x, this.pos.curr.x, 0.15);
+ this.pos.prev.y = Math.lerp(this.pos.prev.y, this.pos.curr.y, 0.15);
+ this.move(this.pos.prev.x, this.pos.prev.y);
+ } else {
+ this.pos.prev = this.pos.curr;
+ }
+ requestAnimationFrame(() => this.render());
+ }
+}
+//最后是一个立即执行函数，用于实例化Cursor类，并在需要重新获取列表时调用CURSOR.refresh()方法。
+(() => {
+ CURSOR = new Cursor();
+ // 需要重新获取列表时，使用 CURSOR.refresh()
+})();
\ No newline at end of file
diff --git a/src/cursor/custom.css b/src/cursor/custom.css
new file mode 100644
index 0000000000000000000000000000000000000000..782738b24fde2fc7cf0eedadd9baea5779c78283
--- /dev/null
+++ b/src/cursor/custom.css
@@ -0,0 +1,44 @@
+/* 鼠标样式 */
+/*#cursor：这是鼠标指针的样式定义，包括固定定位、宽高为16像素、圆角边框为8像素、
+背景颜色为rgb(37, 137, 174)等属性，指定了transition动画过渡效果和pointer-events为none，
+表示不响应鼠标事件。*/
+#cursor {
+ position: fixed;
+ width: 16px;
+ height: 16px;
+ /* 这里改变跟随的底色 */
+ background: rgb(37, 137, 174);
+ border-radius: 8px;
+ opacity: 0.25;
+ z-index: 10086;
+ pointer-events: none;
+ transition: 0.2s ease-in-out;
+ transition-property: background-color, opacity, transform;
+ }
+
+/*当鼠标指针被隐藏时，通过修改opacity属性将其透明度设置为0，实现隐藏的效果。*/
+ #cursor.hidden {
+ opacity: 0;
+ }
+
+ /*#cursor.hover：当鼠标指针悬停在特定元素上时，修改鼠标指针的样式，
+ 将其透明度降低，同时放大2.5倍，实现悬停效果。*/
+ #cursor.hover {
+ opacity: 0.1;
+ transform: scale(2.5);
+ -webkit-transform: scale(2.5);
+ -moz-transform: scale(2.5);
+ -ms-transform: scale(2.5);
+ -o-transform: scale(2.5);
+ }
+
+/*#cursor.active：当鼠标按下时，修改鼠标指针的样式，
+将其透明度降低，同时缩小为原来的一半，实现按下效果。*/
+ #cursor.active {
+ opacity: 0.5;
+ transform: scale(0.5);
+ -webkit-transform: scale(0.5);
+ -moz-transform: scale(0.5);
+ -ms-transform: scale(0.5);
+ -o-transform: scale(0.5);
+ }
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 4827a165d9774cc6d8e616fc1b9fc405bddbeede..7a7016dc19aca1ca43e5e8b9831f7ef3a45c5631 100644
--- a/src/main.js
+++ b/src/main.js
@@ -8,6 +8,9 @@ import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import Toast from "./components/Toast/index";
import VueRouter from 'vue-router';
+import './cursor/cursor.js';
+import './cursor/custom.css'; // 在这里引入自定义的CSS文件
+
Vue.use(Toast);
Vue.use(ElementUI)
diff --git a/src/views/Echarts.vue b/src/views/Echarts.vue
index de2fb5aedfc6682eb58dc3ae9f2fd8659cd69755..58b9b01b9430b35ed816365c13b9c9a7d9bcff60 100644
--- a/src/views/Echarts.vue
+++ b/src/views/Echarts.vue
@@ -143,6 +143,7 @@ export default {
right: 100,
},
legend: {
+ top: '95%',
left: "28%",
formatter:[
'{name}'