Browse Source

修改水波tooltip

Morales 5 months ago
parent
commit
fdd88e7e51
2 changed files with 50 additions and 13 deletions
  1. 49 12
      heida/src/views/home/index.vue
  2. 1 1
      heida/src/views/personnel/index.vue

+ 49 - 12
heida/src/views/home/index.vue

@@ -50,8 +50,8 @@
       </div>
       <div class="home-left-progress" style="width: 100%; height: 29%">
         <div class="home-left-progress__wavechart" style="width: 48%; height: 100%">
-          <div class="wavechart" id="wavechart" style="width: 100%; height: 80%"></div>
-          <div style="text-align: center">
+          <div class="wavechart" id="wavechart" style="width: 100%; height: 110%"></div>
+          <!-- <div style="text-align: center">
             <div>
               施工天数
               <span>{{ diffDays }}</span>
@@ -62,11 +62,11 @@
               <span>{{ totalDays }}</span>
             </div>
-          </div>
+          </div> -->
         </div>
         <div class="home-left-progress__wavechart" style="width: 48%; height: 100%">
-          <div class="wavechart" id="chanzhichart" style="width: 100%; height: 80%"></div>
-          <div style="text-align: center">
+          <div class="wavechart" id="chanzhichart" style="width: 100%; height: 110%"></div>
+          <!-- <div style="text-align: center">
             <div>
               当前完成产值
               <span>{{ currentChanzhi }}</span>
@@ -77,7 +77,7 @@
               <span>{{ totalChanzhi }}</span>
               万元
             </div>
-          </div>
+          </div> -->
         </div>
       </div>
       <!-- <div class="home-left-days" style="width: 100%">
@@ -101,7 +101,8 @@
       <div class="home-right-rizhi" style="height: 50%; overflow-y: auto">
         <item-title :title="'项目概况'"></item-title>
         <ul>
-          <li><strong style="color: #30c6c7"> ①黑龙江省哈尔滨市南岗区哈西街道小区改造配套基础设施建设项目276645.92㎡,57栋楼,3233户。 项目共计178栋,13974户,111.07万㎡。 </strong></li>
+          <li><strong style="color: #02d1c5"> ①黑龙江省哈尔滨市南岗区哈西街道小区改造配套基础设施建设项目276645.92㎡,57栋楼,3233户。
+              项目共计178栋,13974户,111.07万㎡。 </strong></li>
           <li>②黑龙江省哈尔滨市南岗区七政街道国泰社区小区改造配套基础设施建设项目,252271.46㎡,35栋楼,3027户;</li>
           <li>③黑龙江省哈尔滨市南岗区七政、通达街道小区改造配套基础设施建设项目153680.01㎡,24栋楼,2240户;</li>
           <li>④黑龙江省哈尔滨市南岗区七政街道元士、国脉社区小区改造配套基础设施建设项目252302.02㎡,34栋楼,3342户;</li>
@@ -191,7 +192,25 @@ export default {
 
       const option = {
         tooltip: {
-          show: true
+          show: true,
+          trigger: 'item', // tooltip 触发方式,item 表示数据项触发
+          formatter: function (params) {
+            // params 是 tooltip 的参数,包含了数据项的信息
+            return '施工天数 <strong style="color: #294d99;">78</strong> 天<br/>总工期 <strong style="color: #294d99;">199</strong> 天';
+          },
+          position: function (point, params, dom, rect, size) {
+            // point 是鼠标当前的位置
+            // params 是 tooltip 的参数
+            // dom 是 tooltip 的 dom 对象
+            // rect 是包含图表的 dom 节点的矩形区域
+            // size 是 tooltip dom 的大小
+
+            // 使用数组形式设置绝对位置
+            return [point[0] + 10, point[1] - 10];
+
+            // 或者使用相对位置字符串
+            // return 'right'; // tooltip 将出现在鼠标位置的右侧
+          },
         },
         title: {
           text: '时间进度',
@@ -220,7 +239,25 @@ export default {
 
       const optionChanzhi = {
         tooltip: {
-          show: true
+          show: true,
+          trigger: 'item', // tooltip 触发方式,item 表示数据项触发
+          formatter: function (params) {
+            // params 是 tooltip 的参数,包含了数据项的信息
+            return '当前完成产值 <strong style="color: #294d99;">2981.9</strong> 万元<br/>总产值 <strong style="color: #294d99;">9318.4</strong> 万元';
+          },
+          position: function (point, params, dom, rect, size) {
+            // point 是鼠标当前的位置
+            // params 是 tooltip 的参数
+            // dom 是 tooltip 的 dom 对象
+            // rect 是包含图表的 dom 节点的矩形区域
+            // size 是 tooltip dom 的大小
+
+            // 使用数组形式设置绝对位置
+            return [point[0] + 10, point[1] - 10];
+
+            // 或者使用相对位置字符串
+            // return 'right'; // tooltip 将出现在鼠标位置的右侧
+          },
         },
         title: {
           text: '产值进度',
@@ -327,7 +364,7 @@ export default {
       flex-wrap: wrap;
       height: 84%;
 
-      & > li {
+      &>li {
         width: 33%;
         height: 50%;
         display: flex;
@@ -363,7 +400,7 @@ export default {
       height: px2rem(50);
       font-size: px2rem(18);
 
-      & > div {
+      &>div {
         width: 48%;
         height: 100%;
         line-height: px2rem(50);
@@ -401,7 +438,7 @@ export default {
       flex-wrap: wrap;
       height: 84%;
 
-      & > li {
+      &>li {
         width: 33%;
         height: 50%;
         display: flex;

+ 1 - 1
heida/src/views/personnel/index.vue

@@ -375,7 +375,7 @@ export default {
 
       var riqi = []
       var data2 = []
-      for (var i = 6; i >= -1; i--) {
+      for (var i = 6; i >= 0; i--) {
         var r = dayjs().subtract(i, 'day')
         var rStr = r.format('MM-DD')
         riqi.push(rStr)