地图气泡完成

investmentNew/js/index.js

@@ -1351,7 +1351,7 @@ let app = new Vue({
         },
         textStyle: {
           color: '#fff',
-          fontSize:20,
+          fontSize: 20,
           fontFamily: 'Microsoft YaHei',
         },
         tooltip: {
@@ -3199,7 +3199,7 @@ let app = new Vue({
             return `<span style="display:inline-block;margin-right:10px;border-radius:10px;width:20px;height:20px;background-color:${e.borderColor};"></span>${e.name} ${e.percent}%<br>${e.value}亿 ${left1[that.industryLayout][e.seriesIndex].num}个`;
           },
           backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
-          borderColor:'#135C8A00',
+          borderColor: '#135C8A00',
           textStyle: {
             color: "#fff",
             fontStyle: "normal", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
@@ -3940,7 +3940,8 @@ let app = new Vue({
         var res = [];
         for (var i = 0; i < data.length; i++) {
           var geoCoord = geoCoordMap[data[i].name];
-          if (geoCoord) {
+          // if (geoCoord) {
+          if (data[i].value) {
             res.push({
               name: data[i].name,
               value: geoCoord.concat(data[i].value, data[i].value2),
@@ -3962,6 +3963,19 @@ let app = new Vue({
       data.sort(function (a, b) {
         return a.value - b.value;
       });
+      // 计算最大圆圈最小圆圈
+      let a = convertedData[0].map(item => {
+        return item.value[2]
+      })
+      a.sort(function (a, b) {
+        return a - b;
+      });
+      let maxValue = a[a.length - 1]
+      let minValue = a[0]
+      maxValue == minValue && (minValue = 0)
+      convertedData[0].forEach((item, index) => {
+        this.$set(item.value, 4, ((item.value[2] - minValue) / (maxValue - minValue)) * 60 + 20)
+      })
       option = {
         backgroundColor: "#404a5900",
         animation: true,
@@ -4032,38 +4046,32 @@ let app = new Vue({
               // 清空所有轮播
               for (var k in geoCoordMap) {
                 that.shanxiMap.dispatchAction({
-                  // type: 'geoUnSelect',
                   type: "downplay",
                   name: k,
                   geoIndex: 0,
                 });
                 that.shanxiMap.dispatchAction({
-                  // type: 'geoUnSelect',
                   type: "downplay",
                   name: k,
                   seriesName: params.seriesName,
                 });
                 that.shanxiMap.dispatchAction({
-                  // type: 'geoUnSelect',
                   type: "downplay",
                   name: k,
                   seriesName: "series\u00001",
                 });
               }
               that.shanxiMap.dispatchAction({
-                // type: 'geoSelect',
                 type: "highlight",
                 name: params.name,
                 geoIndex: 0,
               });
               that.shanxiMap.dispatchAction({
-                // type: 'geoSelect',
                 type: "highlight",
                 name: params.name,
                 seriesName: params.seriesName,
               });
               that.shanxiMap.dispatchAction({
-                // type: 'geoSelect',
                 type: "highlight",
                 name: params.name,
                 seriesName: "series\u00001",
@@ -4179,7 +4187,7 @@ let app = new Vue({
             coordinateSystem: "geo",
             data: convertedData[0],
             symbolSize: function (val) {
-              return Math.max(val[2] / 500, 8);
+              return val[4];
             },
             showEffectOn: "emphasis",
             rippleEffect: {
@@ -4221,7 +4229,7 @@ let app = new Vue({
               },
             ],
             symbolSize: function (val) {
-              return Math.max(val[2] / 500, 8);
+              return convertedData[0].find(item => item.name == '太原市').value[4];
             },
             showEffectOn: "emphasis",
             rippleEffect: {
@@ -4320,7 +4328,7 @@ let app = new Vue({
         var res = [];
         for (var i = 0; i < data.length; i++) {
           var geoCoord = geoCoordMap[data[i].name];
-          if (geoCoord) {
+          if (data[i].value) {
             res.push({
               name: data[i].name,
               value: geoCoord.concat(data[i].value, data[i].value2),
@@ -4342,6 +4350,19 @@ let app = new Vue({
       data.sort(function (a, b) {
         return a.value - b.value;
       });
+      // 计算最大圆圈最小圆圈
+      let a = convertedData[0].map(item => {
+        return item.value[2]
+      })
+      a.sort(function (a, b) {
+        return a - b;
+      });
+      let maxValue = a[a.length - 1]
+      let minValue = a[0]
+      maxValue == minValue && (minValue = 0)
+      convertedData[0].forEach((item, index) => {
+        this.$set(item.value, 4, ((item.value[2] - minValue) / (maxValue - minValue)) * 60 + 20)
+      })
       option = {
         animation: true,
         animationDuration: 1000,
@@ -4378,7 +4399,6 @@ let app = new Vue({
                 ],
                 globalCoord: false, // 缺省为 false
               },
-              // shadowColor: 'rgba(128, 217, 248, 1)',
               shadowColor: "#468ff8",
               shadowOffsetX: -2,
               shadowOffsetY: 2,
@@ -4410,38 +4430,32 @@ let app = new Vue({
               // 清空所有轮播
               for (var k in geoCoordMap) {
                 that.chinaMap.dispatchAction({
-                  // type: 'geoUnSelect',
                   type: "downplay",
                   name: k,
                   geoIndex: 0,
                 });
                 that.chinaMap.dispatchAction({
-                  // type: 'geoUnSelect',
                   type: "downplay",
                   name: k,
                   seriesName: params.seriesName,
                 });
                 that.chinaMap.dispatchAction({
-                  // type: 'geoUnSelect',
                   type: "downplay",
                   name: k,
                   seriesName: "series\u00001",
                 });
               }
               that.chinaMap.dispatchAction({
-                // type: 'geoSelect',
                 type: "highlight",
                 name: params.name,
                 geoIndex: 0,
               });
               that.chinaMap.dispatchAction({
-                // type: 'geoSelect',
                 type: "highlight",
                 name: params.name,
                 seriesName: params.seriesName,
               });
               that.chinaMap.dispatchAction({
-                // type: 'geoSelect',
                 type: "highlight",
                 name: params.name,
                 seriesName: "series\u00001",
@@ -4556,7 +4570,7 @@ let app = new Vue({
             coordinateSystem: "geo",
             data: convertedData[0],
             symbolSize: function (val) {
-              return Math.max(val[2] / 100, 8);
+              return val[4];
             },
             showEffectOn: "emphasis",
             rippleEffect: {
@@ -4598,7 +4612,7 @@ let app = new Vue({
               },
             ],
             symbolSize: function (val) {
-              return Math.max(val[2] / 500, 8);
+              return convertedData[0].find(item => item.name == '山西').value[4];
             },
             showEffectOn: "emphasis",
             rippleEffect: {