perf:overview 地图显示调整

nezha-fronted/src/components/page/dashboard/overview/chart.vue

@@ -34,13 +34,7 @@
       }
     },
     created() {
-      this.option=chartConfig.getOption(this.chartType);
+
-      this.$set(this.option,'series',this.series);
-      if(this.chartType == 'line'){
-        this.$set(this.option.tooltip,'formatter',this.tooltipFormatter);
-        this.$set(this.option.tooltip,'position',this.tooltipPosition);
-        this.$set(this.option.yAxis,'formatter',this.yAxisFormatter);
-      }
     },
     methods:{
       tooltipPosition:function(point,params,dom,rect,size){
@@ -108,15 +102,22 @@
         return unit.compute(value,index);
       },
       setSeries:function(series){
-        this.option.series=series;
         if(!this.chart){
           this.chart=echarts.init(document.getElementById(this.chartId));
         }
+        this.series=series;
         if(this.chartType == 'map'){
-          console.log(json)
-          console.log(this.option)
           echarts.registerMap('map',json);
+          chartConfig.setMap('map');
         }
+        this.option=chartConfig.getOption(this.chartType);
+        this.$set(this.option,'series',this.series);
+        if(this.chartType == 'line'){
+          this.$set(this.option.tooltip,'formatter',this.tooltipFormatter);
+          this.$set(this.option.tooltip,'position',this.tooltipPosition);
+          this.$set(this.option.yAxis,'formatter',this.yAxisFormatter);
+        }
+
         this.chart.clear();
         this.chart.setOption(this.option)
       },

nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue

@@ -1,6 +1,6 @@
 <script>
     import chartDataFormat from "../../../charts/chartDataFormat";
-
+    import json from './geoJson'
     const commonOption={
       title:{
         show:false,
@@ -66,21 +66,49 @@
       series: [],
     }
     const mapOptions={
+      geo:{
+        map:'',
+        roam:true,//鼠标是否可以控制缩放
+        // center:[],//当前视角的中心点，用经纬度表示
+        label: { //控制显示地图名称
+          normal: {
+            show: true
+          },
+          emphasis: {
+            show: true
+          },
+        } ,
+        itemStyle:{
+          areaColor:'lightgrey', //设置默认状态下地图颜色
+        },
+        emphasis:{
+          itemStyle: {
+            areaColor:'white'
+          }
+        },
+        left:0,
+        top:0,
+        right:0,
+        bottom:0,
+      },
       tooltip : {
         trigger: 'item',
         type:'cross',
-        backgroundColor:"#ff7f50",//提示标签背景颜色
-        textStyle:{color:"#fff"}, //提示标签字体颜色
         alwaysShowContent: false,
+        backgroundColor:'#6E6E6E',
+        borderColor:'#ffffff',
         borderRadius: 4,
         borderWidth: 1,
-        borderColor: 'rgba(0,0,0,0.2)',
-        backgroundColor: 'rgba(255,255,255,0.9)',
         padding: 0,
-        textStyle: {
+        formatter(params){
-          fontSize: 12,
+          var color = "orange";
-          color: '#333'
+          var a = "<div style='background-color:"+color+";padding: 5px 10px;text-align:center;color:white;font-size: 16px;'>" + params.data.name + "</div>";
-        },
+          a += "<div style='padding:3px;text-align: center'>";
+          a +=params.data.value[2] + "<br>";
+          a += "</div>";
+
+          return a;
+        }
       },
     }
     const chartTypes={
@@ -91,5 +119,8 @@
       getOption:function(type){
         return Object.assign({},chartTypes[type].option);
       },
+      setMap:function(map){
+        mapOptions.geo.map=map
+      }
     }
 </script>

nezha-fronted/src/components/page/dashboard/overview/overview.vue

@@ -743,34 +743,25 @@
       queryDataCenterMapData:function(){
         this.dataCenterMapSeries=[{
           name: 'DataCenter',
-          type: 'map',
+          type: 'scatter',
-          map:'map',
+          coordinateSystem: 'geo',
-          roam:true,
           label: {
-            normal: {
+            formatter: '{b}',
-              show: true
+            position: 'right',
+            show: false
+          },
+          itemStyle: {
+            color: 'grey'
           },
           emphasis: {
+            label: {
               show: true
             }
           },
-          layoutCenter: ['50%', '50%'],   //属性定义地图中心在屏幕中的位置，一般结合layoutSize 定义地图的大小
-          layoutSize:500,
-          itemStyle:{
-            normal:{label:{show:true}},
-            emphasis:{label:{show:true}}
-          },
           data:[
-            {name:'Alabama', value: 40000.34,},
+            {name:'Alabama', value: [-85.058981, 32.13674,40000.34]},
-            {name:'Alaska', value: 38000},
+            {name:'xxx', value: [-71.799309, 41.414677,38000]},
-            {name:'Arizona', value: 18000},
+            {name:'Arizona', value:[-114.470151, 32.843265,18000]},
-            {name:'Arkansas', value: 15092},
-            {name:'California', value: 28000},
-            {name:'Colorado', value: 12000},
-            {name:'Connecticut', value: 32000},
-            {name:'Delaware', value: 5100},
-            {name:'District of Columbia', value: 2200},
-            {name:'Florida', value: 4918}
           ]
         }]
         this.$refs.dataCenterMap.setSeries(this.dataCenterMapSeries);