完善深色模式的切换

Author: guohaomeng

src/App.vue

@@ -12,7 +12,8 @@
       <el-col :span="12">
         <el-row justify="end" style="height:32px;">
           <el-form-item label="深色模式">
-            <el-switch v-model="switchVal" @change="toggleDark()" inline-prompt active-text="开" inactive-text="关" />
+            <el-switch v-model="switchVal" @change="toggleDark(), UseDarkMode()" inline-prompt active-text="开"
+              inactive-text="关" />
           </el-form-item>
         </el-row>
         <el-row>
@@ -50,15 +51,19 @@ import {
 import { useDark, useToggle } from '@vueuse/core'
 const isDark = useDark()
 const toggleDark = useToggle(isDark)
+let switchVal = ref(isDark.value)
 
-const switchVal = ref(false)
-
+function UseDarkMode() {
+  WaveGenChart.darkMode(isDark.value);
+  OSChart.darkMode(isDark.value);
+};
 
 </script>
 <script lang="ts">
 import WaveGen from './components/WaveGen.vue'
 import WaveGenChart from './components/WaveGenChart.vue'
 import OSChart from './components/OSChart.vue'
+
 export default {
   name: 'App',
   components: {

src/components/OSChart.vue

@@ -19,6 +19,7 @@ import { LineChart, LineSeriesOption } from 'echarts/charts';
 import { UniversalTransition } from 'echarts/features';
 import { CanvasRenderer } from 'echarts/renderers';
 import { onMounted } from 'vue';
+import { EChartsType } from 'echarts/core';
 
 echarts.use([
   ToolboxComponent,
@@ -30,13 +31,7 @@ echarts.use([
   UniversalTransition
 ]);
 
-type EChartsOption = echarts.ComposeOption<
-  | ToolboxComponentOption
-  | TooltipComponentOption
-  | GridComponentOption
-  | DataZoomComponentOption
-  | LineSeriesOption
->;
+
 // 2.定义传入的参数
 const props = defineProps({
   width: {
@@ -55,11 +50,31 @@ const props = defineProps({
   //组件唯一值
   container: {
     type: String,
-    default: "WaveGenChart",
+    default: "OSCChart",
   },
 });
 
+
+
+onMounted(() => {
+  chartDom = document.getElementById(props.container) as HTMLElement
+  myChart = echarts.init(chartDom);
+  option && myChart.setOption(option);
+})
+
+</script>
+
+<script lang="ts">
+type EChartsOption = echarts.ComposeOption<
+  | ToolboxComponentOption
+  | TooltipComponentOption
+  | GridComponentOption
+  | DataZoomComponentOption
+  | LineSeriesOption
+>;
 var option: EChartsOption;
+var myChart: EChartsType;
+var chartDom: HTMLElement;
 
 function func(x: number) {
   x /= 10;
@@ -75,6 +90,7 @@ function generateData() {
 }
 
 option = {
+  backgroundColor: '',
   animation: false,
   grid: {
     top: 40,
@@ -154,28 +170,20 @@ option = {
     }
   ]
 };
-
-onMounted(() => {
-  var chartDom = document.getElementById(props.container) as HTMLElement
-  var myChart = echarts.init(chartDom);
-  option && myChart.setOption(option);
-})
-
-</script>
-
-<script lang="ts">
+function darkMode(isDark: boolean) {
+  myChart.dispose();
+  if (isDark == true)
+    myChart = echarts.init(chartDom, 'dark');
+  else
+    myChart = echarts.init(chartDom);
+  myChart.setOption(option);
+}
 export default {
   name: "OSChart",
+  darkMode,
   props2: {
     msg: String,
     option: Object
-  },
-  darkMode(isDark: boolean) {
-    let chartDom1 = document.getElementById(this.container) as HTMLElement
-    if (isDark)
-      var chart = echarts.init(chartDom1, 'dark');
-    else
-      var chart = echarts.init(chartDom1);
   }
 }
 

src/components/WaveGen.vue

@@ -51,10 +51,13 @@ import {
 } from 'element-plus'
 
 import { reactive } from 'vue'
-import { number } from "echarts/core";
+import WaveGenChart from './WaveGenChart.vue'
 
 defineProps<{ msg: string }>();
 
+</script>
+
+<script lang="ts">
 const formSize = ref('large')
 const labelPosition = ref('right')
 
@@ -73,6 +76,7 @@ const form = reactive({
 })
 
 const onSubmit = () => {
+  WaveGenChart.refreshData();
   console.log('submit!')
 }
 const freqChange = (value: number) => {
@@ -89,17 +93,13 @@ const uMaxValueChange = (value: number) => {
 const biasChange = (value: number) => {
   console.log(value);
 }
-
-</script>
-
-<script lang="ts">
 export default {
   name: "WaveGen",
-  waveType: String,
-  freq: number,
-  duty: number,
-  uMaxValue: number,
-  biasVoltage: number,
+  waveType,
+  freq,
+  duty,
+  uMaxValue,
+  biasVoltage,
   props1: {
     msg: String
   }

src/components/WaveGenChart.vue

@@ -21,26 +21,8 @@ import { CanvasRenderer } from 'echarts/renderers';
 import { onMounted } from 'vue';
 import WaveGenData from './WaveGen.vue'
 import { EChartsType } from 'echarts/core';
-import WaveGenVue from './WaveGen.vue';
 
-echarts.use([
-  ToolboxComponent,
-  TooltipComponent,
-  GridComponent,
-  DataZoomComponent,
-  LineChart,
-  CanvasRenderer,
-  UniversalTransition
-]);
-
-type EChartsOption = echarts.ComposeOption<
-  | ToolboxComponentOption
-  | TooltipComponentOption
-  | GridComponentOption
-  | DataZoomComponentOption
-  | LineSeriesOption
->;
-// 2.定义传入的参数
+// 定义传入的参数
 const props = defineProps({
   width: {
     type: String,
@@ -62,10 +44,40 @@ const props = defineProps({
   },
 });
 
+onMounted(() => {
+  wave_gen(1);
+  chartDom = document.getElementById(props.container) as HTMLElement
+  myChart = echarts.init(chartDom);
+  option.series[0].data = generateData(); // 搞不明白为啥报错，但能用
+  option && myChart.setOption(option);
+});
+</script>
+
+<script lang="ts">
+
+echarts.use([
+  ToolboxComponent,
+  TooltipComponent,
+  GridComponent,
+  DataZoomComponent,
+  LineChart,
+  CanvasRenderer,
+  UniversalTransition
+]);
+
+type EChartsOption = echarts.ComposeOption<
+  | ToolboxComponentOption
+  | TooltipComponentOption
+  | GridComponentOption
+  | DataZoomComponentOption
+  | LineSeriesOption
+>;
+
 var option: EChartsOption;
 var myChart: EChartsType;
-
+var chartDom: HTMLElement;
 option = {
+  backgroundColor: '',
   animation: false,
   grid: {
     top: 40,
@@ -125,13 +137,14 @@ option = {
       filterMode: 'filter',
       xAxisIndex: [0],
       startValue: 0,
-      endValue: 300
+      endValue: 300,
+      moveOnMouseWheel: 'alt'
     },
     {
       show: true,
       type: 'inside',
-      disabled: true,
-      zoomLock: true,
+      // disabled: true,
+      // zoomLock: true,
       filterMode: 'empty',
       yAxisIndex: [0],
       startValue: -1,
@@ -150,16 +163,15 @@ option = {
 
 // 绘制预览波形相关变量及函数
 var start = true;
-let uMaxValue = 3.3;    //峰峰值
-let offSetValue = 1.65; //偏置电压
-let duty = 50;             //占空比%(方波)
-let wave = 1;              //波形种类
+let uMaxValue = 3.3;         //峰峰值
+let offSetValue = 1.65       //偏置电压
+let duty = 50;               //占空比%(方波)
+let wave = 1;                //波形种类
 let samplePerCycle = 256;
 //定义板载8位DAC输出的对应值
 var waveTab1 = new Array();
 var waveTab = new Array();
 
-
 function wave_gen(index: number) {
   if (index == 1) {
     var sineValue = 0.0;
@@ -184,8 +196,8 @@ function wave_gen(index: number) {
   }
   else if (index == 3) //锯齿波
   {
-    for (var i = -127; i < 128; i++) {
-      waveTab1[i + 127] = ((i + (offSetValue * 255 / 3.3)) * (uMaxValue / 3.3));
+    for (var i = -128; i < 128; i++) {
+      waveTab1[i + 128] = ((i + (offSetValue * 255 / 3.3)) * (uMaxValue / 3.3));
 
     }
     console.log("波形表重设成功，当前为锯齿波\n");
@@ -200,7 +212,7 @@ function wave_gen(index: number) {
     waveTab[i] = waveTab1[i] * 3.3 / 255;
 
   }
-  console.log(waveTab);
+  // console.log(waveTab);
 }
 
 function generateData() {
@@ -212,10 +224,10 @@ function generateData() {
 }
 
 function refreshData() {
-  wave = parseInt(WaveGenData.waveType);
-  offSetValue = WaveGenData.biasVoltage;
-  duty = WaveGenData.duty;
-  uMaxValue = WaveGenData.uMaxValue;
+  offSetValue = WaveGenData.biasVoltage.value;
+  duty = WaveGenData.duty.value;
+  uMaxValue = WaveGenData.uMaxValue.value;
+  wave = parseInt(WaveGenData.waveType.value);
   wave_gen(wave);
   //刷新数据
   if (start === true) {
@@ -229,32 +241,26 @@ function refreshData() {
   }
 }
 
+function darkMode(isDark: boolean) {
+  myChart.dispose();
+  if (isDark == true)
+    myChart = echarts.init(chartDom, 'dark');
+  else
+    myChart = echarts.init(chartDom);
+  myChart.setOption(option);
+  refreshData();
+}
 
-
-onMounted(() => {
-  wave_gen(1);
-  var chartDom = document.getElementById(props.container) as HTMLElement
-  myChart = echarts.init(chartDom);
-  option.series[0].data = generateData(); // 搞不明白为啥报错，但能用
-  option && myChart.setOption(option);
-})
-
-</script>
-
-<script lang="ts">
 export default {
   name: "WaveGenChart",
-  props2: {
-    msg: String,
-    option: Object
-  },
-  darkMode(isDark: boolean) {
-    let chartDom1 = document.getElementById(this.container) as HTMLElement
-    if (isDark)
-      var chart = echarts.init(chartDom1, 'dark');
-    else
-      var chart = echarts.init(chartDom1);
-  }
+  option,
+  myChart,
+  uMaxValue,
+  offSetValue,
+  duty,
+  wave,
+  refreshData,
+  darkMode
 }
 
 </script>