饼图，柱状图添加点击跳转事件

investment/investHome2.html

@@ -27,7 +27,7 @@
         </header>
         <div class="main">
           <div class="left">
-            <dv-border-box-8 :dur="10" style="height: calc(100% / 3); margin-bottom: 10px;">
+            <dv-border-box-8 :dur="10" style="flex: 1; margin-bottom: 10px;">
               <div class="title">
                 <span class="text">储备项目分析</span>
               </div>
@@ -60,7 +60,7 @@
                 </div>
               </div>
             </dv-border-box-8>
-            <dv-border-box-8 :dur="10" style="height: calc(100% / 3); margin-bottom: 10px;">
+            <dv-border-box-8 :dur="10" style="flex: 1; margin-bottom: 10px;">
               <div class="title">
                 <span class="text">投资额度分析</span>
                 <span class="tip-window">2023年</span>
@@ -101,7 +101,7 @@
                 </div>
               </div>
             </dv-border-box-8>
-            <dv-border-box-8 :dur="10" style="height: calc(100% / 3);">
+            <dv-border-box-8 :dur="10" style="flex: 1;">
               <div class="title">
                 <span class="text">重点项目两线指标</span>
               </div>
@@ -122,7 +122,7 @@
             </dv-border-box-8>
           </div>
           <div class="right">
-            <dv-border-box-8 :dur="10" style="height: calc(100% / 3); margin-bottom: 10px;">
+            <dv-border-box-8 :dur="10" style="flex: 1; margin-bottom: 10px;">
               <div class="title">
                 <span class="text">投资计划分析</span>
                 <span class="tip-window">2023年</span>
@@ -183,7 +183,7 @@
                 </div>
               </div>
             </dv-border-box-8>
-            <dv-border-box-8 :dur="10" style="height: calc((100% / 3 + 5px) * 2);">
+            <dv-border-box-8 :dur="10" style="flex: 1; margin-bottom: 10px;">
               <div class="title">
                 <span class="text">投前项目阶段分析</span>
                 <span class="tip-window">省重点项目</span>
@@ -192,9 +192,19 @@
                 <div class="content-top">
                   <div ref="echartR3" style="width: 100%; height: 100%;"></div>
                 </div>
-                <div class="content-bot">
+              </div>
+            </dv-border-box-8>
+            <dv-border-box-8 :dur="10" style="flex: 1;">
+              <div class="title">
+                <span class="text">企业后评价分析</span>
+              </div>
+              <div class="content">
+                <div class="content-left">
                   <div ref="echartR4" style="width: 100%; height: 100%;"></div>
                 </div>
+                <div class="content-right">
+                  <div ref="echartR5" style="width: 100%; height: 100%;"></div>
+                </div>
               </div>
             </dv-border-box-8>
           </div>

investment/js/investHome.js

@@ -618,6 +618,10 @@ let app = new Vue({
         nterval: 2000,
         loopSeries: true,
       })
+      myChart.on('click', function(param) {
+        console.log(param)
+        window.open('https://www.baidu.com')
+      })
     },
     initChartL2 () {
       let myChart = echarts.init(this.$refs['echartL2'])
@@ -925,6 +929,10 @@ let app = new Vue({
         nterval: 2000,
         loopSeries: true,
       })
+      myChart.on('click', function(param) {
+        console.log(param)
+        window.open('https://www.baidu.com')
+      })
     },
   },
 })

investment/js/investHome2.js

