二级页面右边产业布局添加弹窗展示

investment/investHome2.html

@@ -241,6 +241,11 @@
           <div class="pie" ref="echartR5" style="width: 100%; height: 100%;"></div>
         </div>
       </div>
+      <div class="tip" v-show="showTip3">
+        <div class="tip-down" @click="showTip3 = false">×</div>
+        <div class="tip1">{{ echartTitle }}</div>
+        <div class="pie" ref="echartT1" style="width: 100%; height: 100%;"></div>
+      </div>
     </dv-full-screen-container>
   </div>
   <script src="./js/investHome2.js"></script>

investment/js/investHome2.js

@@ -4,6 +4,8 @@ let app = new Vue({
     return {
       type: true, // 切换柱状图状态
       showTip2: false,
+      showTip3: false,
+      echartTitle: '',
       year: '2022',
       time: '',
       timer: '',
@@ -977,13 +979,13 @@ let app = new Vue({
         tooltip: {
           trigger: 'item',
           formatter: function (params) {
-            return '名称：' + params.name + '</br >' + '项目数量：' + params.value[1] + '个' + '</br >' + '投资金额：' + params.value[0] + '亿' + '</br >' + '占比：' + (params.value[0] / count * 100).toFixed(2) + '%'
+              return params.name + '，' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + '，' + params.value[0] + '亿'
           }
         },
         color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
         legend: {
           orient: 'horizontal',
-          show: true,
+          show: false,
           icon: 'circle',
           top: 'bottom',
           orient: 'vertical',
@@ -1000,8 +1002,8 @@ let app = new Vue({
             name: '',
             type: 'pie',
             // radius: ['0%', '70%'],
-            radius: ['40%', '55%'],
-            center: ['45%', '55%'],
+            radius: ['50%', '65%'],
+            center: ['50%', '55%'],
             itemStyle: {
               normal: {
                 borderColor: 'rgba(1,31,64,0.7)',
@@ -1023,6 +1025,14 @@ let app = new Vue({
         nterval: 2000,
         loopSeries: true,
       })
+      let that = this
+      myChart.on('click', function (param) {
+        console.log(param)
+        that.showTip3 = true
+        setTimeout(() => {
+          that.initChartT1(data, option)
+        })
+      })
     },
     initChartL5 () {
       let data = [
@@ -1030,8 +1040,10 @@ let app = new Vue({
         { value: [59.11, 38], name: '高端装备制造产业' },
         { value: [3.96, 5], name: '新材料产业' },
         { value: [2.12, 7], name: '生物产业' },
+        { value: [0, 0], name: '新能源汽车产业' },
         { value: [100.09, 79], name: '新能源产业' },
         { value: [15.48, 32], name: '节能环保产业' },
+        { value: [0, 0], name: '数字创意产业' },
         { value: [3.00, 3], name: '相关服务业' },
       ]
       let count = 0
@@ -1041,7 +1053,7 @@ let app = new Vue({
       let myChart = echarts.init(this.$refs['echartL5'])
       let option = {
         title: {
-          text: '传统产业',
+          text: '战略性新兴产业',
           x: 'center',
           y: '0%',
           textStyle: {
@@ -1052,12 +1064,12 @@ let app = new Vue({
         tooltip: {
           trigger: 'item',
           formatter: function (params) {
-            return '名称：' + params.name + '</br >' + '项目数量：' + params.value[1] + '个' + '</br >' + '投资金额：' + params.value[0] + '亿' + '</br >' + '占比：' + (params.value[0] / count * 100).toFixed(2) + '%'
+              return params.name + '，' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + '，' + params.value[0] + '亿'
           }
         },
         color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
         legend: {
-          show: true,
+          show: false,
           icon: 'circle',
           top: 'bottom',
           orient: 'vertical',
@@ -1074,8 +1086,8 @@ let app = new Vue({
             name: '',
             type: 'pie',
             // radius: ['0%', '70%'],
-            radius: ['40%', '55%'],
-            center: ['45%', '55%'],
+            radius: ['50%', '65%'],
+            center: ['50%', '55%'],
             itemStyle: {
               normal: {
                 borderColor: 'rgba(1,31,64,0.7)',
@@ -1097,7 +1109,16 @@ let app = new Vue({
         nterval: 2000,
         loopSeries: true,
       })
-    }, initChartL6 () {
+      let that = this
+      myChart.on('click', function (param) {
+        console.log(param)
+        that.showTip3 = true
+        setTimeout(() => {
+          that.initChartT1(data, option)
+        })
+      })
+    },
+    initChartL6 () {
       let data = [
         { value: [25.82, 43], name: '化工产业' },
         { value: [17.36, 21], name: '煤层气产业' },
@@ -1106,6 +1127,7 @@ let app = new Vue({
         { value: [9.32, 5], name: '酿造' },
         { value: [71.12, 129], name: '建筑房地产' },
         { value: [9.11, 14], name: '农业' },
+        { value: [0, 0], name: '其他' },
       ]
       let count = 0
       data.forEach(item => {
@@ -1115,7 +1137,7 @@ let app = new Vue({
       let myChart = echarts.init(this.$refs['echartL6'])
       let option = {
         title: {
-          text: '战略性新兴产业',
+          text: '特色优势产业',
           x: 'center',
           y: '0%',
           textStyle: {
@@ -1126,13 +1148,13 @@ let app = new Vue({
         tooltip: {
           trigger: 'item',
           formatter: function (params) {
-            return '名称：' + params.name + '</br >' + '项目数量：' + params.value[1] + '个' + '</br >' + '投资金额：' + params.value[0] + '亿' + '</br >' + '占比：' + (params.value[0] / count * 100).toFixed(2) + '%'
+              return params.name + '，' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + '，' + params.value[0] + '亿'
           }
           // position: ['30%', '87%'],
         },
         color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
         legend: {
-          show: true,
+          show: false,
           icon: 'circle',
           top: 'bottom',
           orient: 'vertical',
@@ -1149,8 +1171,8 @@ let app = new Vue({
             name: '',
             type: 'pie',
             // radius: ['0%', '70%'],
-            radius: ['40%', '55%'],
-            center: ['45%', '55%'],
+            radius: ['50%', '65%'],
+            center: ['50%', '55%'],
             itemStyle: {
               normal: {
                 borderColor: 'rgba(1,31,64,0.7)',
@@ -1172,12 +1194,22 @@ let app = new Vue({
         nterval: 2000,
         loopSeries: true,
       })
-    }, initChartL7 () {
+      let that = this
+      myChart.on('click', function (param) {
+        console.log(param)
+        that.showTip3 = true
+        setTimeout(() => {
+          that.initChartT1(data, option)
+        })
+      })
+    },
+    initChartL7 () {
       let data = [
         { value: [155.82, 51], name: '交通运输业' },
+        { value: [0, 0], name: '市政设施' },
         { value: [8.47, 19], name: '煤气层管网' },
         { value: [10.64, 24], name: '物流贸易' },
-        { value: [41.05, 46], name: '物流贸易' },
+        { value: [41.05, 46], name: '水务' },
         { value: [2.14, 7], name: '其他' },
       ]
       let count = 0
@@ -1187,7 +1219,7 @@ let app = new Vue({
       let myChart = echarts.init(this.$refs['echartL7'])
       let option = {
         title: {
-          text: '基础产业',
+          text: '公共基础等产业',
           x: 'center',
           y: '0%',
           textStyle: {
@@ -1198,12 +1230,12 @@ let app = new Vue({
         tooltip: {
           trigger: 'item',
           formatter: function (params) {
-            return '名称：' + params.name + '</br >' + '项目数量：' + params.value[1] + '个' + '</br >' + '投资金额：' + params.value[0] + '亿' + '</br >' + '占比：' + (params.value[0] / count * 100).toFixed(2) + '%'
+              return params.name + '，' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + '，' + params.value[0] + '亿'
           }
         },
         color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
         legend: {
-          show: true,
+          show: false,
           icon: 'circle',
           top: 'bottom',
           orient: 'vertical',
@@ -1220,8 +1252,8 @@ let app = new Vue({
             name: '',
             type: 'pie',
             // radius: ['0%', '70%'],
-            radius: ['40%', '55%'],
-            center: ['45%', '55%'],
+            radius: ['50%', '65%'],
+            center: ['50%', '55%'],
             itemStyle: {
               normal: {
                 borderColor: 'rgba(1,31,64,0.7)',
@@ -1243,6 +1275,14 @@ let app = new Vue({
         nterval: 2000,
         loopSeries: true,
       })
+      let that = this
+      myChart.on('click', function (param) {
+        console.log(param)
+        that.showTip3 = true
+        setTimeout(() => {
+          that.initChartT1(data, option)
+        })
+      })
     },
     initChartR4 () {
       let myChart = echarts.init(this.$refs['echartR4'])
@@ -1832,6 +1872,44 @@ let app = new Vue({
         nterval: 2000,
         loopSeries: true,
       })
+    },
+    initChartT1(list, info) {
+      let count = 0
+      console.log(list, info)
+      this.echartTitle = info.title.text
+      let data = list
+      data.forEach(item => {
+        count += item.value[0]
+      })
+      let option = JSON.parse(JSON.stringify(info))
+      option.series[0].center = ['50%', '50%']
+      option.series[0].radius = ['60%', '75%']
+      option.legend = {
+        show: true,
+        icon: 'circle',
+        top: 'bottom',
+        orient: 'vertical',
+        right: '3%',
+        textStyle: {
+          color: '#9DB9EB',
+          fontSize: 16
+        },
+        itemWidth: 10,
+        itemHeight: 10
+      },
+      option.title.text =  ''
+      option.tooltip = {
+        trigger: 'item',
+        formatter: function (params) {
+            return params.name + '，' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + '，' + params.value[0] + '亿'
+        }
+      }
+      let myChart = echarts.init(this.$refs['echartT1'])
+      myChart.setOption(option)
+      tools.loopShowTooltip(myChart, option, {
+        nterval: 2000,
+        loopSeries: true,
+      })
     }
   },
 })

investment/styles/investHome2.css

@@ -487,7 +487,7 @@ a {
   height: 100%;
 }
 .tip {
-  z-index: 999;
+  z-index: 99999999;
   position: fixed;
   /* top: 35%;
   left: 32.5%; */
@@ -505,13 +505,14 @@ a {
 .tip1 {
   position: absolute;
   font-weight: bold;
-  width: 100px;
+  width: 150px;
   top: 17px;
   height: 30px;
   line-height: 30px;
   font-size: 20px;
   text-align: center;
-  left: calc(50% - 50px);
+  left: 50%;
+  transform: translate(-50%);
   background: linear-gradient(-3deg, #99eeff 0%, #99eeff 30%, #ffffff 91%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;