水球图提交

investmentNew/index.html

@@ -44,7 +44,8 @@
                 <div style="font-size: 28px">固定资产类项目</div>
                 <div></div>
                 <div style="font-size: 50px; color: #68bdff; font-weight: bold">
-                  1,608.69<span style="font-size: 28px">亿</span>
+                  1,608.69<span style="font-size: 28px"
+                    @click.stop="showChartLTipSingle('投资金额','left','','','投资计划分析','固定资产投资金额','','','','','',2141)">亿</span>
                 </div>
                 <div style="
                       font-size: 50px;
@@ -614,8 +615,8 @@
       </div>
       <div class="bottom-tip" @click="backChina"></div>
     </div>
-    <!-- 双柱状图弹窗 -->
-    <div class="absolute  backBlack" v-if="tipShow1">
+    <!-- 标题状图弹窗 -->
+    <div class="absolute  backBlack" v-if="tipShow1 || tipShow2 ">
       <div class="tip-box1" v-show="tipShow1">
         <img src="./img/close.png" style="width: 40px;height: 40px;top: 30px;right: 30px;" class="absolute pointer"
           alt="" @click="closeTap()">
@@ -626,6 +627,15 @@
           <img :src="`./img/titleImg/${titleUrl}`" class="titleImg" alt="">
         </div>
       </div>
+      <!-- 单个柱状图弹窗 -->
+      <div class="tip-box1" v-show="tipShow2">
+        <img src="./img/close.png" style="width: 40px;height: 40px;top: 30px;right: 30px;" class="absolute pointer"
+          alt="" @click="closeTap()">
+        <div class="pop-title1">{{titleName}}</div>
+        <div class="pop-content1 text-center">
+          <div class="h-full w-full" ref=""></div>
+        </div>
+      </div>
     </div>
   </div>
   <script src="./js/index.js"></script>

investmentNew/js/index.js

