暂存

investmentNew/js/index.js

@@ -258,7 +258,7 @@ let app = new Vue({
 
   },
   methods: {
-    initChartR1() {
+    initChartR1 () {
       let that = this;
       let sumA = 42;
       let right5 = [[1, 2, 3, 4, 5, 6]];
@@ -374,35 +374,35 @@ let app = new Vue({
         textStyle: {
           color: "#fff",
         },
-        tooltip: {
-          show: true,
-          trigger: "axis",
-          textStyle: {
-            color: "#FFF", // 文字的颜色
-            fontSize: "20", // 文字字体大小
-            fontFamily: "Microsoft YaHei",
-          },
-          formatter: (data) => {
-            return `${
-              data[0].value[0]
-            }<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${
-              data[0].color
-            }"></span> ${data[0].seriesName}：${that.numFormat(
-              data[0].data[2]
-            )}亿<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${
-              data[1].color
-            }"></span> ${data[1].seriesName}：${that.numFormat(
-              data[1].data[2]
-            )}亿<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${
-              data[2].color
-            }"></span> ${data[2].seriesName}：${that.numFormat(
-              data[2].data[2]
-            )}亿`;
-          },
-          axisPointer: {
-            //  // type: 'cross',',
-          },
-        },
+        // tooltip: {
+        //   show: true,
+        //   trigger: "axis",
+        //   textStyle: {
+        //     color: "#FFF", // 文字的颜色
+        //     fontSize: "20", // 文字字体大小
+        //     fontFamily: "Microsoft YaHei",
+        //   },
+        //   formatter: (data) => {
+        //     return `${
+        //       data[0].value[0]
+        //     }<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${
+        //       data[0].color
+        //     }"></span> ${data[0].seriesName}：${that.numFormat(
+        //       data[0].data[2]
+        //     )}亿<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${
+        //       data[1].color
+        //     }"></span> ${data[1].seriesName}：${that.numFormat(
+        //       data[1].data[2]
+        //     )}亿<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${
+        //       data[2].color
+        //     }"></span> ${data[2].seriesName}：${that.numFormat(
+        //       data[2].data[2]
+        //     )}亿`;
+        //   },
+        //   axisPointer: {
+        //     //  // type: 'cross',',
+        //   },
+        // },
         grid: {
           top: "10%",
           right: "7%",
@@ -430,7 +430,7 @@ let app = new Vue({
           axisLabel: {
             show: true,
             // formatter: '{value}',
-            formatter(data) {
+            formatter (data) {
               if (data == 100 + sumA) {
                 return "100%";
               } else if (data == -100 - sumA) {
@@ -602,8 +602,8 @@ let app = new Vue({
             param.seriesName == "正偏差"
               ? 1
               : param.seriesName == "容差"
-              ? 2
-              : 3;
+                ? 2
+                : 3;
           that.rightAdd.projectStepCode = "";
           that.projectNum = 313;
           that.rightPenetrateTwo(
@@ -611,8 +611,8 @@ let app = new Vue({
             param.seriesName == "正偏差"
               ? 1
               : param.seriesName == "容差"
-              ? 2
-              : 3,
+                ? 2
+                : 3,
             that.findCode(param.name),
             "right"
           );
@@ -626,7 +626,7 @@ let app = new Vue({
         loopSeries: true,
       });
     },
-    initChartR2() {
+    initChartR2 () {
       let that = this;
       that.right2Chart = echarts.init(this.$refs["echartR2"]);
       let option = {
@@ -746,7 +746,7 @@ let app = new Vue({
       };
       that.right2Chart.setOption(option);
     },
-    clickItem(index) {
+    clickItem (index) {
       console.log(index);
       const angle = 360 / this.investData.investList.length;
       this.witchs = index;
@@ -754,7 +754,7 @@ let app = new Vue({
       this.innerDeg = this.witchs * angle;
       this.lpRotate();
     },
-    lpRotate() {
+    lpRotate () {
       const angle = 360 / this.investData.investList.length;
       clearInterval(this.timer);
       this.timer = setInterval(() => {
@@ -765,7 +765,7 @@ let app = new Vue({
         this.innerDeg = this.inner * angle;
       }, 2000);
     },
-    filterLpData() {
+    filterLpData () {
       const angle = 360 / this.investData.investList.length;
       for (let i in this.investData.investList) {
         this.investData.investList[i].deg = i * angle;
@@ -2101,6 +2101,7 @@ let app = new Vue({
       that.leftEcharts8.setOption(option)
     },
     chinaEchartsFun () {
+      let that = this
       this.geoCoordMap = []
       /*获取地图数据*/
       this.shanxiMap = echarts.init(this.$refs['shanxi'])
@@ -2255,50 +2256,59 @@ let app = new Vue({
           },
           tooltip: {
             trigger: 'item',
+            className: 'custom-tooltip-box',
+            confine: true, // 不超出当前表
             formatter: function (params) {
-              console.log(params, '??????????')
-            }
-          },
-          roam: false,
-          itemStyle: {
-            normal: {
-              // borderColor: 'rgba(147, 235, 248, 1)',
-              borderColor: '#7fb3ff',
-              borderWidth: 3,
-              areaColor: {
-                type: 'radial',
-                x: 0.5,
-                y: 0.5,
-                r: 0.8,
-                colorStops: [{
-                  offset: 0,
-                  color: '#468ff8' // 0% 处的颜色
-                }, {
-                  offset: 1,
-                  color: '#0a2c6d' // 100% 处的颜色
-                }],
-                globalCoord: false // 缺省为 false
-              },
-              // shadowColor: 'rgba(128, 217, 248, 1)',
-              shadowColor: '#468ff8',
-              shadowOffsetX: -2,
-              shadowOffsetY: 2,
-              shadowBlur: 20
+              console.log(params)
+              return `<div class="bgTooltip" style="background: url('../img/shanxi/${params.name}.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;">26<span style="font-size:20px" class="fn">个</span></span></div>
+              <div class="blueIcon flex items-center">投资总额：<span class="fb" style="color:#68BDFF">180<span style="font-size:20px" class="fn">亿</span></span></div>
+            </div>`
             },
-            emphasis: {
-              areaColor: {
-                colorStops: [{
-                  offset: 0,
-                  color: '#3844aa' // 0% 处的颜色
-                }, {
-                  offset: 1,
-                  color: '#7284fc' // 100% 处的颜色
-                }],
-              },
-              borderColor: '#b3baff',
-              borderWidth: 5
-            }
           },
+          roam: false,
+          // itemStyle: {
+          //   normal: {
+          //     // borderColor: 'rgba(147, 235, 248, 1)',
+          //     borderColor: '#7fb3ff',
+          //     borderWidth: 3,
+          //     areaColor: {
+          //       type: 'radial',
+          //       x: 0.5,
+          //       y: 0.5,
+          //       r: 0.8,
+          //       colorStops: [{
+          //         offset: 0,
+          //         color: '#468ff8' // 0% 处的颜色
+          //       }, {
+          //         offset: 1,
+          //         color: '#0a2c6d' // 100% 处的颜色
+          //       }],
+          //       globalCoord: false // 缺省为 false
+          //     },
+          //     // shadowColor: 'rgba(128, 217, 248, 1)',
+          //     shadowColor: '#468ff8',
+          //     shadowOffsetX: -2,
+          //     shadowOffsetY: 2,
+          //     shadowBlur: 20
+          //   },
+          //   emphasis: {
+          //     areaColor: {
+          //       colorStops: [{
+          //         offset: 0,
+          //         color: '#3844aa' // 0% 处的颜色
+          //       }, {
+          //         offset: 1,
+          //         color: '#7284fc' // 100% 处的颜色
+          //       }],
+          //     },
+          //     borderColor: '#b3baff',
+          //     borderWidth: 5
+          //   }
+          // },
           regions: [
             {
               name: '太原市',
@@ -2398,6 +2408,66 @@ let app = new Vue({
           data: categoryData
         },
         series: [
+          {
+            type: 'map',
+            map: 'china',
+            geoIndex: 1,
+            // aspectScale: 1.5, //长宽比
+            showLegendSymbol: true, // 存在legend时显示
+            label: {
+              normal: {
+                show: true,
+              },
+              emphasis: {
+                show: true,
+                textStyle: {
+                  color: 'red',
+                },
+              },
+            },
+            roam: true,
+            itemStyle: {
+              normal: {
+                // borderColor: 'rgba(147, 235, 248, 1)',
+                borderColor: '#7fb3ff',
+                borderWidth: 3,
+                areaColor: {
+                  type: 'radial',
+                  x: 0.5,
+                  y: 0.5,
+                  r: 0.8,
+                  colorStops: [{
+                    offset: 0,
+                    color: '#468ff8' // 0% 处的颜色
+                  }, {
+                    offset: 1,
+                    color: '#0a2c6d' // 100% 处的颜色
+                  }],
+                  globalCoord: false // 缺省为 false
+                },
+                // shadowColor: 'rgba(128, 217, 248, 1)',
+                shadowColor: '#468ff8',
+                shadowOffsetX: -2,
+                shadowOffsetY: 2,
+                shadowBlur: 20
+              },
+              emphasis: {
+                areaColor: {
+                  colorStops: [{
+                    offset: 0,
+                    color: '#3844aa' // 0% 处的颜色
+                  }, {
+                    offset: 1,
+                    color: '#7284fc' // 100% 处的颜色
+                  }],
+                },
+                borderColor: '#b3baff',
+                borderWidth: 5
+              }
+            },
+            animation: true,
+            data: data,
+          },
           {
             type: 'effectScatter',
             coordinateSystem: 'geo',
@@ -2427,7 +2497,7 @@ let app = new Vue({
                 fontSize: "500",
               }
             },
-            zlevel: 1
+            // zlevel: 0
           }
         ]
       };
@@ -2439,7 +2509,6 @@ let app = new Vue({
         barData.push(data[i].value);
         sum += data[i].value;
       }
-      let that = this
       // this.shanxiMap.on('click', function (params) {
       //   if (params.name == '山西') {
       //     that.shanxiMap.dispose()

investmentNew/styles/index.css

@@ -748,7 +748,7 @@ i {
 .capitalize {
   text-transform: capitalize;
 }
-* right css start */
+/* right css start */
 .right {
   display: grid;
   grid-template-rows: 20% 34% 1fr;