@@ -71,6 +71,7 @@ let app = new Vue({
       this.initChartR2()
       this.initChartR3()
       this.initChartR4()
+      this.initChartR5()
     }, 0)
   },
   methods: {
@@ -972,7 +973,10 @@ let app = new Vue({
           }
         },
         grid: {
-          show: false
+          top: '22%',
+          right: '5%',
+          left: '10%',
+          bottom: '15%',
         },
         yAxis: {
           data: ['批量备案', '特别监管'],
@@ -1020,7 +1024,7 @@ let app = new Vue({
         },
         series: [
           {
-            name: '',
+            name: '批量备案',
             type: 'scatter',
             symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
             symbolSize: function (data) {
@@ -1049,7 +1053,7 @@ let app = new Vue({
             ]
           },
           {
-            name: '',
+            name: '特别监管',
             type: 'scatter',
             symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
             symbolSize: function (data) {
@@ -1088,56 +1092,146 @@ let app = new Vue({
       let myChart = echarts.init(this.$refs['echartR4'])
       let option = {
         title: {
-          text: '股权投资项目',
+          text: '当居企后评价项目数后',
+          x: 'center',
+          y: '3%',
           textStyle: {
             color: '#69C0FF',
+            fontSize: 14,
           },
-          top: '10',
-          left: '10'
-        },
-        textStyle: {
-          color: '#fff',
         },
         tooltip: {
-          trigger: "axis",
+          trigger: 'axis',
           axisPointer: {
-            lineStyle: {
-              type: 'dashed',
-              width: 2,
-              color: 'rgba(255,255,255,0.6)'
-            },
-            animation: true
-          }
+            type: 'shadow',
+          },
         },
         grid: {
-          show: false
+          top: '22%',
+          right: '5%',
+          left: '10%',
+          bottom: '15%',
         },
-        yAxis: {
-          data: ['批量备案', '特别监管'],
-          splitLine: {
-            show: true,
+        legend: {
+          data: '',
+          top: '12%',
+          right: '5%',
+          textStyle: {
+            color: 'rgba(250,250,250,0.6)',
+            fontSize: 16,
+          },
+        },
+        xAxis: {
+          data: ['一级', '二级'],
+          axisLine: {
+            show: true, //隐藏X轴轴线
             lineStyle: {
-              color: '#68b4dd66',
-              type: 'dashed',
+              color: '#005094',
+              width: 1,
             },
           },
-          axisLine: {
-            show: false
+          axisTick: {
+            show: false, //隐藏X轴刻度
           },
           axisLabel: {
             show: true,
-            formatter: '{value}',
+            rotate: 15,
             textStyle: {
-              color: 'rgba(250,250,250,0.6)',
+              color: 'rgba(255,255,255,0.6)', //X轴文字颜色
+              fontSize: 16,
             },
           },
-          nameTextStyle: {
-            color: '#ebf8ac',
-            fontSize: 16,
+        },
+        yAxis: [
+          {
+            type: 'value',
+            nameTextStyle: {
+              color: '#ebf8ac',
+              fontSize: 16,
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#68b4dd66',
+                type: 'dashed',
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: 'rgba(250,250,250,0.6)',
+                fontSize: 16,
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: '',
+            type: 'bar',
+            barWidth: 15,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#69c0ff',
+                  },
+                  {
+                    offset: 1,
+                    color: '#082550',
+                  },
+                ]),
+              },
+            },
+            data: [10, 20],
+          },
+        ],
+      }
+      myChart.setOption(option)
+      tools.loopShowTooltip(myChart, option, {
+        nterval: 2000,
+        loopSeries: true,
+      })
+    },
+    initChartR5 () {
+      let myChart = echarts.init(this.$refs['echartR5'])
+      let option = {
+        title: {
+          text: '当属企业评分情况',
+          x: 'center',
+          y: '3%',
+          textStyle: {
+            color: '#69C0FF',
+            fontSize: 14,
+          },
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        grid: {
+          top: '22%',
+          right: '5%',
+          left: '10%',
+          bottom: '15%',
+        },
+        legend: {
+          data: ['过程管控企业层得分', '发展线指标情况企业层得分'],
+          top: '12%',
+          right: '5%',
+          textStyle: {
+            color: 'rgba(250,250,250,0.6)',
+            fontSize: 12,
           },
         },
         xAxis: {
-          data: ['项目储备', '项目立项', '项目可研', '可研论证', '投资决策'],
+          data: ['一级', '二级'],
           axisLine: {
             show: true, //隐藏X轴轴线
             lineStyle: {
@@ -1150,71 +1244,81 @@ let app = new Vue({
           },
           axisLabel: {
             show: true,
+            rotate: 15,
             textStyle: {
               color: 'rgba(255,255,255,0.6)', //X轴文字颜色
-              fontSize: 12,
+              fontSize: 16,
             },
           },
         },
-        series: [
+        yAxis: [
           {
-            name: '',
-            type: 'scatter',
-            symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
-            symbolSize: function (data) {
-              return Math.sqrt(data[2]) * 0.5;
+            type: 'value',
+            nameTextStyle: {
+              color: '#ebf8ac',
+              fontSize: 16,
             },
-            label: {
-              emphasis: {
-                show: true,
-                formatter: function (param) {
-                  return param.data[2];
-                },
-                position: 'top'
-              }
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#68b4dd66',
+                type: 'dashed',
+              },
+            },
+            axisLine: {
+              show: false,
             },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: 'rgba(250,250,250,0.6)',
+                fontSize: 16,
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: '过程管控企业层得分',
+            type: 'bar',
+            barWidth: 15,
             itemStyle: {
               normal: {
-                color: '#45DAD1'
-              }
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#5e7ae9',
+                  },
+                  {
+                    offset: 1,
+                    color: '#082550',
+                  },
+                ]),
+              },
             },
-            data: [
-              ['项目储备', '批量备案', 200],
-              ['项目立项', '批量备案', 1500],
-              ['项目可研', '批量备案', 2000],
-              ['可研论证', '批量备案', 2500],
-              ['投资决策', '批量备案', 3000],
-            ]
+            data: [10, 20],
           },
           {
-            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'
-              }
-            },
+            name: '发展线指标情况企业层得分',
+            type: 'bar',
+            barWidth: 15,
             itemStyle: {
               normal: {
-                color: '#40A9FF'
-              }
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#69c0ff',
+                  },
+                  {
+                    offset: 1,
+                    color: '#082550',
+                  },
+                ]),
+              },
             },
-            data: [
-              ['项目储备', '特别监管', 1400],
-              ['项目立项', '特别监管', 1500],
-              ['项目可研', '特别监管', 5500],
-              ['可研论证', '特别监管', 500],
-            ]
-          }
-        ]
+            data: [10, 20],
+          },
+        ],
       }
       myChart.setOption(option)
       tools.loopShowTooltip(myChart, option, {