bd_group
/
gnss-tool-kit
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改样式

master
yezhichao 2021-11-27 16:11:30 +08:00
parent d0cbf883e7
commit f654e51b15
5 changed files with 97 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/render/components/Clock.vue
View File

@ -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,

42
src/render/components/Compass.vue
View File

@ -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: {
// 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: {

47
src/render/components/Map.vue
View File

@ -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

3
src/render/components/Ring.vue
View File

@ -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: '伽 利 略' }

5
src/render/components/WaterLevel.vue
View File

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