电压暂降表及密度完成

src/components/echarts/MyEchart.vue

@@ -6,7 +6,7 @@
 import { onBeforeUnmount, onMounted, ref, defineExpose, watch } from 'vue'
 // import echarts from './echarts'
 import * as echarts from 'echarts' // 全引入
-
+import 'echarts-gl';
 import 'echarts/lib/component/dataZoom'
 
 const chartRef = ref<HTMLDivElement>()
@@ -24,6 +24,90 @@ const initChart = () => {
     chart?.dispose()
 
     chart = echarts.init(chartRef.value as HTMLDivElement)
+    console.log({
+        title: {
+            left: 'center',
+            textStyle: {
+                color: '#000',
+                fontSize: 18
+            },
+            ...(props.options.title || null)
+        },
+        tooltip: {
+            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,
+            ...(props.options.tooltip || null)
+        },
+        legend: {
+            right: 20,
+            top: 0,
+            itemGap: 10,
+            itemStyle: {},
+            textStyle: {
+                fontSize: 12,
+                padding: [2, 0, 0, 0] //[上、右、下、左]
+            },
+            itemWidth: 15,
+            itemHeight: 10,
+            ...(props.options.legend || null)
+        },
+        grid: {
+            top: '50px',
+            left: '10px',
+            right: '60px',
+            bottom: props.options.options?.dataZoom === null ? '10px' : '40px',
+            containLabel: true
+        },
+        xAxis: handlerXAxis(),
+        yAxis: handlerYAxis(),
+        dataZoom: [
+            {
+                type: 'inside',
+                height: 13,
+                start: 0,
+                bottom: '20px',
+                end: 100,
+                ...(props.options.dataZoom || null)
+            },
+            {
+                start: 0,
+                height: 13,
+                bottom: '20px',
+                end: 100,
+                ...(props.options.dataZoom || null)
+            }
+        ],
+        color: [
+            ...(props.options.color || ''),
+            '#07CCCA ',
+            '#00BFF5',
+            '#FFBF00',
+            '#77DA63',
+            '#D5FF6B',
+            '#Ff6600',
+            '#FF9100',
+            '#5B6E96',
+            '#66FFCC',
+            '#B3B3B3'
+        ],
+        series: props.options.series,
+        ...props.options.options
+    })
     chart.setOption({
         title: {
             left: 'center',
@@ -66,7 +150,6 @@ const initChart = () => {
             itemHeight: 10,
             ...(props.options.legend || null)
         },
-
         grid: {
             top: '50px',
             left: '10px',
@@ -106,6 +189,7 @@ const initChart = () => {
             '#66FFCC',
             '#B3B3B3'
         ],
+        series: props.options.series,
         ...props.options.options
     })
     setTimeout(() => {