新增地图组件

README.md

@@ -202,6 +202,7 @@ Vue.prototype.$http = axios.create({
 4. 使用 Mixins 注入图表响应式代码。
 5. vue-awesome 改成按需引入的方式。
 6. 封装渲染函数，抽离了数据使逻辑更加清晰。
+7. 新增地图组件，并添加自动轮播功能
 
 ## 五、其余
 

src/common/echart/index.vue

@@ -4,11 +4,12 @@
 
 <script>
 import tdTheme from './theme.json' // 引入默认主题
-import echartMixins from "@/utils/resizeMixins";
+import resizeMixins from "@/utils/resizeMixins";
+import '../map/fujian.js'
 
 export default {
   name: 'echart',
-  mixins: [echartMixins],
+  mixins: [resizeMixins],
   props: {
     className: {
       type: String,

src/components/echart/bottom/bottomLeftChart/chart.vue

@@ -150,7 +150,4 @@ export default {
     },
   },
 }
-</script>
-
-<style lang="scss" scoped>
-</style>
+</script>

src/components/echart/bottom/bottomRightChart/chart.vue

@@ -355,7 +355,4 @@ export default {
     }
   }
 };
-</script>
-
-<style lang="scss" scoped>
-</style>
+</script>

src/components/echart/centerLeft/centerLeft2Chart/chart.vue

@@ -1,18 +1,19 @@
 <template>
   <div>
     <Echart
-      :options="options"
       id="centreLeft2Chart"
-      height="4.625rem"
+      ref="centreLeft2ChartRef"
+      :options="options"
+      height="4.5rem"
       width="4.125rem"
     ></Echart>
   </div>
 </template>
 
 <script>
-import Echart from '@/common/echart'
+import Echart from '@/common/echart';
 export default {
-  data () {
+  data() {
     return {
       options: {},
     };
@@ -22,94 +23,260 @@ export default {
   },
   props: {
     cdata: {
-      type: Object,
-      default: () => ({})
+      type: Array,
+      default: () => [],
     },
   },
   watch: {
     cdata: {
-      handler (newData) {
+      handler(newData) {
+        // 设置点的位置(经纬度)
+        const geoCoordMap = {
+          厦门市: [118.11022, 24.490474, 20],
+          福州市: [119.206239, 26.275302, 20],
+          泉州市: [118.589421, 24.908853, 20],
+          漳州市: [117.561801, 24.510897, 20],
+          龙岩市: [116.82978, 25.391603, 20],
+          莆田市: [119.007558, 25.591011, 20],
+          三明市: [117.435001, 26.465444, 20],
+          南平市: [118.178459, 27.535627, 20],
+          宁德市: [119.527082, 27.15924, 20],
+        };
+        let seriesData = [
+          {
+            name: '厦门市',
+          },
+          {
+            name: '福州市',
+          },
+          {
+            name: '泉州市',
+          },
+          {
+            name: '漳州市',
+          },
+          {
+            name: '龙岩市',
+          },
+          {
+            name: '莆田市',
+          },
+          {
+            name: '三明市',
+          },
+          {
+            name: '南平市',
+          },
+          {
+            name: '宁德市',
+          },
+        ];
+        let convertData = function (data) {
+          let scatterData = [];
+          for (var i = 0; i < data.length; i++) {
+            var geoCoord = geoCoordMap[data[i].name];
+            if (geoCoord) {
+              scatterData.push({
+                name: data[i].name,
+                value: geoCoord.concat(data[i].value),
+              });
+            }
+          }
+          return scatterData;
+        };
         this.options = {
-          angleAxis: {
-            interval: 1,
-            type: "category",
-            data: newData.angleAxisData,
-            z: 10,
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: "#00c7ff",
-                width: 1,
-                type: "solid"
-              }
-            },
-            axisLabel: {
-              interval: 0,
-              show: true,
-              color: "#00c7ff",
-              margin: 8,
-              fontSize: 12
-            }
-          },
-          radiusAxis: {
-           min: 0,
-            max: 100,
-            interval: 20,
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: "#00c7ff",
-                width: 1,
-                type: "solid"
-              }
-            },
-            axisLabel: {
-              formatter: "{value} %",
-              show: false,
-              padding: [0, 0, 20, 0],
-              color: "#00c7ff",
-              fontSize: 16
-            },
-            splitLine: {
-              lineStyle: {
-                color: "#00c7ff",
-                width: 1,
-                type: "solid"
-              }
-            }
-          },
-          legend: {
-            show: true,
-            orient: "vartical",
-            top: "center",
-            bottom: "0%",
-            itemWidth: 16,
-            itemHeight: 8,
-            itemGap: 16,
+          showLegendSymbol: true,
+          tooltip: {
+            trigger: 'item',
             textStyle: {
-              color: "#A3E2F4",
-              fontSize: 12,
-              fontWeight: 0
+              fontSize: 14,
+              lineHeight: 22,
+            },
+            position: point => {
+              // 固定在顶部
+              return [point[0] + 50, point[1] - 20];
+            },
+            // 如果需要自定义 tooltip样式，需要使用formatter
+            /*
+              formatter: params => {
+                return `<div style=""> ... </div>`
+              }
+            */
+          },
+          visualMap: {
+            min: 0,
+            max: 10,
+            show: false,
+            seriesIndex: 0,
+            // 颜色
+            inRange: {
+              color: ['rgba(41,166,206, .5)', 'rgba(69,117,245, .9)'],
+            },
+          },
+          // 底部背景
+          geo: {
+            show: true,
+            aspectScale: 0.85, //长宽比
+            zoom: 1.2,
+            top: '10%',
+            left: '16%',
+            map: '福建',
+            roam: false,
+            itemStyle: {
+              normal: {
+                areaColor: 'rgba(0,0,0,0)',
+                shadowColor: 'rgba(7,114,204, .8)',
+                shadowOffsetX: 5,
+                shadowOffsetY: 5,
+              },
+              emphasis: {
+                areaColor: '#00aeef',
+              },
             },
           },
-          polar: {},
           series: [
             {
-              name: "A",
-              type: "bar",
-              radius: ["20%", "100%"],
-              data: newData.seriesData,
-              coordinateSystem: "polar"
-            }
-          ]
+              name: '相关指数',
+              type: 'map',
+              aspectScale: 0.85, //长宽比
+              zoom: 1.2,
+              mapType: '福建', // 自定义扩展图表类型
+              top: '10%',
+              left: '16%',
+              itemStyle: {
+                normal: {
+                  color: 'red',
+                  areaColor: 'rgba(19,54,162, .5)',
+                  borderColor: 'rgba(0,242,252,.3)',
+                  borderWidth: 1,
+                  shadowBlur: 7,
+                  shadowColor: '#00f2fc',
+                },
+                emphasis: {
+                  areaColor: '#4f7fff',
+                  borderColor: 'rgba(0,242,252,.6)',
+                  borderWidth: 2,
+                  shadowBlur: 10,
+                  shadowColor: '#00f2fc',
+                },
+              },
+              label: {
+                formatter: params => `${params.name}`,
+                show: true,
+                position: 'insideRight',
+                textStyle: {
+                  fontSize: 14,
+                  color: '#efefef',
+                },
+                emphasis: {
+                  textStyle: {
+                    color: '#fff',
+                  },
+                },
+              },
+              data: newData,
+            },
+            {
+              type: 'effectScatter',
+              coordinateSystem: 'geo',
+              symbolSize: 7,
+              effectType: 'ripple',
+              legendHoverLink: false,
+              showEffectOn: 'render',
+              rippleEffect: {
+                period: 4,
+                scale: 2.5,
+                brushType: 'stroke',
+              },
+              zlevel: 1,
+              itemStyle: {
+                normal: {
+                  color: '#99FBFE',
+                  shadowBlur: 5,
+                  shadowColor: '#fff',
+                },
+              },
+              data: convertData(seriesData),
+            },
+          ],
         };
+        // 重新选择区域
+        this.handleMapRandomSelect();
       },
       immediate: true,
-      deep: true
-    }
-  }
+      deep: true,
+    },
+  },
+  methods: {
+    // 开启定时器
+    startInterval() {
+      const _self = this;
+      // 应通过接口获取配置时间，暂时写死5s
+      const time = 2000;
+      if (this.intervalId !== null) {
+        clearInterval(this.intervalId);
+      }
+      this.intervalId = setInterval(() => {
+        _self.reSelectMapRandomArea();
+      }, time);
+    },
+    // 重新随机选中地图区域
+    reSelectMapRandomArea() {
+      const length = 9;
+      this.$nextTick(() => {
+        const map = this.$refs.centreLeft2ChartRef.chart;
+        let index = Math.floor(Math.random() * length);
+        while (index === this.preSelectMapIndex || index >= length) {
+          index = Math.floor(Math.random() * length);
+        }
+        map.dispatchAction({
+          type: 'mapUnSelect',
+          seriesIndex: 0,
+          dataIndex: this.preSelectMapIndex,
+        });
+        map.dispatchAction({
+          type: 'showTip',
+          seriesIndex: 0,
+          dataIndex: index,
+        });
+        map.dispatchAction({
+          type: 'mapSelect',
+          seriesIndex: 0,
+          dataIndex: index,
+        });
+        this.preSelectMapIndex = index;
+      });
+    },
+    handleMapRandomSelect() {
+      this.$nextTick(() => {
+        const map = this.$refs.centreLeft2ChartRef.chart;
+        const _self = this;
+        setTimeout(() => {
+          _self.reSelectMapRandomArea();
+        }, 0);
+        // 移入区域，清除定时器、取消之前选中并选中当前
+        map.on('mouseover', function (params) {
+          clearInterval(_self.intervalId);
+          map.dispatchAction({
+            type: 'mapUnSelect',
+            seriesIndex: 0,
+            dataIndex: _self.preSelectMapIndex,
+          });
+          map.dispatchAction({
+            type: 'mapSelect',
+            seriesIndex: 0,
+            dataIndex: params.dataIndex,
+          });
+          _self.preSelectMapIndex = params.dataIndex;
+        });
+        // 移出区域重新随机选中地图区域，并开启定时器
+        map.on('globalout', function () {
+          _self.reSelectMapRandomArea();
+          _self.startInterval();
+        });
+        this.startInterval();
+      });
+    },
+  },
 };
 </script>
