弹窗修改

investment/investHome.html

@@ -31,7 +31,7 @@
             <dv-border-box-8 :dur="10">
               <div class="my-panel">
                 <div class="panel-title">
-                  <span class="text" @click="showTip = true">投资关键指标</span>
+                  <span class="text">投资关键指标</span>
                   <span class="right-date">
                     <el-date-picker
                       v-model="year"
@@ -197,15 +197,27 @@
             ></dv-border-box-8>
           </div>
         </div>
-        <div class="tip" @click="showTip = false" v-show="showTip">
+        <div class="tip" v-show="showTip">
           <div class="tip-box">
-            <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 class="tip-content">
+              <div class="tip-title">地域投资明细</div>
+              <div class="tip-down" @click="showTip = false">×</div>
+
               <div ref="echartTip2" class="content"></div>
             </div>
           </div>
         </div>
+        <div class="tip" v-show="showTip2">
+          <div class="tip-box">
+            <div class="tip-content">
+              <div class="tip-title">{{tipTitle2}}</div>
+              <div class="tip-down" @click="showTip2 = false">×</div>
+              <div ref="echartTip3" class="content2"></div>
+
+              <div ref="echartTip4" class="content2"></div>
+            </div>
+          </div>
+        </div>
         <!-- <div class="footer">
           <a class="item" v-for="(item,index) in companyList" :key="index">{{item.name}}</a>
         </div> -->

investment/js/data.js

@@ -29,6 +29,65 @@ let executeList = [
   { name: '山西交控', value: 346.36, value2: 335.91 }
 ]
 