@@ -24,7 +24,9 @@ let app = new Vue({
       leftEcharts14: '',
       leftEcharts15: '',
       leftEcharts17: '', //投资产业分布中间的水球图
+      leftEcharts18: '', //单个柱状图弹窗
       tipShow1: false, // 标题弹窗显示
+      tipShow2: false, // 单柱状图弹窗 
       stageTitle: '', // 投资阶段分析圆环图内容
       stageTitle2: '', // 投资阶段分析圆环图内容
       echartR2Fd: true, // 投后进度成本偏差防抖
@@ -488,40 +490,69 @@ let app = new Vue({
     clearInterval(this.time2);
   },
   mounted () {
-    let that = this
-    this.time4s();
-    this.timeNs();
-    this.filterLpData();
-    this.lpRotate();
-    setTimeout(() => {
-      if (that.mapShow) {
-        that.leftEcharts12Fun()
-        that.leftEcharts14Fun()
-        that.leftEcharts9Fun()
-        that.leftEcharts15Fun()
-        that.leftEcharts13Fun()
-        that.shanxiEchartsFun()
-        that.leftEcharts17Fun()
-      } else {
-        that.chinaEchartsFun()
-        that.leftEcharts16Fun() // 中国地图背景地球
-      }
-      this.leftEcharts1Fun();
-      this.leftEcharts2Fun();
-      this.leftEcharts3Fun();
-      this.leftEcharts4Fun();
-      this.leftEcharts5Fun();
-      this.leftEcharts6Fun();
-      this.leftEcharts7Fun();
-      this.leftEcharts8Fun();
-      this.leftEcharts10Fun();
-      this.leftEcharts11Fun();
-      this.rightEcharts1Fun();
-      this.initChartR2();
-      this.initChartR4();
-    });
+    this.getUrlParams()
   },
   methods: {
+    // 获取地址栏参数
+    getUrlParams (id) {
+      let url = window.location.href
+      // 通过 ? 分割获取后面的参数字符串
+      let urlStr = url.split('?')[1]
+      if (!urlStr) {
+        this.comeIn()
+        return
+      }
+      // 创建空对象存储参数
+      let obj = {};
+      // 再通过 & 将每一个参数单独分割出来
+      let paramsArr = urlStr.split('&')
+      for (let i = 0, len = paramsArr.length; i < len; i++) {
+        // 再通过 = 将每一个参数分割为 key:value 的形式
+        let arr = paramsArr[i].split('=')
+        obj[arr[0]] = arr[1];
+      }
+      if (obj.model) {
+        obj.model == 'A' || obj.model == 'a' ? this.mockData = false : this.mockData = true
+      }
+      obj.env && (this.env = obj.env)
+      this.goUrl = (obj.env == 'SIT' || obj.env == 'sit') ? '172.21.3.68:8081' : (obj.env == 'UAT' || obj.env == 'uat') ? '172.21.3.149:8081' : '172.21.3.242:8081'
+      this.accountId = obj.accountid
+      this.comeIn()
+    },
+    comeIn () {
+      let that = this
+      this.time4s();
+      this.timeNs();
+      this.filterLpData();
+      this.lpRotate();
+      setTimeout(() => {
+        if (that.mapShow) {
+          that.leftEcharts17Fun()
+          that.leftEcharts12Fun()
+          that.leftEcharts14Fun()
+          that.leftEcharts9Fun()
+          that.leftEcharts15Fun()
+          that.leftEcharts13Fun()
+          that.shanxiEchartsFun()
+        } else {
+          that.chinaEchartsFun()
+          that.leftEcharts16Fun() // 中国地图背景地球
+        }
+        this.leftEcharts1Fun();
+        this.leftEcharts2Fun();
+        this.leftEcharts3Fun();
+        this.leftEcharts4Fun();
+        this.leftEcharts5Fun();
+        this.leftEcharts6Fun();
+        this.leftEcharts7Fun();
+        this.leftEcharts8Fun();
+        this.leftEcharts10Fun();
+        this.leftEcharts11Fun();
+        this.rightEcharts1Fun();
+        this.initChartR2();
+        this.initChartR4();
+      });
+    },
     // 解决除法是去精度
     numDiv (num1, num2) {
       var baseNum1 = 0, baseNum2 = 0;
@@ -1623,6 +1654,7 @@ let app = new Vue({
         }
       }, 2000);
     },
+    // 转盘计算角度
     filterLpData () {
       const angle = 360 / this.investData.investList.length;
       for (let i in this.investData.investList) {
@@ -3192,13 +3224,15 @@ let app = new Vue({
               });
               let a = window.location.href.split('/')
               a.pop()
-              // return `<div class="bgTooltip" style="background: url('${a.join('/')}/img/shanxi/${params.dataIndex}.png') no-repeat center center;background-size: 100% 100%;font-size:36px">
-              // <div class="flex items-center">
-              //   <img src="./img/yellowArrow.png" style="width: 12px;height: 22px;margin-right:10px" alt=""><span class="fb">${params.name}</span>
-              // </div>
-              //   <div class="blueIcon flex items-center">项目数量：<span class="fb" style="color:#68BDFF;">${params.value[3]}<span style="font-size:20px" class="fn">个</span></span></div>
-              //   <div class="blueIcon flex items-center">投资总额：<span class="fb" style="color:#68BDFF">${params.value[2]}<span style="font-size:20px" class="fn">亿</span></span></div>
-              // </div>`;
+              if (params.value) {
+                return `<div class="bgTooltip" style="background: url('${a.join('/')}/img/shanxi/${params.dataIndex}.png') no-repeat center center;background-size: 100% 100%;font-size:36px">
+                <div class="flex items-center">
+                  <img src="./img/yellowArrow.png" style="width: 12px;height: 22px;margin-right:10px" alt=""><span class="fb">${params.name}</span>
+                </div>
+                  <div class="blueIcon flex items-center">项目数量：<span class="fb" style="color:#68BDFF;">${params.value[3]}<span style="font-size:20px" class="fn">个</span></span></div>
+                  <div class="blueIcon flex items-center">投资总额：<span class="fb" style="color:#68BDFF">${params.value[2]}<span style="font-size:20px" class="fn">亿</span></span></div>
+                </div>`;
+              }
             },
           },
           regions: [
@@ -3618,13 +3652,15 @@ let app = new Vue({
                 name: params.name,
                 seriesName: "series\u00001",
               });
-              // return `<div class="bgTooltip" style="background: rgba(50,50,50,0.7);font-size:36px">
-              // <div class="flex items-center">
-              //   <img src="./img/yellowArrow.png" style="width: 12px;height: 22px;margin-right:10px" alt=""><span class="fb">${params.name}</span>
-              // </div>
-              //   <div class="blueIcon flex items-center">项目数量：<span class="fb" style="color:#68BDFF;">${params.value[3]}<span style="font-size:20px" class="fn">个</span></span></div>
-              //   <div class="blueIcon flex items-center">投资总额：<span class="fb" style="color:#68BDFF">${params.value[2]}<span style="font-size:20px" class="fn">亿</span></span></div>
-              // </div>`;
+              if (params.value) {
+                return `<div class="bgTooltip" style="background: rgba(50,50,50,0.7);font-size:36px">
+                <div class="flex items-center">
+                  <img src="./img/yellowArrow.png" style="width: 12px;height: 22px;margin-right:10px" alt=""><span class="fb">${params.name}</span>
+                </div>
+                  <div class="blueIcon flex items-center">项目数量：<span class="fb" style="color:#68BDFF;">${params.value[3]}<span style="font-size:20px" class="fn">个</span></span></div>
+                  <div class="blueIcon flex items-center">投资总额：<span class="fb" style="color:#68BDFF">${params.value[2]}<span style="font-size:20px" class="fn">亿</span></span></div>
+                </div>`;
+              }
             },
           },
           regions: [
@@ -3815,6 +3851,7 @@ let app = new Vue({
           that.mapShow = true
           setTimeout(() => {
             that.leftEcharts12Fun()
+            that.leftEcharts17Fun()
             that.leftEcharts14Fun()
             that.leftEcharts9Fun()
             that.leftEcharts15Fun()
@@ -4288,8 +4325,8 @@ let app = new Vue({
           show: true,
           formatter: function (params) {
             that.leftEcharts17.dispose()
-            left2[0] = that.numDiv(params.percent + 3.2, 100)
             that.leftEcharts17Fun()
+            left2[0] = that.numDiv(params.percent + 3.2, 100)
             if (params.seriesIndex === 2) {
               return null; // 隐藏部分2的tooltip
             } else {
@@ -4384,7 +4421,7 @@ let app = new Vue({
       that.leftEcharts12.setOption(option);
     },
     leftEcharts17Fun () {
-      console.log(123123)
+      console.log('就没走了么？？')
       let that = this;
       this.leftEcharts17 = echarts.init(this.$refs["leftEcharts17"]);
       var seriesOption = [
@@ -5137,5 +5174,190 @@ let app = new Vue({
         this.titleUrl = '7.png'
       }
     },
+    // 单个柱状图的弹窗
+    showChartLTipSingle (e, location, type, param, mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, typeCTwo, paramCTwo, portType, num) {
+      this.projectNum = num
+      this.closeTap()
+      this.titleName = e
+      this.echartSingleTipShow = true
+      if (this.versions) {
+        if (location == 'center') {
+          this.centerPenetrateOne(type, param, 1, typeCTwo, paramCTwo, portType)
+        }
+        if (location == 'left') {
+          this.leftPenetrateOne(mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, 1, type, param)
+        }
+      } else {
+        setTimeout(() => {
+          this.initChartLTip(location)
+        })
+      }
+    },
+    initChartLTip (location, mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, typeCTwo, paramCTwo, portType) {
+      this.myChartTip1 = echarts.init(document.getElementById("echartSingleTip"));
+      if (!(this.titleName == '项目数量' || this.titleName == '项目总数')) {
+        common3 = common3.map((item) => Number(item) + 1)
+      }
+      let option = {
+        grid: {
+          top: 40,
+          right: 0,
+          left: 60,
+          bottom: 70,
+        },
+        tooltip: {
+          show: true,
+          trigger: "axis",
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
+          formatter: data => {
+            if (this.titleName == '项目数量' || this.titleName == '项目总数') {
+              return `${data[0].name}</br>${data[0].seriesName}：${that.numFormat(data[0].value)}个`
+            } else {
+              return `${data[0].name}</br>${data[0].seriesName}：${that.numFormat(that.numSub(data[0].value, 1))}亿`
+            }
+          },
+          textStyle: {
+            color: '#FFF',     // 文字的颜色
+            fontSize: '20',    // 文字字体大小
+            fontFamily: 'Microsoft YaHei'
+          },
+        },
+        xAxis: {
+          data: commonCompany,
+          axisTick: {
+            show: false,
+          },
+          // x轴的字体颜色
+          axisLabel: {
+            rotate: 40,
+            textStyle: {
+              color: "white",
+              fontSize: '20',
+              fontFamily: 'Microsoft YaHei'
+            },
+          },
+          //y轴线的颜色以及宽度
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#1E5389",
+              width: 1,
+              type: "solid",
+            },
+          },
+        },
+        yAxis: {
+          minInterval: 1,
+          // onZero:true,
+          name: (this.titleName == '项目数量' || this.titleName == '项目总数') ? '个' : '亿',
+          nameTextStyle: {//y轴上方单位的颜色
+            color: '#fff',
+            fontSize: '20',
+            fontFamily: 'Microsoft YaHei'
+          },
+          axisTick: {
+            lineStyle: {
+              color: "#18416F",
+            },
+          },
+          // y轴的字体颜色
+          axisLabel: {
+            textStyle: {
+              color: "white",
+              fontSize: '20'
+            },
+            formatter: function (value) {
+              if (that.titleName == '项目数量' || that.titleName == '项目总数') {
+                return value
+              } else {
+                return value === 1 ? 0 : value
+              }
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#68b4dd66',
+              type: 'dashed',
+            },
+          },
+          //y轴线的颜色以及宽度
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#1E5389",
+              width: 1,
+              type: "solid",
+            },
+          },
+        },
+        series: [
+          {
+            name: (this.titleName == '项目数量' || this.titleName == '项目总数') ? '总数量' : "总额度",
+            type: "bar",
+            data: common3,
+            showBackground: false,
+            backgroundStyle: {
+              color: "#18416F",
+            },
+            barWidth: "30%",
+            itemStyle: {
+              // barBorderRadius: [10, 10, 0, 0],
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                {
+                  offset: 0,
+                  color: '#082550',
+                },
+                {
+                  offset: 1,
+                  color: '#957DFF',
+
+                },
+              ]),
+            },
+          },
+        ],
+        legend: {
+          // data: ["2022年额度", "2023年额度"],
+          data: (this.titleName == '项目数量' || this.titleName == '项目总数') ? ["总数量"] : ["总额度"],
+          textStyle: {
+            // 图列内容样式
+            color: "#fff", // 字体颜色
+            fontSize: "20",
+            fontFamily: 'Microsoft YaHei'
+          },
+          right: 'center',
+          y: 5,
+          // 小图标的宽高
+        },
+      };
+      if (!(this.titleName == '项目数量' || this.titleName == '项目总数')) {
+        option.yAxis.min = 1
+        option.yAxis.type = 'log'
+        option.yAxis.logBase = 5
+      }
+      tools.loopShowTooltip(this.myChartTip1, option, {
+        interval: 2000,
+        loopSeries: true,
+      })
+      let that = this
+      that.myChartTip1.on('click', function (param) {
+        if (that.versions) {
+          if (location == 'right') {
+            that.rightPenetrateTwo(that.rightPenetrateTwo.modelName, '', that.findCode(param.name))
+          } else if (location == 'left') {
+            that.leftPenetrateTwo(mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, param.name, that.projectNum)
+          } else if (location == 'center') {
+            that.centerPenetrateTwo(typeCTwo, paramCTwo, that.findCode(param.name), portType)
+          }
+        } else {
+          that.projectListTipShow = true
+        }
+      })
+      that.myChartTip1.setOption(option);
+    },
   },
 });