<template> <div ref="chartRef" :style="{ height, width }"></div> </template> <script lang="ts"> import { defineComponent, onMounted, ref, Ref } from 'vue'; import { useECharts } from '/@/hooks/web/useECharts'; import { basicProps } from './props'; export default defineComponent({ props: basicProps, setup() { const chartRef = ref<HTMLDivElement | null>(null); const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); onMounted(() => { setOptions({ tooltip: { trigger: 'axis', axisPointer: { lineStyle: { width: 1, color: '#019680', }, }, }, xAxis: { type: 'category', boundaryGap: false, data: [ '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', ], splitLine: { show: true, lineStyle: { width: 1, type: 'solid', color: 'rgba(226,226,226,0.5)', }, }, axisTick: { show: false, }, }, yAxis: [ { type: 'value', max: 80000, splitNumber: 4, axisTick: { show: false, }, splitArea: { show: true, areaStyle: { color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'], }, }, }, ], grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true }, series: [ { smooth: true, data: [ 111, 222, 4000, 18000, 33333, 55555, 66666, 33333, 14000, 36000, 66666, 44444, 22222, 11111, 4000, 2000, 500, 333, 222, 111, ], type: 'line', areaStyle: {}, itemStyle: { color: '#5ab1ef', }, }, { smooth: true, data: [ 33, 66, 88, 333, 3333, 5000, 18000, 3000, 1200, 13000, 22000, 11000, 2221, 1201, 390, 198, 60, 30, 22, 11, ], type: 'line', areaStyle: {}, itemStyle: { color: '#019680', }, }, ], }); }); return { chartRef }; }, }); </script>