From f654e51b1517f41563fef355d685165f37c4ffbb Mon Sep 17 00:00:00 2001 From: yezhichao <651778286@qq.com> Date: Sat, 27 Nov 2021 16:11:30 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/render/components/Clock.vue | 34 +++++++++++++------- src/render/components/Compass.vue | 44 +++++++++++++++----------- src/render/components/Map.vue | 47 ++++++++++++++++++++++++++-- src/render/components/Ring.vue | 3 +- src/render/components/WaterLevel.vue | 5 ++- 5 files changed, 97 insertions(+), 36 deletions(-) diff --git a/src/render/components/Clock.vue b/src/render/components/Clock.vue index 3e35485..3e9832b 100644 --- a/src/render/components/Clock.vue +++ b/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)']], - shadowColor: 'rgba(0, 0, 0, 0.5)', - shadowBlur: 15 + // color: ['#00ca95'], + color: [[1, '#00ca95']] + // 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, diff --git a/src/render/components/Compass.vue b/src/render/components/Compass.vue index 7547b95..ec5c1a4 100644 --- a/src/render/components/Compass.vue +++ b/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, - axisLine: { + endAngle: 450, + // axisLine: { + // lineStyle: { + // color: '#fff', + // width: 5 + // } + // }, + axisTick:{ + distance: 0, lineStyle: { - // color: '#ff0000' - width: 30 + color: 'white', + 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 v; + default : return ''; } } }, splitLine: { length :15, + distance: 0, lineStyle: { - color: '#eee' + color: 'white' } }, pointer:{ - length :'40%', - width :8, + width: 5, itemStyle: { - color: 'rgb(0,0,255)' + color: '#2AB8FF' } }, detail: { diff --git a/src/render/components/Map.vue b/src/render/components/Map.vue index 2e6fb36..3eefd0c 100644 --- a/src/render/components/Map.vue +++ b/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 diff --git a/src/render/components/Ring.vue b/src/render/components/Ring.vue index 130e20a..649a8ed 100644 --- a/src/render/components/Ring.vue +++ b/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: '伽 利 略' } diff --git a/src/render/components/WaterLevel.vue b/src/render/components/WaterLevel.vue index 808f72e..72a668e 100644 --- a/src/render/components/WaterLevel.vue +++ b/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',