zh

src/components/echarts/MyEchart.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { onBeforeUnmount, onMounted, ref, defineExpose, watch } from 'vue'
 import echarts from './echarts'
 import 'echarts/lib/component/dataZoom'
 
@@ -11,32 +11,116 @@ const props = defineProps(['options'])
 const chartRef = ref<HTMLDivElement>()
 let chart: echarts.ECharts | null = null
 const resizeHandler = () => {
-    chart?.resize()
+    setTimeout(() => {
+        chart?.resize()
+    }, 100)
 }
 const initChart = () => {
+    chart?.dispose()
+
     chart = echarts.init(chartRef.value as HTMLDivElement)
     chart.setOption({
-        tooltip: {
-            showContent: true,
-            trigger: 'axis',
-            backgroundColor: 'rgba(8,36,68,.7)',
-            axisPointer: {
-                // 坐标轴指示器，坐标轴触发有效
-                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-            },
-            color: '#ffff',
+        title: {
+            ...props.options.title,
+            left: 'center',
             textStyle: {
-                color: '#ffff'
+                color: '#000',
+                fontSize: 18
             }
         },
+        tooltip: {
+            ...(props.options.tooltip || null),
+            trigger: 'axis',
+
+            axisPointer: {
+                type: 'shadow',
+                label: {
+                    color: '#fff',
+                    fontSize: 16
+                }
+            },
+            textStyle: {
+                color: '#fff',
+                fontStyle: 'normal',
+                opacity: 0.35,
+                fontSize: 14
+            },
+            backgroundColor: 'rgba(0,0,0,0.35)',
+            borderWidth: 0
+        },
+        legend: {
+            ...(props.options.xAxis.legend || null),
+            right: 80,
+            top: 0,
+            itemGap: 28,
+            itemStyle: {},
+            textStyle: {
+                rich: {
+                    a: {
+                        verticalAlign: 'middle'
+                    }
+                },
+
+                padding: [2, 0, 0, 0] //[上、右、下、左]
+            }
+        },
+
         grid: {
-            top: '30px',
-            left: '40px',
+            top: '50px',
+            left: '10px',
             right: '40px',
             bottom: '40px',
 
             containLabel: true
         },
+        xAxis: [
+            {
+                ...(props.options.xAxis || null),
+                type: 'category',
+                axisTick: { show: false },
+                axisLine: {
+                    lineStyle: {
+                        color: '#000'
+                    }
+                },
+                axisLabel: {
+                    textStyle: {
+                        fontFamily: 'dinproRegular',
+                        color: '#000',
+                        fontSize: '12'
+                    }
+                }
+            }
+        ],
+        yAxis: [
+            {
+                ...(props.options.yAxis || null),
+                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
+                    }
+                }
+            }
+        ],
         dataZoom: [
             {
                 type: 'inside',
@@ -53,6 +137,7 @@ const initChart = () => {
             }
         ],
         color: [
+            ...(props.options.color || ''),
             '#07CCCA ',
             '#00BFF5',
             '#FFBF00',
@@ -64,20 +149,26 @@ const initChart = () => {
             '#66FFCC',
             '#B3B3B3'
         ],
-        ...props.options
+        ...props.options.options
     })
 }
 onMounted(() => {
     setTimeout(() => {
-        initChart()
+        // initChart()
     }, 20)
     window.addEventListener('resize', resizeHandler)
 })
-
+defineExpose({ initChart })
 onBeforeUnmount(() => {
     window.removeEventListener('resize', resizeHandler)
     chart?.dispose()
 })
+watch(
+    () => props.options,
+    (newVal, oldVal) => {
+        initChart()
+    }
+)
 </script>
 
 <style lang="scss" scoped>