测试map

Author: SunQQQ

src/components/MainPage/analytics.vue

@@ -132,7 +132,85 @@ export default {
         }
       },
       mapChartOption: {},
-      visitListData: []
+      visitListData: [],
+      mapOption : {
+        tooltip: {
+          show: false
+        },
+        geo: {
+          map: "china",
+          roam: false,// 一定要关闭拖拽
+          zoom: 1.23,
+          center: [105, 36], // 调整地图位置
+          label: {
+            normal: {
+              show: false, //关闭省份名展示
+              fontSize: "10",
+              color: "rgba(0,0,0,0.7)"
+            },
+            emphasis: {
+              show: false
+            }
+          },
+          itemStyle: {
+            normal: {
+              areaColor: "#0d0059",
+              borderColor: "#389dff",
+              borderWidth: 1, //设置外层边框
+              shadowBlur: 5,
+              shadowOffsetY: 8,
+              shadowOffsetX: 0,
+              shadowColor: "#01012a"
+            },
+            emphasis: {
+              areaColor: "#184cff",
+              shadowOffsetX: 0,
+              shadowOffsetY: 0,
+              shadowBlur: 5,
+              borderWidth: 0,
+              shadowColor: "rgba(0, 0, 0, 0.5)"
+            }
+          }
+        },
+        series: [
+          {
+            type: "map",
+            map: "china",
+            roam: false,
+            zoom: 1.23,
+            center: [105, 36],
+            // geoIndex: 1,
+            // aspectScale: 0.75, //长宽比
+            showLegendSymbol: false, // 存在legend时显示
+            label: {
+              normal: {
+                show: false
+              },
+              emphasis: {
+                show: false,
+                textStyle: {
+                  color: "#fff"
+                }
+              }
+            },
+            itemStyle: {
+              normal: {
+                areaColor: "#0d0059",
+                borderColor: "#389dff",
+                borderWidth: 0.5
+              },
+              emphasis: {
+                areaColor: "#17008d",
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                shadowBlur: 5,
+                borderWidth: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)"
+              }
+            }
+          }
+        ]
+      }
     }
   },
   methods: {
@@ -164,6 +242,7 @@ export default {
         }
       });
     },
+    // 渲染列表
     setVisitList: function () {
       let that = this;
       this.SQFrontAjax({
@@ -179,13 +258,20 @@ export default {
           that.visitListData = data;
         }
       });
+    },
+    // 渲染地图
+    setMap:function (){
+      let map,that=this;
+      map = that.$echarts.init(document.getElementById('line-chart'));
+      map.setOption(that.mapOption);
     }
   },
   mounted: function () {
     Store.commit("ChangeActive", 5);// 切换Topbar高亮
 
     this.setLineChart();
     this.setVisitList();
+    // this.setMap();
   }
 }
 </script>

src/main.js

@@ -6,7 +6,8 @@ import CommonFunction from './util/util';
 import './static/iconfont/iconfont.css';
 import store from './store';
 import VueParticles from 'vue-particles'; // 离子动画背景
-import * as echarts from 'echarts'
+import * as echarts from 'echarts';
+// import './static/map/china'; // 引入中国地图数据
 
 Vue.use(VueParticles);
 Vue.config.productionTip = false;