修改样式

src/render/components/Clock.vue

@@ -21,7 +21,10 @@ use([
 const option = reactive({
   title: {
     text: '时间',
-    left: 'center'
+    left: 'center',
+    textStyle: {
+      color: '#fff'
+    }
   },
   series: [
     {
@@ -36,13 +39,22 @@ const option = reactive({
       axisLine: {
         lineStyle: {
           // width: 15,
-          // color: [[1, 'rgba(0,0,0,0.7)']],
+          // color: ['#00ca95'],
-          shadowColor: 'rgba(0, 0, 0, 0.5)',
+          color: [[1, '#00ca95']]
-          shadowBlur: 15
+          // shadowColor: 'rgba(0, 0, 0, 0.5)',
+          // shadowBlur: 15
+        }
+      },
+      axisTick:{
+        lineStyle: {
+          color: '#00ca95',
+          width: 2
         }
       },
       splitLine: {
+        length: 15,
         lineStyle: {
+          color: '#00ca95',
           shadowColor: 'rgba(0, 0, 0, 0.3)',
           shadowBlur: 3,
           shadowOffsetX: 1,
@@ -50,6 +62,7 @@ const option = reactive({
         }
       },
       axisLabel: {
+        color: '#fff',
         fontSize: 12,
         distance: 15,
         formatter: function (value) {
@@ -65,7 +78,7 @@ const option = reactive({
         length: '55%',
         offsetCenter: [0, '8%'],
         itemStyle: {
-          color: '#C0911F',
+          color: '#2AB8FF',
           shadowColor: 'rgba(0, 0, 0, 0.3)',
           shadowBlur: 8,
           shadowOffsetX: 2,
@@ -75,9 +88,6 @@ const option = reactive({
       detail: {
         show: false
       },
-      title: {
-        offsetCenter: [0, '30%']
-      },
       data: [
         {
           value: 0
@@ -110,7 +120,7 @@ const option = reactive({
         length: '70%',
         offsetCenter: [0, '8%'],
         itemStyle: {
-          color: '#C0911F',
+          color: '#2AB8FF',
           shadowColor: 'rgba(0, 0, 0, 0.3)',
           shadowBlur: 8,
           shadowOffsetX: 2,
@@ -123,7 +133,7 @@ const option = reactive({
         showAbove: false,
         itemStyle: {
           borderWidth: 15,
-          borderColor: '#C0911F',
+          borderColor: '#2AB8FF',
           shadowColor: 'rgba(0, 0, 0, 0.3)',
           shadowBlur: 8,
           shadowOffsetX: 2,
@@ -169,7 +179,7 @@ const option = reactive({
         length: '85%',
         offsetCenter: [0, '8%'],
         itemStyle: {
-          color: '#C0911F',
+          color: '#2AB8FF',
           shadowColor: 'rgba(0, 0, 0, 0.3)',
           shadowBlur: 8,
           shadowOffsetX: 2,
@@ -181,7 +191,7 @@ const option = reactive({
         size: 15,
         showAbove: true,
         itemStyle: {
-          color: '#C0911F',
+          color: '#2AB8FF',
           shadowColor: 'rgba(0, 0, 0, 0.3)',
           shadowBlur: 8,
           shadowOffsetX: 2,

src/render/components/Compass.vue

@@ -20,52 +20,58 @@ use([
 const option = reactive({
   title: {
     text: '航向',
-    left: 'center'
+    left: 'center',
+    textStyle: {
+      color: '#fff'
+    }
   },
   series: [
     {
       type: 'gauge',
-      radius: '65%',
+      radius: '60%',
       min : 0,
       max : 360,
-      splitNumber: 12,
+      splitNumber: 8,
       startAngle: 90,
-      endAngle:450,
+      endAngle: 450,
-      axisLine: {
+      // axisLine: {
+      //   lineStyle: {
+      //     color: '#fff',
+      //     width: 5
+      //   }
+      // },
+      axisTick:{
+        distance: 0,
         lineStyle: {
-          // color: '#ff0000'
+          color: 'white',
-          width: 30
+          width: 2
         }
       },
-      axisTick:{
-        lineStyle: {
-          color: '#eee'
-        },
-      },
       axisLabel:{
-        distance: -20,
+        color: 'white',
+        distance: -40,
+        fontSize: 18,
         formatter: function(v: Number){
           switch(v){
             case 0  : return '北';
             case 90 : return '东';
             case 180: return '南';
             case 270: return '西';
-            case 360: return '';
+            default : return '';
-            default : return v;
           }
         }
       },
       splitLine: {
         length :15,
+        distance: 0,
         lineStyle: {
-          color: '#eee'
+          color: 'white'
         }
       },
       pointer:{
-        length :'40%',
+        width: 5,
-        width  :8,
         itemStyle: {
-          color: 'rgb(0,0,255)'
+          color: '#2AB8FF'
         }
       },
       detail: {

src/render/components/Map.vue

@@ -6,17 +6,18 @@
 import { reactive } from 'vue'
 import { use, registerMap } from "echarts/core";
 import { CanvasRenderer } from 'echarts/renderers'
+import { ScatterChart } from 'echarts/charts';
 import { Map3DChart } from 'echarts-gl/charts';
 import VChart from "vue-echarts";
 
 import tmskMap from "../assets/geojson/659003.json";
 
-use([ CanvasRenderer, Map3DChart ]);
+use([ CanvasRenderer, Map3DChart, ScatterChart ]);
 
 registerMap('tmsk', tmskMap);
 
 const option = reactive({
-  series: {
+  series: [{
     type: 'map3D',
     map: 'tmsk',
     label: {
@@ -27,7 +28,47 @@ const option = reactive({
       borderWidth: 1,
     },
     shading: 'color'
-  }
+  },
+  // {
+  //   //设置为分散点
+  //   type: 'scatter',
+  //   //series坐标系类型
+  //   coordinateSystem: 'geo',
+  //   //设置图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
+  //   symbol: 'pin',
+  //   // //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10
+  //   symbolSize: [40,40],
+  //   //气泡字体设置
+  //   label: {
+  //       normal: {
+  //           show: false,//是否显示
+  //           textStyle: {
+  //               color: '#fff',//字体颜色
+  //               fontSize: 8,//字体大小
+  //           },
+  //           //返回气泡数据
+  //           formatter (value){
+  //               return value.data.value[2]
+  //           }
+  //       }
+  //   },
+  //   itemStyle: {
+  //       normal: {
+  //           color: '#1E90FF', //标志颜色
+  //       }
+  //   },
+  //   //给区域赋值
+  //   data: {
+  //     value: [79.068798, 39.868490]
+  //   },
+  //   showEffectOn: 'render',//配置何时显示特效。可选：'render' 绘制完成后显示特效。'emphasis' 高亮（hover）的时候显示特效。
+  //   rippleEffect: {//涟漪特效相关配置。
+  //       brushType: 'stroke'//波纹的绘制方式，可选 'stroke' 和 'fill'
+  //   },
+  //   hoverAnimation: true,//是否开启鼠标 hover 的提示动画效果。
+  //   zlevel: 1//所属图形的 zlevel 值
+  // }
+  ]
 });
 
 const update = console.log

src/render/components/Ring.vue

@@ -30,6 +30,7 @@ const option = reactive({
       fontSize: 16
     }
   },
+  color: ['#FF801C', '#F5FF46', '#00FE65', '#00FEFF', '#ffa800', '#ff5b00', '#ff3000'],
   series: [
     {
       type: 'pie',
@@ -53,7 +54,7 @@ const option = reactive({
         show: false
       },
       data: [
-        { value: 0, name: '北  斗' },
+        { value: 0, name: '北  斗', },
         { value: 0, name: 'G P S' },
         { value: 0, name: '格洛纳斯' },
         { value: 0, name: '伽 利 略' }

src/render/components/WaterLevel.vue

@@ -20,7 +20,10 @@ use([
 const option = reactive({
   title: {
     text: '海拔',
-    left: 'center'
+    left: 'center',
+    textStyle: {
+      color: '#fff'
+    }
   },
   series: [{
     type: 'liquidFill',