src/components/customEcharts/size1920/index.vue

@@ -98,6 +98,7 @@ const initEcharts = (data) => {
       trigger: 'axis',
       axisPointer: {
         type: 'line',
+        snap: true,
         label: {
           backgroundColor: '#6a7985',
         },
@@ -107,8 +108,10 @@ const initEcharts = (data) => {
         return `<span style="font-size: 1.1rem; font-weight: 600;">${p.axisValue}</span><br/><span style="font-size: 0.9rem; font-weight: 400;">Price: ${p.data}</span>`
       },
       triggerOn: 'mousemove',
+      enterable: true,
       confine: true,
-      hideDelay: 1500
+      hideDelay: 100,
+      showDelay: 0
     },
     xAxis: {
       data: xAxisData,

src/components/customEcharts/size375/index.vue

@@ -81,9 +81,6 @@ const initEcharts = (data) => {
   myCharts = echarts.init(document.getElementById('myEcharts'))
   // 绘制图表
   myCharts.setOption({
-    animation: false,
-    progressive: 500,
-    progressiveThreshold: 3000,
     // title: {
     //   text: 'FiEE, Inc. Stock Price History',
     // },
@@ -104,8 +101,6 @@ const initEcharts = (data) => {
         const p = params[0]
         return `<span style="font-size: 1.1rem; font-weight: 600;">${p.axisValue}</span><br/><span style="font-size: 0.9rem; font-weight: 400;">Price: ${p.data}</span>`
       },
-      confine: true,
-      hideDelay: 1500
     },
     xAxis: {
       data: xAxisData,

src/views/stock-quote/size1440/index.vue

@@ -12,7 +12,7 @@ getStockQuate()
   <main ref="main" class="flex pt-80px flex-col md:flex-row justify-center items-center gap-24 rounded-3xl">
     <!-- 左侧大号价格 -->
     <section class="flex flex-col items-center justify-center glass-card p-24 rounded-2xl shadow-xl">
-      <div class="text-8xl font-extrabold text-#8A5AFB animate-bg-move select-none drop-shadow-lg">${{ stockQuote.price }}</div>
+      <div class="text-8xl font-extrabold text-#8A5AFB animate-bg-move select-none drop-shadow-lg">${{ stockQuote.change?.slice(0,4) }}</div>
       <div class="mt-8 text-2xl text-gray-500 font-semibold tracking-widest mb-8px">NASDAQ: <span class="text-black">MINM</span></div>
       <div class="text-gray-500">{{ formatted }}</div>
     </section>

src/views/stock-quote/size1920/index.vue

@@ -12,7 +12,7 @@ getStockQuate()
   >
     <!-- 左侧大号价格 -->
     <section class="flex flex-col items-center justify-center glass-card p-32 rounded-2xl shadow-xl ">
-      <div class="text-9xl font-extrabold text-#8A5AFB animate-bg-move select-none drop-shadow-lg">${{ stockQuote.price }}</div>
+      <div class="text-9xl font-extrabold text-#8A5AFB animate-bg-move select-none drop-shadow-lg">${{ stockQuote.change?.slice(0,4) }}</div>
       <div class="mt-10 text-3xl text-gray-500 font-semibold tracking-widest mb-10px">NASDAQ: <span class="text-black">MINM</span></div>
       <div class="text-gray-500">{{ formatted }}</div>
     </section>

src/views/stock-quote/size375/index.vue

@@ -8,7 +8,7 @@ getStockQuate();
   <main class="min-h-60vh flex flex-col items-center justify-start  px-2 py-5 pt-500px">
     <!-- 价格卡片 -->
     <section class="w-full max-w-90vw flex flex-col items-center justify-center glass-card p-4 rounded-2xl shadow mb-5">
-      <div class="text-4xl font-extrabold text-#8A5AFB animate-bg-move select-none drop-shadow-lg">${{ stockQuote.price }}</div>
+      <div class="text-4xl font-extrabold text-#8A5AFB animate-bg-move select-none drop-shadow-lg">${{ stockQuote.change?.slice(0,4) }}</div>
       <div class="mt-2 text-sm text-gray-500 font-semibold tracking-widest mb-0px">NASDAQ: <span class="text-black">MINM</span></div>
       <div class="text-gray-500 text-60px">{{ formatted }}</div>
     </section>

src/views/stock-quote/size768/index.vue

@@ -12,7 +12,7 @@ getStockQuate();
     <main class="min-h-60vh flex flex-col items-center justify-start px-4 py-6 pt-500px">
       <!-- 价格卡片 -->
       <section class="w-full max-w-80vw flex flex-col items-center justify-center glass-card p-6 rounded-2xl shadow mb-6">
-        <div class="text-5xl font-extrabold text-#8A5AFB animate-bg-move select-none drop-shadow-lg">${{ stockQuote.price }}</div>
+        <div class="text-5xl font-extrabold text-#8A5AFB animate-bg-move select-none drop-shadow-lg">${{ stockQuote.change?.slice(0,4) }}</div>
         <div class="mt-3 text-base text-gray-500 font-semibold tracking-widest mb-0px">NASDAQ: <span class="text-black">MINM</span></div>
         <div class="text-gray-500 text-70px">{{ formatted }}</div>
       </section>