first

src/components/echarts/MyEchart.vue

@@ -0,0 +1,208 @@
+<template>
+    <div ref="chartRef" class="my-chart" />
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, defineExpose, watch } from 'vue'
+// import echarts from './echarts'
+import * as echarts from 'echarts' // 全引入
+
+import 'echarts/lib/component/dataZoom'
+
+const chartRef = ref<HTMLDivElement>()
+
+const props = defineProps(['options'])
+let chart: echarts.ECharts | any = null
+const resizeHandler = () => {
+    chart.getZr().painter.getViewportRoot().style.display = 'none'
+    requestAnimationFrame(() => {
+        chart.resize()
+        chart.getZr().painter.getViewportRoot().style.display = ''
+    })
+}
+const initChart = () => {
+    chart?.dispose()
+
+    chart = echarts.init(chartRef.value as HTMLDivElement)
+    chart.setOption({
+        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: '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'
+        ],
+        ...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 {
+            ...temp,
+            ...props.options.yAxis
+        }
+    }
+}
+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 {
+            ...temp,
+            ...props.options.xAxis
+        }
+    }
+}
+onMounted(() => {
+    initChart()
+    window.addEventListener('resize', resizeHandler)
+})
+defineExpose({ initChart })
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', resizeHandler)
+    chart?.dispose()
+})
+watch(
+    () => props.options,
+    (newVal, oldVal) => {
+        initChart()
+    }
+)
+</script>
+
+<style lang="scss" scoped>
+.my-chart {
+    height: 100%;
+    width: 100%;
+}
+</style>