投资弹出层

investment/investHome.html

@@ -199,8 +199,10 @@
         </div>
         <div class="tip" @click="showTip = false" v-show="showTip">
           <div class="tip-box">
-            <div class="tip-content">
+            <div class="tip-content flex-between">
+              <div style="position: absolute; top:10px; left: calc(50% - 150px); width: 300px; text-align: center;">123</div>
               <div ref="echartTip" class="content"></div>
+              <div ref="echartTip2" class="content"></div>
             </div>
           </div>
         </div>

investment/js/investHome.js

@@ -58,6 +58,7 @@ let app = new Vue({
     setTimeout(() => {
       // 左侧图表
       this.initChartTip()
+      this.initChartTip2()
       this.initChartL1()
       this.initChartL2()
       this.initChartR1()
@@ -555,8 +556,8 @@ let app = new Vue({
           {
             name: '',
             type: 'pie',
-            center: ['30%','40%'],
+            center: ['45%','40%'],
-            radius: ['45%', '60%'],
+            radius: ['35%', '50%'],
             labelLine: {
               normal: {
                 lineStyle: {
@@ -574,6 +575,153 @@ let app = new Vue({
         loopSeries: true,
       })
     },
+    initChartTip2(){
+      let myChart = echarts.init(this.$refs['echartTip2'])
+      let option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+          },
+        },
+        dataZoom:[
+         {
+          // start: 9,//默认为@
+          // end: 100,//黑认认为1@0
+          type: "slider",
+          show: true,
+          // xAxisIndex: [0]
+          handlesize: 0,//滑动条的 左右2个滑动条的大小
+          startValue: 9,// 初始显示值
+          endValue: 6,// 结束显示值
+          height: 10,//组件高度
+          left:"5%",
+          right: "4%",//右边的距离
+          bottom: "25%",//底边的距离
+          borderColor:"#939",
+          fillerColor:"#269cdb",
+          borderRadius: 5,
+          backgroundColor: "#33384b",//两边未选中的滑动条区域的额色
+          showDataShadow: false,//是否显示数据阴影
+          showDetail: false,//即拖拽时候是否显示详细数值信息 
+          truerealtime: true,//是否实时更新
+          filterMode: "filter"
+         },{
+          type:'inside',
+          show: true,
+          start: 1,
+          end: 100
+         }
+        ],
+        grid: {
+          top: '16%',
+          right: '3%',
+          left: '10%',
+          bottom: '38%',
+        },
+        legend: {
+          top: '1',
+          right: '10',
+          textStyle: {
+            color: 'rgba(250,250,250,0.6)',
+          },
+        },
+        xAxis: {
+          data: executeList.map(item=>item.name),
+          axisLine: {
+            show: true, //隐藏X轴轴线
+            lineStyle: {
+              color: '#005094',
+              width: 1,
+            },
+          },
+          axisTick: {
+            show: false, //隐藏X轴刻度
+          },
+          axisLabel: {
+            show: true,
+            rotate: 40,
+            textStyle: {
+              color: 'rgba(255,255,255,0.6)', //X轴文字颜色
+            },
+          },
+        },
+        yAxis: [
+          {
+            type: 'value',
+            nameTextStyle: {
+              color: '#ebf8ac',
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#68b4dd66',
+                type: 'dashed',
+              },
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#3D7495',
+              },
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: 'rgba(250,250,250,0.6)',
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: '计划投资',
+            type: 'bar',
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#69c0ff',
+                  },
+                  {
+                    offset: 1,
+                    color: '#082550',
+                  },
+                ]),
+              },
+            },
+            data: executeList.map(item=>item.value),
+          },
+          {
+            name: '实际投资',
+            type: 'bar',
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#957DFF',
+                  },
+                  {
+                    offset: 1,
+                    color: '#082550',
+                  },
+                ]),
+              },
+            },
+            data: executeList.map(item=>item.value2),
+          },
+        ],
+      }
+      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

@@ -454,7 +454,7 @@ a {
   top: calc(50% - 26vh);
   left: calc(50% - 450px);
   background: url("../images/alert.png") no-repeat center;
-  background-color: #133b65;
+  /* background-color: #133b65; */
   background-size: 100% 100%;
   padding: 100px 60px 50px;
 }
@@ -470,6 +470,7 @@ a {
 }
 .tip-content .content {
   height: calc(56vh - 60px);
+  width: 400px;
 }
 div::-webkit-scrollbar {
   width: 4px;