Skip to content

Commit b143466

Browse files
committed
完善深色模式的切换
1 parent 4a17c8f commit b143466

File tree

4 files changed

+115
-96
lines changed

4 files changed

+115
-96
lines changed

src/App.vue

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@
1212
<el-col :span="12">
1313
<el-row justify="end" style="height:32px;">
1414
<el-form-item label="深色模式">
15-
<el-switch v-model="switchVal" @change="toggleDark()" inline-prompt active-text="" inactive-text="" />
15+
<el-switch v-model="switchVal" @change="toggleDark(), UseDarkMode()" inline-prompt active-text=""
16+
inactive-text="" />
1617
</el-form-item>
1718
</el-row>
1819
<el-row>
@@ -50,15 +51,19 @@ import {
5051
import { useDark, useToggle } from '@vueuse/core'
5152
const isDark = useDark()
5253
const toggleDark = useToggle(isDark)
54+
let switchVal = ref(isDark.value)
5355
54-
const switchVal = ref(false)
55-
56+
function UseDarkMode() {
57+
WaveGenChart.darkMode(isDark.value);
58+
OSChart.darkMode(isDark.value);
59+
};
5660
5761
</script>
5862
<script lang="ts">
5963
import WaveGen from './components/WaveGen.vue'
6064
import WaveGenChart from './components/WaveGenChart.vue'
6165
import OSChart from './components/OSChart.vue'
66+
6267
export default {
6368
name: 'App',
6469
components: {

src/components/OSChart.vue

Lines changed: 33 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { LineChart, LineSeriesOption } from 'echarts/charts';
1919
import { UniversalTransition } from 'echarts/features';
2020
import { CanvasRenderer } from 'echarts/renderers';
2121
import { onMounted } from 'vue';
22+
import { EChartsType } from 'echarts/core';
2223
2324
echarts.use([
2425
ToolboxComponent,
@@ -30,13 +31,7 @@ echarts.use([
3031
UniversalTransition
3132
]);
3233
33-
type EChartsOption = echarts.ComposeOption<
34-
| ToolboxComponentOption
35-
| TooltipComponentOption
36-
| GridComponentOption
37-
| DataZoomComponentOption
38-
| LineSeriesOption
39-
>;
34+
4035
// 2.定义传入的参数
4136
const props = defineProps({
4237
width: {
@@ -55,11 +50,31 @@ const props = defineProps({
5550
//组件唯一值
5651
container: {
5752
type: String,
58-
default: "WaveGenChart",
53+
default: "OSCChart",
5954
},
6055
});
6156
57+
58+
59+
onMounted(() => {
60+
chartDom = document.getElementById(props.container) as HTMLElement
61+
myChart = echarts.init(chartDom);
62+
option && myChart.setOption(option);
63+
})
64+
65+
</script>
66+
67+
<script lang="ts">
68+
type EChartsOption = echarts.ComposeOption<
69+
| ToolboxComponentOption
70+
| TooltipComponentOption
71+
| GridComponentOption
72+
| DataZoomComponentOption
73+
| LineSeriesOption
74+
>;
6275
var option: EChartsOption;
76+
var myChart: EChartsType;
77+
var chartDom: HTMLElement;
6378
6479
function func(x: number) {
6580
x /= 10;
@@ -75,6 +90,7 @@ function generateData() {
7590
}
7691
7792
option = {
93+
backgroundColor: '',
7894
animation: false,
7995
grid: {
8096
top: 40,
@@ -154,28 +170,20 @@ option = {
154170
}
155171
]
156172
};
157-
158-
onMounted(() => {
159-
var chartDom = document.getElementById(props.container) as HTMLElement
160-
var myChart = echarts.init(chartDom);
161-
option && myChart.setOption(option);
162-
})
163-
164-
</script>
165-
166-
<script lang="ts">
173+
function darkMode(isDark: boolean) {
174+
myChart.dispose();
175+
if (isDark == true)
176+
myChart = echarts.init(chartDom, 'dark');
177+
else
178+
myChart = echarts.init(chartDom);
179+
myChart.setOption(option);
180+
}
167181
export default {
168182
name: "OSChart",
183+
darkMode,
169184
props2: {
170185
msg: String,
171186
option: Object
172-
},
173-
darkMode(isDark: boolean) {
174-
let chartDom1 = document.getElementById(this.container) as HTMLElement
175-
if (isDark)
176-
var chart = echarts.init(chartDom1, 'dark');
177-
else
178-
var chart = echarts.init(chartDom1);
179187
}
180188
}
181189

src/components/WaveGen.vue

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,13 @@ import {
5151
} from 'element-plus'
5252
5353
import { reactive } from 'vue'
54-
import { number } from "echarts/core";
54+
import WaveGenChart from './WaveGenChart.vue'
5555
5656
defineProps<{ msg: string }>();
5757
58+
</script>
59+
60+
<script lang="ts">
5861
const formSize = ref('large')
5962
const labelPosition = ref('right')
6063
@@ -73,6 +76,7 @@ const form = reactive({
7376
})
7477
7578
const onSubmit = () => {
79+
WaveGenChart.refreshData();
7680
console.log('submit!')
7781
}
7882
const freqChange = (value: number) => {
@@ -89,17 +93,13 @@ const uMaxValueChange = (value: number) => {
8993
const biasChange = (value: number) => {
9094
console.log(value);
9195
}
92-
93-
</script>
94-
95-
<script lang="ts">
9696
export default {
9797
name: "WaveGen",
98-
waveType: String,
99-
freq: number,
100-
duty: number,
101-
uMaxValue: number,
102-
biasVoltage: number,
98+
waveType,
99+
freq,
100+
duty,
101+
uMaxValue,
102+
biasVoltage,
103103
props1: {
104104
msg: String
105105
}

src/components/WaveGenChart.vue

Lines changed: 64 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -21,26 +21,8 @@ import { CanvasRenderer } from 'echarts/renderers';
2121
import { onMounted } from 'vue';
2222
import WaveGenData from './WaveGen.vue'
2323
import { EChartsType } from 'echarts/core';
24-
import WaveGenVue from './WaveGen.vue';
2524
26-
echarts.use([
27-
ToolboxComponent,
28-
TooltipComponent,
29-
GridComponent,
30-
DataZoomComponent,
31-
LineChart,
32-
CanvasRenderer,
33-
UniversalTransition
34-
]);
35-
36-
type EChartsOption = echarts.ComposeOption<
37-
| ToolboxComponentOption
38-
| TooltipComponentOption
39-
| GridComponentOption
40-
| DataZoomComponentOption
41-
| LineSeriesOption
42-
>;
43-
// 2.定义传入的参数
25+
// 定义传入的参数
4426
const props = defineProps({
4527
width: {
4628
type: String,
@@ -62,10 +44,40 @@ const props = defineProps({
6244
},
6345
});
6446
47+
onMounted(() => {
48+
wave_gen(1);
49+
chartDom = document.getElementById(props.container) as HTMLElement
50+
myChart = echarts.init(chartDom);
51+
option.series[0].data = generateData(); // 搞不明白为啥报错,但能用
52+
option && myChart.setOption(option);
53+
});
54+
</script>
55+
56+
<script lang="ts">
57+
58+
echarts.use([
59+
ToolboxComponent,
60+
TooltipComponent,
61+
GridComponent,
62+
DataZoomComponent,
63+
LineChart,
64+
CanvasRenderer,
65+
UniversalTransition
66+
]);
67+
68+
type EChartsOption = echarts.ComposeOption<
69+
| ToolboxComponentOption
70+
| TooltipComponentOption
71+
| GridComponentOption
72+
| DataZoomComponentOption
73+
| LineSeriesOption
74+
>;
75+
6576
var option: EChartsOption;
6677
var myChart: EChartsType;
67-
78+
var chartDom: HTMLElement;
6879
option = {
80+
backgroundColor: '',
6981
animation: false,
7082
grid: {
7183
top: 40,
@@ -125,13 +137,14 @@ option = {
125137
filterMode: 'filter',
126138
xAxisIndex: [0],
127139
startValue: 0,
128-
endValue: 300
140+
endValue: 300,
141+
moveOnMouseWheel: 'alt'
129142
},
130143
{
131144
show: true,
132145
type: 'inside',
133-
disabled: true,
134-
zoomLock: true,
146+
// disabled: true,
147+
// zoomLock: true,
135148
filterMode: 'empty',
136149
yAxisIndex: [0],
137150
startValue: -1,
@@ -150,16 +163,15 @@ option = {
150163
151164
// 绘制预览波形相关变量及函数
152165
var start = true;
153-
let uMaxValue = 3.3; //峰峰值
154-
let offSetValue = 1.65; //偏置电压
155-
let duty = 50; //占空比%(方波)
156-
let wave = 1; //波形种类
166+
let uMaxValue = 3.3; //峰峰值
167+
let offSetValue = 1.65 //偏置电压
168+
let duty = 50; //占空比%(方波)
169+
let wave = 1; //波形种类
157170
let samplePerCycle = 256;
158171
//定义板载8位DAC输出的对应值
159172
var waveTab1 = new Array();
160173
var waveTab = new Array();
161174
162-
163175
function wave_gen(index: number) {
164176
if (index == 1) {
165177
var sineValue = 0.0;
@@ -184,8 +196,8 @@ function wave_gen(index: number) {
184196
}
185197
else if (index == 3) //锯齿波
186198
{
187-
for (var i = -127; i < 128; i++) {
188-
waveTab1[i + 127] = ((i + (offSetValue * 255 / 3.3)) * (uMaxValue / 3.3));
199+
for (var i = -128; i < 128; i++) {
200+
waveTab1[i + 128] = ((i + (offSetValue * 255 / 3.3)) * (uMaxValue / 3.3));
189201
190202
}
191203
console.log("波形表重设成功,当前为锯齿波\n");
@@ -200,7 +212,7 @@ function wave_gen(index: number) {
200212
waveTab[i] = waveTab1[i] * 3.3 / 255;
201213
202214
}
203-
console.log(waveTab);
215+
// console.log(waveTab);
204216
}
205217
206218
function generateData() {
@@ -212,10 +224,10 @@ function generateData() {
212224
}
213225
214226
function refreshData() {
215-
wave = parseInt(WaveGenData.waveType);
216-
offSetValue = WaveGenData.biasVoltage;
217-
duty = WaveGenData.duty;
218-
uMaxValue = WaveGenData.uMaxValue;
227+
offSetValue = WaveGenData.biasVoltage.value;
228+
duty = WaveGenData.duty.value;
229+
uMaxValue = WaveGenData.uMaxValue.value;
230+
wave = parseInt(WaveGenData.waveType.value);
219231
wave_gen(wave);
220232
//刷新数据
221233
if (start === true) {
@@ -229,32 +241,26 @@ function refreshData() {
229241
}
230242
}
231243
244+
function darkMode(isDark: boolean) {
245+
myChart.dispose();
246+
if (isDark == true)
247+
myChart = echarts.init(chartDom, 'dark');
248+
else
249+
myChart = echarts.init(chartDom);
250+
myChart.setOption(option);
251+
refreshData();
252+
}
232253
233-
234-
onMounted(() => {
235-
wave_gen(1);
236-
var chartDom = document.getElementById(props.container) as HTMLElement
237-
myChart = echarts.init(chartDom);
238-
option.series[0].data = generateData(); // 搞不明白为啥报错,但能用
239-
option && myChart.setOption(option);
240-
})
241-
242-
</script>
243-
244-
<script lang="ts">
245254
export default {
246255
name: "WaveGenChart",
247-
props2: {
248-
msg: String,
249-
option: Object
250-
},
251-
darkMode(isDark: boolean) {
252-
let chartDom1 = document.getElementById(this.container) as HTMLElement
253-
if (isDark)
254-
var chart = echarts.init(chartDom1, 'dark');
255-
else
256-
var chart = echarts.init(chartDom1);
257-
}
256+
option,
257+
myChart,
258+
uMaxValue,
259+
offSetValue,
260+
duty,
261+
wave,
262+
refreshData,
263+
darkMode
258264
}
259265
260266
</script>

0 commit comments

Comments
 (0)