echart双轴处理

src/components/echarts/MyEchart.vue

@@ -6,6 +6,7 @@
 import { onBeforeUnmount, onMounted, ref, defineExpose, watch } from 'vue'
 import echarts from './echarts'
 import 'echarts/lib/component/dataZoom'
+
 const chartRef = ref<HTMLDivElement>()
 
 const props = defineProps(['options'])
@@ -71,54 +72,8 @@ const initChart = () => {
             bottom: '40px',
             containLabel: true
         },
-        xAxis: [
-            {
-                type: 'category',
-                axisTick: { show: false },
-                axisLine: {
-                    lineStyle: {
-                        color: '#000'
-                    }
-                },
-                axisLabel: {
-                    textStyle: {
-                        fontFamily: 'dinproRegular',
-                        color: '#000',
-                        fontSize: '12'
-                    }
-                },
-                ...(props.options.xAxis || null)
-            }
-        ],
-        yAxis: [
-            {
-                type: 'value',
-
-                nameTextStyle: {
-                    color: '#000'
-                },
-                minInterval: 1,
-                axisLine: {
-                    show: true,
-                    lineStyle: {
-                        color: '#000'
-                    }
-                },
-                axisLabel: {
-                    color: '#000',
-                    fontSize: 14
-                },
-                splitLine: {
-                    lineStyle: {
-                        // 使用深浅的间隔色
-                        color: ['#000'],
-                        type: 'dashed',
-                        opacity: 0.5
-                    }
-                },
-                ...(props.options.yAxis || null)
-            }
-        ],
+        xAxis: handlerXAxis(),
+        yAxis: handlerYAxis(),
         dataZoom: [
             {
                 type: 'inside',
@@ -133,7 +88,7 @@ const initChart = () => {
                 height: 13,
                 bottom: '20px',
                 end: 100,
-                ...(props.options.dataZoom|| null)
+                ...(props.options.dataZoom || null)
             }
         ],
         color: [
@@ -152,6 +107,80 @@ const initChart = () => {
         ...props.options.options
     })
 }
+const handlerYAxis = () => {
+    let temp = {
+        type: 'value',
+
+        nameTextStyle: {
+            color: '#000'
+        },
+        minInterval: 1,
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#000'
+            }
+        },
+        axisLabel: {
+            color: '#000',
+            fontSize: 14
+        },
+        splitLine: {
+            lineStyle: {
+                // 使用深浅的间隔色
+                color: ['#000'],
+                type: 'dashed',
+                opacity: 0.5
+            }
+        }
+    }
+    // props.options.xAxis 是数组还是对象
+    if (Array.isArray(props.options.yAxis)) {
+        return props.options.yAxis.map((item: any) => {
+            return {
+                ...item,
+                ...temp
+            }
+        })
+    } else {
+        return {
+            ...props.options.yAxis,
+            ...temp
+        }
+    }
+}
+const handlerXAxis = () => {
+    let temp = {
+        type: 'category',
+        axisTick: { show: false },
+        axisLine: {
+            lineStyle: {
+                color: '#000'
+            }
+        },
+        axisLabel: {
+            textStyle: {
+                fontFamily: 'dinproRegular',
+                color: '#000',
+                fontSize: '12'
+            }
+        }
+    }
+    // props.options.xAxis 是数组还是对象
+    if (Array.isArray(props.options.xAxis)) {
+        return props.options.xAxis.map((item: any) => {
+            return {
+                ...item,
+                ...temp
+            }
+        })
+    } else {
+        return {
+            ...props.options.xAxis,
+            ...temp
+        }
+    }
+}
 onMounted(() => {
     initChart()
     window.addEventListener('resize', resizeHandler)