波形图去掉背景色,文字颜色改成黑色

This commit is contained in:
stt
2025-11-26 13:45:14 +08:00
parent 93586255fc
commit acc5e93731
2 changed files with 48 additions and 48 deletions

View File

@@ -1,9 +1,9 @@
<template> <template>
<div v-loading="loading" :element-loading-background="'rgba(122, 122, 122, 0.8)'" <div v-loading="loading"
style="position: relative;height: 100%;"> style="position: relative;height: 100%;">
<div id="boxr" style="background: #343849c7"> <div id="boxr">
<div id="rmsp" :style="`height:${vh};overflow: hidden;`"> <div id="rmsp" :style="`height:${vh};overflow: hidden;`">
<div class="bx" id="rms"></div> <div class="bx" id="rms"></div>
</div> </div>
@@ -566,7 +566,7 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
if (!rms) return if (!rms) return
const myChartes = echarts.init(rms) const myChartes = echarts.init(rms)
const echartsColor = { WordColor: "#fff", thread: "#fff", FigureColor: ["#07CCCA ", "#00BFF5", "#FFBF00", "#77DA63", "#D5FF6B", "#Ff6600", "#FF9100", "#5B6E96", "#66FFCC", "#B3B3B3", "#FF00FF", "#CC00FF", "#FF9999"] } const echartsColor = { WordColor: "#000", thread: "#000", FigureColor: ["#07CCCA ", "#00BFF5", "#FFBF00", "#77DA63", "#D5FF6B", "#Ff6600", "#FF9100", "#5B6E96", "#66FFCC", "#B3B3B3", "#FF00FF", "#CC00FF", "#FF9999"] }
setTimeout(() => { setTimeout(() => {
rms.style.width = '100%' rms.style.width = '100%'
@@ -605,7 +605,7 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
}, },
textStyle: { textStyle: {
fontSize: '0.8rem', fontSize: '0.8rem',
color: props.DColor ? '#fff' : echartsColor.WordColor color: props.DColor ? '#000' : echartsColor.WordColor
} }
}, },
legend: { legend: {
@@ -616,7 +616,7 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
itemDistance: 5, itemDistance: 5,
textStyle: { textStyle: {
fontSize: '0.7rem', fontSize: '0.7rem',
color: props.DColor ? '#fff' : echartsColor.WordColor, color: props.DColor ? '#000' : echartsColor.WordColor,
rich: { a: { verticalAlign: 'middle' } }, rich: { a: { verticalAlign: 'middle' } },
padding: [0, 0, 0, 0] padding: [0, 0, 0, 0]
} }
@@ -642,7 +642,7 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
text: 'ms', text: 'ms',
textStyle: { textStyle: {
fontSize: '0.6rem', fontSize: '0.6rem',
color: props.DColor ? '#fff' : echartsColor.WordColor color: props.DColor ? '#000' : echartsColor.WordColor
}, },
enabled: true, enabled: true,
align: 'high' align: 'high'
@@ -657,13 +657,13 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
axisTick: { alignWithLabel: true }, axisTick: { alignWithLabel: true },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: props.DColor ? '#fff' : echartsColor.thread color: props.DColor ? '#000' : echartsColor.thread
}, },
onZero: false onZero: false
}, },
axisLabel: { axisLabel: {
fontSize: '0.6rem', fontSize: '0.6rem',
color: props.DColor ? '#fff' : echartsColor.WordColor, color: props.DColor ? '#000' : echartsColor.WordColor,
formatter: function (value: number) { formatter: function (value: number) {
if (valA.value != (value - 0).toFixed(0)) { if (valA.value != (value - 0).toFixed(0)) {
valA.value = Number((value - 0).toFixed(0)) valA.value = Number((value - 0).toFixed(0))
@@ -690,25 +690,25 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
opposite: false, opposite: false,
nameTextStyle: { nameTextStyle: {
fontSize: '0.6rem', fontSize: '0.6rem',
color: props.DColor ? '#fff' : echartsColor.WordColor color: props.DColor ? '#000' : echartsColor.WordColor
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: props.DColor ? '#fff' : echartsColor.thread color: props.DColor ? '#000' : echartsColor.thread
}, },
onZero: false onZero: false
}, },
axisLabel: { axisLabel: {
fontSize: '0.6rem', fontSize: '0.6rem',
color: props.DColor ? '#fff' : echartsColor.WordColor, color: props.DColor ? '#000' : echartsColor.WordColor,
formatter: function (value: number) { formatter: function (value: number) {
return (value - 0).toFixed(2) return (value - 0).toFixed(2)
} }
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: [props.DColor ? '#fff' : echartsColor.thread], color: [props.DColor ? '#000' : echartsColor.thread],
type: 'dashed', type: 'dashed',
opacity: 0.5 opacity: 0.5
} }
@@ -877,7 +877,7 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
if (!rmsIds) return if (!rmsIds) return
const myChartes = echarts.init(rmsIds) const myChartes = echarts.init(rmsIds)
const echartsColor = { WordColor: "#fff", thread: "#fff", FigureColor: ["#07CCCA ", "#00BFF5", "#FFBF00", "#77DA63", "#D5FF6B", "#Ff6600", "#FF9100", "#5B6E96", "#66FFCC", "#B3B3B3", "#FF00FF", "#CC00FF", "#FF9999"] } const echartsColor = { WordColor: "#000", thread: "#000", FigureColor: ["#07CCCA ", "#00BFF5", "#FFBF00", "#77DA63", "#D5FF6B", "#Ff6600", "#FF9100", "#5B6E96", "#66FFCC", "#B3B3B3", "#FF00FF", "#CC00FF", "#FF9999"] }
const option = { const option = {
tooltip: { tooltip: {
@@ -907,7 +907,7 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
text: '',//titlename || title, text: '',//titlename || title,
textStyle: { textStyle: {
fontSize: '0.8rem', fontSize: '0.8rem',
color: props.DColor ? '#fff' : echartsColor.WordColor color: props.DColor ? '#000' : echartsColor.WordColor
} }
}, },
legend: { legend: {
@@ -918,7 +918,7 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
itemDistance: 5, itemDistance: 5,
textStyle: { textStyle: {
fontSize: '0.7rem', fontSize: '0.7rem',
color: props.DColor ? '#fff' : echartsColor.WordColor, color: props.DColor ? '#000' : echartsColor.WordColor,
rich: { a: { verticalAlign: 'middle' } }, rich: { a: { verticalAlign: 'middle' } },
padding: [0, 0, 0, 0] padding: [0, 0, 0, 0]
} }
@@ -933,7 +933,7 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
text: 'ms', text: 'ms',
textStyle: { textStyle: {
fontSize: '0.6rem', fontSize: '0.6rem',
color: props.DColor ? '#fff' : echartsColor.WordColor color: props.DColor ? '#000' : echartsColor.WordColor
}, },
enabled: true, enabled: true,
align: 'high' align: 'high'
@@ -948,13 +948,13 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
axisTick: { alignWithLabel: true }, axisTick: { alignWithLabel: true },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: props.DColor ? '#fff' : echartsColor.thread color: props.DColor ? '#000' : echartsColor.thread
}, },
onZero: false onZero: false
}, },
axisLabel: { axisLabel: {
fontSize: '0.6rem', fontSize: '0.6rem',
color: props.DColor ? '#fff' : echartsColor.WordColor, color: props.DColor ? '#000' : echartsColor.WordColor,
formatter: function (value: number) { formatter: function (value: number) {
if (valB.value != (value - 0).toFixed(0)) { if (valB.value != (value - 0).toFixed(0)) {
valB.value = Number((value - 0).toFixed(0)) valB.value = Number((value - 0).toFixed(0))
@@ -979,25 +979,25 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
opposite: false, opposite: false,
nameTextStyle: { nameTextStyle: {
fontSize: '0.6rem', fontSize: '0.6rem',
color: props.DColor ? '#fff' : echartsColor.WordColor color: props.DColor ? '#000' : echartsColor.WordColor
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: props.DColor ? '#fff' : echartsColor.thread color: props.DColor ? '#000' : echartsColor.thread
}, },
onZero: false onZero: false
}, },
axisLabel: { axisLabel: {
fontSize: '0.6rem', fontSize: '0.6rem',
color: props.DColor ? '#fff' : echartsColor.WordColor, color: props.DColor ? '#000' : echartsColor.WordColor,
formatter: function (value: number) { formatter: function (value: number) {
return (value - 0).toFixed(2) return (value - 0).toFixed(2)
} }
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: [props.DColor ? '#fff' : echartsColor.thread], color: [props.DColor ? '#000' : echartsColor.thread],
type: 'dashed', type: 'dashed',
opacity: 0.5 opacity: 0.5
} }

View File

@@ -1,7 +1,7 @@
<template> <template>
<div v-loading="loading" :element-loading-background="'rgba(122, 122, 122, 0.8)'" class="boxbx" <div v-loading="loading" class="boxbx"
style="position: relative;height: 100%;"> style="position: relative;height: 100%;">
<div id="boxsj" style="background: #343849c7"> <div id="boxsj" >
<div id="shushi" :style="`height:${vh};overflow: hidden;`"> <div id="shushi" :style="`height:${vh};overflow: hidden;`">
<div class="bx" id="wave"></div> <div class="bx" id="wave"></div>
</div> </div>
@@ -249,7 +249,7 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
min = waveDatas[0].instantS.min min = waveDatas[0].instantS.min
adata = waveDatas[0].shunshiS.shunshiSA adata = waveDatas[0].shunshiS.shunshiSA
} }
colors.push('#DAA520', '#fff', '#fff') colors.push('#DAA520', '#000', '#000')
break break
case 2: case 2:
a = waveDatas[0].title.aTitle a = waveDatas[0].title.aTitle
@@ -267,7 +267,7 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
adata = waveDatas[0].shunshiS.shunshiSA adata = waveDatas[0].shunshiS.shunshiSA
bdata = waveDatas[0].shunshiS.shunshiSB bdata = waveDatas[0].shunshiS.shunshiSB
} }
colors.push('#DAA520', '#2E8B57', '#fff') colors.push('#DAA520', '#2E8B57', '#000')
break break
case 3: case 3:
a = waveDatas[0].title.aTitle a = waveDatas[0].title.aTitle
@@ -314,7 +314,7 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
if (!wave) return if (!wave) return
const myChartes = echarts.init(wave) const myChartes = echarts.init(wave)
const echartsColor = { WordColor: "#fff", thread: "#fff", FigureColor: ["#07CCCA ", "#00BFF5", "#FFBF00", "#77DA63", "#D5FF6B", "#Ff6600", "#FF9100", "#5B6E96", "#66FFCC", "#B3B3B3", "#FF00FF", "#CC00FF", "#FF9999"] } const echartsColor = { WordColor: "#000", thread: "#000", FigureColor: ["#07CCCA ", "#00BFF5", "#FFBF00", "#77DA63", "#D5FF6B", "#Ff6600", "#FF9100", "#5B6E96", "#66FFCC", "#B3B3B3", "#FF00FF", "#CC00FF", "#FF9999"] }
setTimeout(() => { setTimeout(() => {
wave.style.width = '100%' wave.style.width = '100%'
@@ -354,7 +354,7 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
text: titleText, text: titleText,
textStyle: { textStyle: {
fontSize: '0.8rem', fontSize: '0.8rem',
color: props.DColor ? '#fff' : echartsColor.WordColor color: props.DColor ? '#000' : echartsColor.WordColor
} }
}, },
legend: { legend: {
@@ -365,7 +365,7 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
itemDistance: 5, itemDistance: 5,
textStyle: { textStyle: {
fontSize: '0.6rem', fontSize: '0.6rem',
color: props.DColor ? '#fff' : echartsColor.WordColor, color: props.DColor ? '#000' : echartsColor.WordColor,
rich: { a: { verticalAlign: 'middle' } }, rich: { a: { verticalAlign: 'middle' } },
padding: [0, 0, 0, 0] padding: [0, 0, 0, 0]
} }
@@ -391,7 +391,7 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
text: 'ms', text: 'ms',
textStyle: { textStyle: {
fontSize: '0.6rem', fontSize: '0.6rem',
color: props.DColor ? '#fff' : echartsColor.WordColor color: props.DColor ? '#000' : echartsColor.WordColor
}, },
enabled: true, enabled: true,
align: 'high' align: 'high'
@@ -401,13 +401,13 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
axisTick: { alignWithLabel: true }, axisTick: { alignWithLabel: true },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: props.DColor ? '#fff' : echartsColor.thread color: props.DColor ? '#000' : echartsColor.thread
}, },
onZero: false onZero: false
}, },
axisLabel: { axisLabel: {
fontSize: '0.6rem', fontSize: '0.6rem',
color: props.DColor ? '#fff' : echartsColor.WordColor, color: props.DColor ? '#000' : echartsColor.WordColor,
formatter: function (value: number) { formatter: function (value: number) {
if (valA.value != (value - 0).toFixed(0)) { if (valA.value != (value - 0).toFixed(0)) {
valA.value = Number((value - 0).toFixed(0)) valA.value = Number((value - 0).toFixed(0))
@@ -434,25 +434,25 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
opposite: false, opposite: false,
nameTextStyle: { nameTextStyle: {
fontSize: '0.6rem', fontSize: '0.6rem',
color: props.DColor ? '#fff' : echartsColor.WordColor color: props.DColor ? '#000' : echartsColor.WordColor
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: props.DColor ? '#fff' : echartsColor.thread color: props.DColor ? '#000' : echartsColor.thread
}, },
onZero: false onZero: false
}, },
axisLabel: { axisLabel: {
fontSize: '0.6rem', fontSize: '0.6rem',
color: props.DColor ? '#fff' : echartsColor.WordColor, color: props.DColor ? '#000' : echartsColor.WordColor,
formatter: function (value: number) { formatter: function (value: number) {
return (value - 0).toFixed(2) return (value - 0).toFixed(2)
} }
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: [props.DColor ? '#fff' : echartsColor.thread], color: [props.DColor ? '#000' : echartsColor.thread],
type: 'dashed', type: 'dashed',
opacity: 0.5 opacity: 0.5
} }
@@ -548,12 +548,12 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
switch (iphasic.value) { switch (iphasic.value) {
case 1: case 1:
a = waveDataTemp.title.aTitle a = waveDataTemp.title.aTitle
colors.push('#DAA520', '#fff', '#fff') colors.push('#DAA520', '#000', '#000')
break break
case 2: case 2:
a = waveDataTemp.title.aTitle a = waveDataTemp.title.aTitle
b = waveDataTemp.title.bTitle b = waveDataTemp.title.bTitle
colors.push('#DAA520', '#2E8B57', '#fff') colors.push('#DAA520', '#2E8B57', '#000')
break break
case 3: case 3:
a = waveDataTemp.title.aTitle a = waveDataTemp.title.aTitle
@@ -612,7 +612,7 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
if (!waveIds) return if (!waveIds) return
const myChartes = echarts.init(waveIds) const myChartes = echarts.init(waveIds)
const echartsColor = { WordColor: "#fff", thread: "#fff", FigureColor: ["#07CCCA ", "#00BFF5", "#FFBF00", "#77DA63", "#D5FF6B", "#Ff6600", "#FF9100", "#5B6E96", "#66FFCC", "#B3B3B3", "#FF00FF", "#CC00FF", "#FF9999"] } const echartsColor = { WordColor: "#000", thread: "#000", FigureColor: ["#07CCCA ", "#00BFF5", "#FFBF00", "#77DA63", "#D5FF6B", "#Ff6600", "#FF9100", "#5B6E96", "#66FFCC", "#B3B3B3", "#FF00FF", "#CC00FF", "#FF9999"] }
const option = { const option = {
tooltip: { tooltip: {
@@ -641,7 +641,7 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
text: '',//titlename || title, text: '',//titlename || title,
textStyle: { textStyle: {
fontSize: '0.8rem', fontSize: '0.8rem',
color: props.DColor ? '#fff' : echartsColor.WordColor color: props.DColor ? '#000' : echartsColor.WordColor
} }
}, },
legend: { legend: {
@@ -652,7 +652,7 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
itemDistance: 5, itemDistance: 5,
textStyle: { textStyle: {
fontSize: '0.6rem', fontSize: '0.6rem',
color: props.DColor ? '#fff' : echartsColor.WordColor, color: props.DColor ? '#000' : echartsColor.WordColor,
rich: { a: { verticalAlign: 'middle' } }, rich: { a: { verticalAlign: 'middle' } },
padding: [0, 0, 0, 0] padding: [0, 0, 0, 0]
} }
@@ -667,7 +667,7 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
text: 'ms', text: 'ms',
textStyle: { textStyle: {
fontSize: '0.6rem', fontSize: '0.6rem',
color: props.DColor ? '#fff' : echartsColor.WordColor color: props.DColor ? '#000' : echartsColor.WordColor
}, },
enabled: true, enabled: true,
align: 'high' align: 'high'
@@ -676,14 +676,14 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
axisTick: { alignWithLabel: true }, axisTick: { alignWithLabel: true },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: props.DColor ? '#fff' : echartsColor.thread color: props.DColor ? '#000' : echartsColor.thread
}, },
onZero: false onZero: false
}, },
nameTextStyle: { fontSize: '0.6rem' }, nameTextStyle: { fontSize: '0.6rem' },
axisLabel: { axisLabel: {
fontSize: '0.6rem', fontSize: '0.6rem',
color: props.DColor ? '#fff' : echartsColor.WordColor, color: props.DColor ? '#000' : echartsColor.WordColor,
formatter: function (value: number) { formatter: function (value: number) {
if (valB.value != (value - 0).toFixed(0)) { if (valB.value != (value - 0).toFixed(0)) {
valB.value = Number((value - 0).toFixed(0)) valB.value = Number((value - 0).toFixed(0))
@@ -710,25 +710,25 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
opposite: false, opposite: false,
nameTextStyle: { nameTextStyle: {
fontSize: '0.6rem', fontSize: '0.6rem',
color: props.DColor ? '#fff' : echartsColor.WordColor color: props.DColor ? '#000' : echartsColor.WordColor
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: props.DColor ? '#fff' : echartsColor.thread color: props.DColor ? '#000' : echartsColor.thread
}, },
onZero: false onZero: false
}, },
axisLabel: { axisLabel: {
fontSize: '0.6rem', fontSize: '0.6rem',
color: props.DColor ? '#fff' : echartsColor.WordColor, color: props.DColor ? '#000' : echartsColor.WordColor,
formatter: function (value: number) { formatter: function (value: number) {
return (value - 0).toFixed(2) return (value - 0).toFixed(2)
} }
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: [props.DColor ? '#fff' : echartsColor.thread], color: [props.DColor ? '#000' : echartsColor.thread],
type: 'dashed', type: 'dashed',
opacity: 0.5 opacity: 0.5
} }