+let tipData = [
+  {name:'云时代',   value:11.70},
+    {name:'文旅集团',  value:7.07},
+    {name:'大地控股',  value:0.00},
+    {name:'汾酒集团',  value:0.00},
+    {name:'国际能源',  value:1.35},
+    {name:'航产集团',  value:42.17},
+    {name:'华舰体育',  value:0.00},
+    {name:'华新燃气',  value:0.00},
+    {name:'华阳新材',  value:2.86},
+    {name:'华远陆港',  value:29.15},
+    {name:'交控集团',  value:35.35},
+    {name:'晋能控股',  value:2.86},
+    {name:'潞安化工',  value:0.00},
+    {name:'山西建投',  value:57.56},
+    {name:'山西焦煤',  value:0.60},
+    {name:'神农科技',  value:0.00},
+    {name:'水控集团',  value:5.60},
+    {name:'太重集团',  value:41.75}
+]
+
+let tipTopData = [
+  { value: '13.63', name: '新一代信息技术产业'},
+    { value: '61.39', name: '高端装备制造产业'},
+    { value: '21.17', name: '新材料产业'},
+    { value: '40.08', name: '新能源产业'},
+    { value: '1.18', name: '生物医药产业'},   
+    { value: '11.84', name: '节能环保产业'},
+    { value: '0', name: '新能源汽车产业'},
+    { value: '0', name: '通用航空产业'},
+    { value: '19.34', name: '煤层气产业'},
+    { value: '8.56', name: '现代煤化工'},
+    { value: '2.65', name: '文化旅游'},
+    { value: '0', name: '军民融合'},
+    { value: '7.69', name: '酿造'},
+    { value: '8.92', name: '其他'}
+]
+
+let tipBottomData = [
+  { value: '18.24', name: '云时代'},
+  { value: '2.87', name: '文旅集团'},
+  { value: '10.29', name: '大地控股'},
+  { value: '7.69', name: '汾酒集团'},
+  { value: '10.06', name: '国际能源'},
+  { value: '0', name: '航产集团'},
+  { value: '0.8', name: '华舰体育'},
+  { value: '19.19', name: '华新燃气'},
+  { value: '28.25', name: '华阳新材'},
+  { value: '2.03', name: '华远陆港'},
+  { value: '2.3', name: '交控集团'},
+  { value: '31.69', name: '晋能控股'},
+  { value: '8.56', name: '潞安化工'},
+  { value: '2.76', name: '山西建投'},
+  { value: '0.34', name: '山西焦煤'},
+  { value: '5.84', name: '神农科技'}, 
+  { value: '2.79', name: '水控集团'}, 
+  { value: '42.46', name: '太重集团'}    
+]
+
 let industryList = [
   { name: '传统产业投资', value: 405.29, value2: '0.30' },
   { name: '战略新兴产业投资', value: 196.44, value2: '0.15' },

investment/js/investHome.js

@@ -2,7 +2,10 @@ let app = new Vue({
   el: '#app',
   data () {
     return {
-      showTip: true,
+      showTip: false,
+      showTip2: false,
+      tipTitle: '',
+      tipTitle2: '',
       year: '2022',
       time: '',
       timer: '',
@@ -57,8 +60,10 @@ let app = new Vue({
   mounted () {
     setTimeout(() => {
       // 左侧图表
-      this.initChartTip()
+      //this.initChartTip()
       this.initChartTip2()
+      this.initChartTip3()
+      this.initChartTip4()
       this.initChartL1()
       this.initChartL2()
       this.initChartR1()
@@ -535,107 +540,243 @@ let app = new Vue({
           },
         ],
       }
+      let that = this
       myChart.on('click', function(params) {
         console.log(params)
-        window.open('https://www.baidu.com')
+        if(params.name == '太原市'){
+          that.showTip = true
+        }
+        // window.open('https://www.baidu.com')
       })
       myChart.setOption(option)
     },
-    initChartTip(){
-      let myChart = echarts.init(this.$refs['echartTip'])
+    // 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: ['45%','40%'],
+    //         radius: ['35%', '50%'],
+    //         labelLine: {
+    //           normal: {
+    //             lineStyle: {
+    //               width: 1,
+    //             },
+    //           },
+    //         },
+    //         data: statusList,
+    //       },
+    //     ],
+    //   }
+    //   myChart.setOption(option)
+    //   tools.loopShowTooltip(myChart, option, {
+    //     nterval: 2000,
+    //     loopSeries: true,
+    //   })
+    //   myChart.on('click', function(param) {
+    //     console.log(param)
+    //     window.open('https://www.baidu.com')
+    //   })
+    // },
+    initChartTip2(){
+      let myChart = echarts.init(this.$refs['echartTip2'])
       let option = {
         tooltip: {
-          trigger: 'item',
+          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: false,//是否实时更新
+        //   filterMode: "filter"
+        //  },{
+        //   type:'inside',
+        //   show: true,
+        //   start: 1,
+        //   end: 100
+        //  }
+        // ],
+        grid: {
+          top: '10%',
+          right: '3%',
+          left: '10%',
+          bottom: '30%',
         },
-        color: ['#6682f5', '#69c0ff', '#43ede3','#8ba2ff'],
         legend: {
-          top: '0',
-          orient: 'vertical',
-          left: '2%',
+          top: '1',
+          right: '20',
           textStyle: {
-            color: '#9DB9EB',
+            color: 'rgba(250,250,250,0.6)',
+          },
+        },
+        xAxis: {
+          data: tipData.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,
+              formatter: '{value} 亿',
+              textStyle: {
+                color: 'rgba(250,250,250,0.6)',
+              },
+            },
+          },
+        ],
         series: [
           {
-            name: '',
-            type: 'pie',
-            center: ['45%','40%'],
-            radius: ['35%', '50%'],
-            labelLine: {
+            name: '投资金额',
+            type: 'bar',
+            barWidth: 15,
+            itemStyle: {
               normal: {
-                lineStyle: {
-                  width: 1,
-                },
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#69c0ff',
+                  },
+                  {
+                    offset: 1,
+                    color: '#082550',
+                  },
+                ]),
               },
             },
-            data: statusList,
+            data: tipData.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.on('click', function(data){
+        if(data.name == '交控集团'){
+          window.location.href = './investHomeChild.html?type=1'
+        }
+      })
       myChart.setOption(option)
       tools.loopShowTooltip(myChart, option, {
         nterval: 2000,
         loopSeries: true,
       })
-      myChart.on('click', function(param) {
-        console.log(param)
-        window.open('https://www.baidu.com')
-      })
     },
-    initChartTip2(){
-      let myChart = echarts.init(this.$refs['echartTip2'])
+
+    initChartTip3(){
+      let myChart = echarts.init(this.$refs['echartTip3'])
       let option = {
+        title: {
+          //text : '产业类别',
+          x: 'center',
+          textStyle: {
+            color: '#fff'
+          }
+        },
         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%',
+          top: '15%',
           right: '3%',
           left: '10%',
-          bottom: '38%',
+          bottom: '30%',
         },
         legend: {
           top: '1',
-          right: '10',
+          right: '15',
           textStyle: {
             color: 'rgba(250,250,250,0.6)',
           },
         },
         xAxis: {
-          data: executeList.map(item=>item.name),
+          data: tipTopData.map(item=>item.name),
           axisLine: {
             show: true, //隐藏X轴轴线
             lineStyle: {
@@ -648,7 +789,7 @@ let app = new Vue({
           },
           axisLabel: {
             show: true,
-            rotate: 40,
+            rotate: 30,
             textStyle: {
               color: 'rgba(255,255,255,0.6)', //X轴文字颜色
             },
@@ -675,6 +816,7 @@ let app = new Vue({
             },
             axisLabel: {
               show: true,
+              formatter: '{value} 亿',
               textStyle: {
                 color: 'rgba(250,250,250,0.6)',
               },
@@ -683,9 +825,9 @@ let app = new Vue({
         ],
         series: [
           {
-            name: '计划投资',
+            name: '2022年投资完成额',
             type: 'bar',
-            barWidth: 10,
+            barWidth: 15,
             itemStyle: {
               normal: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -700,18 +842,154 @@ let app = new Vue({
                 ]),
               },
             },
-            data: executeList.map(item=>item.value),
+            data: tipTopData.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,
+      })
+    },
+
+    initChartTip4(){
+      let myChart = echarts.init(this.$refs['echartTip4'])
+      let option = {
+        title: {
+          //text : '投资项目列表',
+          x: 'center',
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        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: false,//是否实时更新
+        //   filterMode: "filter"
+        //  },{
+        //   type:'inside',
+        //   show: true,
+        //   start: 1,
+        //   end: 100
+        //  }
+        // ],
+        grid: {
+          top: '15%',
+          right: '3%',
+          left: '10%',
+          bottom: '20%',
+        },
+        legend: {
+          top: '0',
+          right: '20',
+          textStyle: {
+            color: 'rgba(250,250,250,0.6)',
+          },
+        },
+        xAxis: {
+          data: tipBottomData.map(item=>item.name),
+          axisLine: {
+            show: true, //隐藏X轴轴线
+            lineStyle: {
+              color: '#005094',
+              width: 1,
+            },
           },
+          axisTick: {
+            show: false, //隐藏X轴刻度
+          },
+          axisLabel: {
+            show: true,
+            rotate: 30,
+            textStyle: {
+              color: 'rgba(255,255,255,0.6)', //X轴文字颜色
+            },
+          },
+        },
+        yAxis: [
           {
-            name: '实际投资',
+            type: 'value',
+            nameTextStyle: {
+              color: '#ebf8ac',
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#68b4dd66',
+                type: 'dashed',
+              },
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#3D7495',
+              },
+            },
+            axisLabel: {
+              show: true,
+              formatter: '{value} 亿',
+              textStyle: {
+                color: 'rgba(250,250,250,0.6)',
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: '2022年投资完成额',
             type: 'bar',
-            barWidth: 10,
+            barWidth: 15,
             itemStyle: {
               normal: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                   {
                     offset: 0,
-                    color: '#957DFF',
+                    color: '#69c0ff',
                   },
                   {
                     offset: 1,
@@ -720,16 +998,22 @@ let app = new Vue({
                 ]),
               },
             },
-            data: executeList.map(item=>item.value2),
+            data: tipBottomData.map(item=>item.value),
           },
         ],
       }
+      myChart.on('click', function(data){
+        if(data.name == '华阳新材'){
+          window.location.href = 'https://www.baidui.com'
+        }
+      })
       myChart.setOption(option)
       tools.loopShowTooltip(myChart, option, {
         nterval: 2000,
         loopSeries: true,
       })
     },
+
     initChartL1 () {
       let myChart = echarts.init(this.$refs['echartL1'])
       let option = {
@@ -1023,9 +1307,14 @@ let app = new Vue({
         nterval: 2000,
         loopSeries: true,
       })
+      let that = this
       myChart.on('click', function(param) {
         console.log(param)
-        window.open('https://www.baidu.com')
+        if(param.name == '战略新兴产业投资'){
+          that.tipTitle2 = param.name
+          that.showTip2 = true
+        }
+        
       })
     },
     initProjectList() {

investment/styles/investHome.css

@@ -394,7 +394,7 @@ a {
   bottom: 200px;
   left: 15px;
   background-color: rgba(3,10,12,0.46);
-  border: 1px solid #afadad;
+  border: 1px solid #4A57CF;
 }
 .status p {
   background-color: #02397F;
@@ -472,19 +472,43 @@ a {
   background-size: 100% 100%;
   padding: 100px 60px 50px;
 }
+.tip-title {
+  position: absolute; 
+  top:10px; 
+  left: calc(50% - 200px); 
+  width: 400px; 
+  text-align: center;
+  font-size: 32px;
+}
+.tip-down {
+  position: absolute; 
+  top:10px; 
+  right: 30px; 
+  width: 50px; 
+  text-align: center; 
+  height: 50px; 
+  line-height: 50px; 
+  cursor: pointer;
+  font-size: 44px;
+}
 .tip-box > div {
   font-size: 42px;
   line-height: 70px;
 }
 .tip-content {
-  height: 56vh;
+  height: 50vh;
   overflow: auto;
   padding-right: 15px;
-  margin-top: 2%;
+  margin-top: 1%;
 }
 .tip-content .content {
   height: calc(56vh - 60px);
-  width: 400px;
+  width: 750px;
+}
+
+.tip-content .content2 {
+  height: 20vh;
+  width: 750px;
 }
 div::-webkit-scrollbar {
   width: 4px;