109 lines
2.4 KiB
Plaintext
109 lines
2.4 KiB
Plaintext
<template>
|
|
<div ref="chartRef" :style="{ height, width }"></div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { onMounted, ref, Ref } from 'vue';
|
|
|
|
import { useECharts } from '@/hooks/web/useECharts';
|
|
|
|
import { basicProps } from './props';
|
|
|
|
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: [
|
|
'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',
|
|
},
|
|
},
|
|
],
|
|
});
|
|
});
|
|
</script>
|