修改数据

investment/investHome.html

@@ -197,10 +197,10 @@
             ></dv-border-box-8>
           </div>
         </div>
-        <div class="tip" @click="showTip = false" v-if="showTip">
+        <div class="tip" @click="showTip = false" v-show="showTip">
           <div class="tip-box">
             <div class="tip-content">
-              123
+              <div ref="echartTip" class="content"></div>
             </div>
           </div>
         </div>

investment/js/investHome.js

@@ -57,6 +57,7 @@ let app = new Vue({
   mounted () {
     setTimeout(() => {
       // 左侧图表
+      this.initChartTip()
       this.initChartL1()
       this.initChartL2()
       this.initChartR1()
@@ -535,6 +536,44 @@ let app = new Vue({
       }
       myChart.setOption(option)
     },
+    initChartTip(){
+      let myChart = echarts.init(this.$refs['echartTip'])
+      let option = {
+        tooltip: {
+          trigger: 'item',
+        },
+        color: ['#6682f5', '#69c0ff', '#43ede3','#8ba2ff'],
+        legend: {
+          top: '0',
+          orient: 'vertical',
+          left: '2%',
+          textStyle: {
+            color: '#9DB9EB',
+          },
+        },
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            center: ['30%','40%'],
+            radius: ['45%', '60%'],
+            labelLine: {
+              normal: {
+                lineStyle: {
+                  width: 1,
+                },
+              },
+            },
+            data: statusList,
+          },
+        ],
+      }
+      myChart.setOption(option)
+      tools.loopShowTooltip(myChart, option, {
+        nterval: 2000,
+        loopSeries: true,
+      })
+    },
     initChartL1 () {
       let myChart = echarts.init(this.$refs['echartL1'])
       let option = {

investment/styles/investHome.css

@@ -449,10 +449,10 @@ a {
   left: 32.5%; */
   /* width: 35%;
   height: 30%; */
-  width: 600px;
-  height: 400px;
-  top: calc(50% - 200px);
-  left: calc(50% - 300px);
+  width: 900px;
+  height: 56vh;
+  top: calc(50% - 26vh);
+  left: calc(50% - 450px);
   background: url("../images/alert.png") no-repeat center;
   background-color: #133b65;
   background-size: 100% 100%;
@@ -463,11 +463,14 @@ a {
   line-height: 70px;
 }
 .tip-content {
-  height: 95%;
+  height: 56vh;
   overflow: auto;
   padding-right: 15px;
   margin-top: 2%;
 }
+.tip-content .content {
+  height: calc(56vh - 60px);
+}
 div::-webkit-scrollbar {
   width: 4px;
 }

manpower/js/data2.js

@@ -97,8 +97,8 @@ const dataR4 = [
   [19, 62, 70, 3, 347, 23, 50, 2, 566]
 ]
 const dataR5 = [
+  [17117.80, 12669.20, 14311.00, 11220.77, 9302.98, 12107.07, 8637.63, 9259.17, 7301.61],
   [23923.1, 0, 14081.1, 0, 6077.7, 0, 8196, 10210, 10351.6],
-  [17117.80, 12669.20, 14311.00, 11220.77, 9302.98, 12107.07, 8637.63, 9259.17, 7301.61]
 ]
 const dataR6 = [
   [183, 372, 221, 268, 51, -25, 676, -31, 62],

manpower/js/data3.js

@@ -50,7 +50,7 @@ const dataL1 = [
   [17, 27, 47, 4, 36, 43, 33, 36, 34, 17]
 ]
 const dataL2 = [
-  [48, 27, 28, 42, 37, 44, 34, 37, 35, 18]
+  [27, 28, 48, 42, 37, 44, 34, 37, 35, 18]
 ]
 const dataL3 = [
   [34, 54, 94, 8, 72, 86, 66, 72, 68, 34]

manpower/js/data4.js

@@ -39,11 +39,11 @@ const dataL2 = [
   [3, 9, 10, 33, 23, 29, 13, 8]
 ]
 const dataL3 = [
-  [6, 18, 20, 66, 46, 58, 26, 12]
+  [5, 4, 12, 24, 32, 25, 35, 8]
 ]
 const dataL4 = [
   [6, 18, 20, 66, 46, 58, 26, 12],
-  [66.67, 56.25, 27.40, 23.66, 30.46, 46.40, 18.06, 100.00]
+  [55.56, 12.50, 16.44, 8.60, 21.19, 20.00, 24.31, 66.67]
 ]
 const dataL5 = [
   [9, 32, 73, 279, 151, 125, 144, 12],
@@ -88,8 +88,8 @@ const dataR4 = [
   [0, 0, 0, 1, 2, 0, 0, 0]
 ]
 const dataR5 = [
-  [11000, 0.00, 6666.66, 9492.75, 41783.7, 0, 3387.97, 8333.33],
-  [15323.20, 0.00, 9084.66, 10674.11, 12694.67, 10281.05, 4433.65, 0.00]
+  [15323.20, 0.00, 9084.66, 10674.11, 12694.67, 10281.05, 4433.65, 0.00],
+  [11000, 0.00, 6666.66, 9492.75, 41783.7, 0, 3387.97, 8333.33]
 ]
 const dataR6 = [
   [0, -100, -920, -239, 38, 27, 30, -2727],

manpower/js/index.js

@@ -1275,18 +1275,48 @@ let app = new Vue({
             },
 
             // markPoint:{
-            //   symbol: 'path://m 0,0 h 48 v 30 h -30 l -6,10 l -6,-10 h -6 z',
-            //   symbolSize: '55',
-            //   symbolOffset: ['25%',0],
-            //   symbolKeepAspect:true,
+            //   symbolSize: 1,
+            //   symbolOffset: [0, '50%'],
             //   label:{
             //     show: true,
             //     fontSize:18,
-            //     color: '#fff'
-            //   },
-            //   itemStyle: {
-            //     color: 'rgba(38,48,59,0.6)'
+            //     color: '#fff',
+            //     backgroundColor: 'rgba(38,48,59,0.6)',
+            //     borderColor: '#aaa',
+            //     borderWidth: 1,
+            //     borderRadius: 4,
+            //     padding: [4, 10],
+            //     lineHeight: 26,
+            //     position: 'top',
+            //     distance: 20,
+            //     // formatter: data =>{
+            //     //   console.log('11',data)
+            //     // },
+            //     formatter: [
+            //       '{a|这段文本采用样式a}',
+            //       '这段用默认样式{x|这段用样式x}'
+            //     ].join('\n'),
+            //     rich: {
+            //       a: {
+            //           color: 'yellow',
+            //           lineHeight: 10
+            //       },
+            //       b: {
+            //           // backgroundColor: {
+            //           //     image: './images/alert.png'
+            //           // },
+            //           height: 40
+            //       },
+            //       x: {
+            //           fontSize: 18,
+            //           borderColor: '#449933',
+            //           borderRadius: 4
+            //       },
+            //     }
             //   },
+            //   // itemStyle: {
+            //   //   color: 'rgba(38,48,59,0.6)'
+            //   // },
             //   data:[{value:'117.48', xAxis: '国际能源', yAxis: 127 },{value:'138.83', xAxis: '汾酒集团', yAxis: 148 }]
             // },
             markLine: {

manpower/js/index4.js

@@ -395,7 +395,7 @@ let app = new Vue({
                   },
                   {
                     offset: 1,
-                    color: '#082550',
+                    color: '#69c0ff',
                   },
                 ]),
               },