You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
83 lines
1.9 KiB
83 lines
1.9 KiB
<script lang="ts" setup> |
|
import type { Ref } from 'vue' |
|
import { onMounted, ref } from 'vue' |
|
import { basicProps } from './props' |
|
import { useECharts } from '@/hooks/web/useECharts' |
|
|
|
defineProps({ |
|
...basicProps, |
|
}) |
|
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: [...Array.from({ length: 18 })].map((_item, index) => `${index + 6}: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', |
|
}, |
|
}, |
|
], |
|
}) |
|
}) |
|
</script> |
|
|
|
<template> |
|
<div ref="chartRef" :style="{ height, width }" /> |
|
</template>
|
|
|