-
-<style lang="scss" scoped>
-</style>

src/components/echart/centerLeft/centerLeft2Chart/index.vue

@@ -9,102 +9,48 @@ import Chart from './chart.vue';
 export default {
   data () {
     return {
-      cdata: {
-        angleAxisData: [
-          "there1",
-          "there2",
-          "there3",
-          "there4",
-          "there5",
-          "there6",
-          "there7",
-          "there8",
-          "there9",
-          "there10 "
-        ],
-        seriesData: [
-          {
-            value: 87,
-            itemStyle: {
-              normal: {
-                color: "#f54d4d"
-              }
-            }
-          },
-          {
-            value: 80,
-            itemStyle: {
-              normal: {
-                color: "#f87544"
-              }
-            }
-          },
-          {
-            value: 75,
-            itemStyle: {
-              normal: {
-                color: "#ffae00"
-              }
-            }
-          },
-          {
-            value: 69,
-            itemStyle: {
-              normal: {
-                color: "#dcff00"
-              }
-            }
-          },
-          {
-            value: 63,
-            itemStyle: {
-              normal: {
-                color: "#25d053"
-              }
-            }
-          },
-          {
-            value: 54,
-            itemStyle: {
-              normal: {
-                color: "#01fff5"
-              }
-            }
-          },
-          {
-            value: 47,
-            itemStyle: {
-              normal: {
-                color: "#007cff"
-              }
-            }
-          },
-          {
-            value: 40,
-            itemStyle: {
-              normal: {
-                color: "#4245ff"
-              }
-            }
-          },
-          {
-            value: 35,
-            itemStyle: {
-              normal: {
-                color: "#c32eff"
-              }
-            }
-          },
-          {
-            value: 33,
-            itemStyle: {
-              normal: {
-                color: "#ff62e8"
-              }
-            }
+      cdata: [
+        {
+          // 名字需要与 “common/map/fujian.js” 地图数据文件里面定义的一一对应，不能是 “福州” 或者 “闽” 之类的缩写
+          name: '福州市',
+          value: 10,
+          elseData:{
+            // 这里放置地图 tooltip 里想显示的数据
           }
-        ]
-      }
+        },
+        {
+          name: '厦门市',
+          value: 9,
+        },
+        {
+          name: '漳州市',
+          value: 8,
+        },
+        {
+          name: '泉州市',
+          value: 7,
+        },
+        {
+          name: '三明市',
+          value: 6,
+        },
+        {
+          name: '莆田市',
+          value: 5,
+        },
+        {
+          name: '南平市',
+          value: 4,
+        },
+        {
+          name: '龙岩市',
+          value: 3,
+        },
+        {
+          name: '宁德市',
+          value: 2,
+        }
+      ]
     }
   },
   components: {

src/components/echart/centerRight/centerRightChart/chart.vue

@@ -128,7 +128,4 @@ export default {
     }
   }
 };
-</script>
-
-<style lang="scss" scoped>
-</style>
+</script>

src/views/centerLeft2.vue

@@ -6,7 +6,7 @@
           <icon name="chart-pie"></icon>
         </span>
         <div class="d-flex">
-          <span class="fs-xl text mx-2">数据情况</span>
+          <span class="fs-xl text mx-2">地图数据</span>
           <dv-decoration-1 style="width:1.25rem;height:.25rem; position:relative;top:-.0375rem;" />
         </div>
       </div>