1

src/views/home/components/chart2.vue

@@ -26,7 +26,8 @@ export default {
     return {
       option : {
         tooltip: {
-          trigger: 'axis',
+          trigger: 'item',
+          show:true,
           axisPointer: {
             type: 'shadow'
           }
@@ -145,7 +146,7 @@ export default {
               }
             }
             this.option.yAxis.data.push(title)
-            this.option.series[0].data.push(item.intPageReadCount)
+            this.option.series[0].data.push({value:item.intPageReadCount,name:item.title})
           })
           this.option.yAxis.data.reverse()
           this.option.series[0].data.reverse()

src/views/home/components/chart3.vue

@@ -4,16 +4,18 @@
       <div v-if="index < 3" class="box1">{{ index + 1 }}.</div>
       <div v-else class="box1-1">{{ index + 1 }}.</div>
       <div class="flex flex-align-center box2">
-        <div
-          :style="
-            'display: flex;align-items: center;height: 26px;padding-left: 5px;padding-right: 5px; background-image: linear-gradient(to right, rgba(9,45,85,0.94) , rgba(18,70,146,0.94));border-radius: 20px;color: #ffffff;' +
-            'width:' +
-            (item.number / max) * 100 +
-            '%'
-          "
-        >
-          {{ item.name }}
-        </div>
+        <a-tooltip :content="item.allName">
+          <div
+            :style="
+              'display: flex;align-items: center;height: 26px;padding-left: 5px;padding-right: 5px; background-image: linear-gradient(to right, rgba(9,45,85,0.94) , rgba(18,70,146,0.94));border-radius: 20px;color: #ffffff;' +
+              'width:' +
+              (item.number / max) * 100 +
+              '%'
+            "
+          >
+            {{ item.name }}
+          </div>
+        </a-tooltip>
       </div>
       <div class="flex flex-justify-end box3">
         {{ item.number }}
@@ -50,21 +52,22 @@ export default {
             if(item.viewNumber >= l){
               if (item.name.length >= 16){
                 return {name:item.name.substring(0,14)+"...",
-                     number:item.viewNumber}
+                     number:item.viewNumber,
+                allName:item.name}
               }else {
-                return {name:item.name,number:item.viewNumber}
+                return {name:item.name,number:item.viewNumber,allName:item.name}
               }
             }else if(item.viewNumber >= s) {
               if (item.name.length >= 11){
-                return {name:item.name.substring(0,8)+"...",number:item.viewNumber}
+                return {name:item.name.substring(0,8)+"...",number:item.viewNumber,allName:item.name}
               }else {
-                return {name:item.name,number:item.viewNumber}
+                return {name:item.name,number:item.viewNumber,allName:item.name}
               }
             }else {
               if (item.name.length >= 8){
-                return {name:item.name.substring(0,6)+"...",number:item.viewNumber}
+                return {name:item.name.substring(0,6)+"...",number:item.viewNumber,allName:item.name}
               }else {
-                return {name:item.name,number:item.viewNumber}
+                return {name:item.name,number:item.viewNumber,allName:item.name}
               }
             }
           })