Browse Source

修改二级页固定资产,股权类展示

l1448442195@163.com 1 year ago
parent
commit
148a0614c9
3 changed files with 175 additions and 37 deletions
  1. 5 2
      investment/investHome2.html
  2. 169 34
      investment/js/investHome2.js
  3. 1 1
      investment/styles/investHome2.css

+ 5 - 2
investment/investHome2.html

@@ -188,8 +188,11 @@
               <span class="text">投前项目阶段分析</span>
               <!-- <span class="tip-window">省重点项目</span> -->
             </div>
-            <div class="content" style="flex-direction: column;">
-              <div class="content-top" style="margin-bottom: 0;">
+            <div class="content">
+              <div class="content-top" style="margin-bottom: 0; margin-right: 10px;">
+                <div ref="echartR6" style="width: 100%; height: 100%;"></div>
+              </div>
+              <div class="content-right" style="margin-bottom: 0;">
                 <div ref="echartR3" style="width: 100%; height: 100%;"></div>
               </div>
             </div>

+ 169 - 34
investment/js/investHome2.js

@@ -77,6 +77,7 @@ let app = new Vue({
       this.initChartR1()
       this.initChartR2()
       this.initChartR3()
+      this.initChartR6()
     },)
   },
   methods: {
@@ -1377,9 +1378,11 @@ let app = new Vue({
       let myChart = echarts.init(this.$refs['echartR3'])
       let option = {
         title: {
-          text: '固定资产项目',
+          text: '股权类',
           textStyle: {
             color: '#69C0FF',
+            fontSize: 16,
+            fontWeight: 500
           },
           top: '10',
           left: '10'
@@ -1389,6 +1392,10 @@ let app = new Vue({
         },
         tooltip: {
           trigger: "axis",
+          formatter: function(params) {
+            var tip = params[0].axisValue + '<br/>' + params[0].marker + params[0].data[1]+ ':'+ params[0].data[2]+ '个,'+ params[0].data[3] + '亿元' + '<br/>'+ params[1].marker +  params[1].data[1]+ ':'+ params[1].data[2]+ '个,'+ params[0].data[3] + '亿元';
+            return tip
+          },
           axisPointer: {
             lineStyle: {
               type: 'dashed',
@@ -1401,28 +1408,11 @@ let app = new Vue({
         grid: {
           top: '25%',
           right: '5%',
-          left: '10%',
-          bottom: '0',
-        },
-        visualMap: {
-          type: 'piecewise',
-          top: 'top',
-          min: 0,
-          right: 100,
-          textStyle: {
-            color: 'white',
-          },
-          // pieces: ['固定投资累类', '股权及其他类']
-          pieces: [{
-            label: '固定资产类',
-            color: 'orange'
-          }, {
-            label: '股权及其他类',
-            color: '#6b61a8'
-          }]
+          left: '15%',
+          bottom: '15%',
         },
         yAxis: {
-          data: ['批量备案', '特别监管'],
+          data: ['备案', '特别监管'],
           splitLine: {
             show: true,
             lineStyle: {
@@ -1446,7 +1436,7 @@ let app = new Vue({
           },
         },
         xAxis: {
-          data: ['项目储备', '项目立项', '项目可研', '可研论证', '投资决策'],
+          data: ['项目储备', '项目立项','可研论证', '投资决策'],
           axisLine: {
             show: true, //隐藏X轴轴线
             lineStyle: {
@@ -1467,9 +1457,37 @@ let app = new Vue({
         },
         series: [
           {
-            name: '批量备案',
+            name: '',
             type: 'scatter',
-            symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
+            symbol: 'circle',
+            symbolSize: function (data) {
+              return Math.sqrt(data[2]) * 0.5;
+            },
+            label: {
+              emphasis: {
+                show: true,
+                formatter: function (param) {
+                  return param.data[2];
+                },
+                position: 'top'
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: '#40A9FF'
+              }
+            },
+            data: [
+              ['项目储备', '特别监管', 1400, 100],
+              ['项目立项', '特别监管', 1500, 90],
+              ['可研论证', '特别监管', 500, 80],
+              ['投资决策', '特别监管', 3000, 70],
+            ]
+          },
+          {
+            name: '',
+            type: 'scatter',
+            symbol: 'circle',
             symbolSize: function (data) {
               return Math.sqrt(data[2]) * 0.5;
             },
@@ -1488,13 +1506,102 @@ let app = new Vue({
               }
             },
             data: [
-              ['项目储备', '批量备案', 200],
-              ['项目立项', '批量备案', 1500],
-              ['项目可研', '批量备案', 2000],
-              ['可研论证', '批量备案', 2500],
-              ['投资决策', '批量备案', 3000],
+              ['项目储备', '备案', 200, 100],
+              ['项目立项', '备案', 1500, 90],
+              ['可研论证', '备案', 2500, 80],
+              ['投资决策', '备案', 3000, 70],
             ]
           },
+        ]
+      }
+      myChart.setOption(option)
+      tools.loopShowTooltip(myChart, option, {
+        nterval: 2000,
+        loopSeries: true,
+      })
+    },
+    initChartR6 () {
+      let myChart = echarts.init(this.$refs['echartR6'])
+      let option = {
+        title: {
+          text: '固定资产',
+          textStyle: {
+            color: '#69C0FF',
+            fontSize: 16,
+            fontWeight: 500
+          },
+          top: '10',
+          left: '10'
+        },
+        textStyle: {
+          color: '#fff',
+        },
+        tooltip: {
+          trigger: "axis",
+          formatter: function(params) {
+            var tip = params[0].axisValue + '<br/>' + params[0].marker +  params[0].data[1]+ ':'+ params[0].data[2]+ '个,'+ params[0].data[3] + '亿元' + '<br/>'+ params[1].marker +  params[1].data[1]+ ':'+ params[1].data[2]+ '个,'+ params[0].data[3] + '亿元';
+            return tip
+          },
+          axisPointer: {
+            lineStyle: {
+              type: 'dashed',
+              width: 2,
+              color: 'rgba(255,255,255,0.6)'
+            },
+            animation: true
+          }
+        },
+        grid: {
+          top: '25%',
+          right: '5%',
+          left: '15%',
+          bottom: '15%',
+        },
+        yAxis: {
+          data: ['备案', '特别监管'],
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#68b4dd66',
+              type: 'dashed',
+            },
+          },
+          axisLine: {
+            show: false
+          },
+          axisLabel: {
+            show: true,
+            formatter: '{value}',
+            textStyle: {
+              color: 'rgba(250,250,250,0.6)',
+            },
+          },
+          nameTextStyle: {
+            color: '#ebf8ac',
+            fontSize: 16,
+          },
+        },
+        xAxis: {
+          data: ['项目储备', '项目立项', '可研论证', '投资决策'],
+          axisLine: {
+            show: true, //隐藏X轴轴线
+            lineStyle: {
+              color: '#005094',
+              width: 1,
+            },
+          },
+          axisTick: {
+            show: false, //隐藏X轴刻度
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: 'rgba(255,255,255,0.6)', //X轴文字颜色
+              fontSize: 12,
+            },
+          },
+        },
+        series: [
           {
             name: '特别监管',
             type: 'scatter',
@@ -1517,12 +1624,40 @@ let app = new Vue({
               }
             },
             data: [
-              ['项目储备', '特别监管', 1400],
-              ['项目立项', '特别监管', 1500],
-              ['项目可研', '特别监管', 5500],
-              ['可研论证', '特别监管', 500],
+              ['项目储备', '特别监管', 1400, 100],
+              ['项目立项', '特别监管', 1500, 90],
+              ['可研论证', '特别监管', 500, 80],
+              ['投资决策', '特别监管', 3000, 70],
             ]
-          }
+          },
+          {
+            name: '备案',
+            type: 'scatter',
+            symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
+            symbolSize: function (data) {
+              return Math.sqrt(data[2]) * 0.5;
+            },
+            label: {
+              emphasis: {
+                show: true,
+                formatter: function (param) {
+                  return param.data[2];
+                },
+                position: 'top'
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: '#45DAD1'
+              }
+            },
+            data: [
+              ['项目储备', '备案', 200, 100],
+              ['项目立项', '备案', 1500, 90],
+              ['可研论证', '备案', 2500, 80],
+              ['投资决策', '备案', 3000, 70],
+            ]
+          },
         ]
       }
       myChart.setOption(option)

+ 1 - 1
investment/styles/investHome2.css

@@ -361,7 +361,7 @@ a {
   margin-bottom: 10px;
 }
 .right .content .content-top,
-.right .content .content-bot {
+.right .content .content-bot, .right .content .content-right{
   background-color: rgb(18 81 128 / 22%);
   flex: 1;
 }