117 lines
2.5 KiB
Vue
117 lines
2.5 KiB
Vue
|
<template>
|
||
|
|
<el-card shadow="never" header="今日来访趋势">
|
||
|
|
<div class="TodayVisitTrend">
|
||
|
|
<Vechart :option="options"/>
|
||
|
|
</div>
|
||
|
|
</el-card>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import Vechart from 'vue-echarts'
|
||
|
|
import * as echarts from 'echarts/core';
|
||
|
|
import {
|
||
|
|
TitleComponent,
|
||
|
|
ToolboxComponent,
|
||
|
|
TooltipComponent,
|
||
|
|
GridComponent,
|
||
|
|
LegendComponent
|
||
|
|
} from 'echarts/components';
|
||
|
|
import { LineChart } from 'echarts/charts';
|
||
|
|
import { UniversalTransition } from 'echarts/features';
|
||
|
|
import { CanvasRenderer } from 'echarts/renderers';
|
||
|
|
|
||
|
|
|
||
|
|
defineOptions({
|
||
|
|
name: 'TodayVisitTrend'
|
||
|
|
})
|
||
|
|
|
||
|
|
echarts.use([
|
||
|
|
TitleComponent,
|
||
|
|
ToolboxComponent,
|
||
|
|
TooltipComponent,
|
||
|
|
GridComponent,
|
||
|
|
LegendComponent,
|
||
|
|
LineChart,
|
||
|
|
CanvasRenderer,
|
||
|
|
UniversalTransition
|
||
|
|
]);
|
||
|
|
|
||
|
|
|
||
|
|
const times = Array.from({length: 24}, (_, i) => `${i}:00`)
|
||
|
|
const data = Array.from({length: 24}, (_, i) => Math.floor(Math.random() * 100))
|
||
|
|
const options = {
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
axisPointer: {
|
||
|
|
type: 'cross',
|
||
|
|
crossStyle: {
|
||
|
|
color: '#999'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
top: '10%',
|
||
|
|
left: '3%',
|
||
|
|
right: '3%',
|
||
|
|
bottom: '10%',
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'category',
|
||
|
|
data: times,
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: 'value'
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: 'Line 1',
|
||
|
|
type: 'line',
|
||
|
|
stack: 'Total',
|
||
|
|
smooth: true,
|
||
|
|
lineStyle: {
|
||
|
|
width: 0
|
||
|
|
},
|
||
|
|
showSymbol: false,
|
||
|
|
areaStyle: {
|
||
|
|
opacity: 0.8,
|
||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
|
|
{
|
||
|
|
offset: 0,
|
||
|
|
color: '#004564'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: '#00a0df'
|
||
|
|
}
|
||
|
|
])
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
focus: 'series'
|
||
|
|
},
|
||
|
|
// name: '今日来访',
|
||
|
|
data: data,
|
||
|
|
// type: 'line',
|
||
|
|
// smooth: true
|
||
|
|
// barWidth: '35%',
|
||
|
|
// itemStyle: {
|
||
|
|
// color: '#004564'
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.TodayVisitTrend {
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
width: 100%;
|
||
|
|
height: 250px;
|
||
|
|
}
|
||
|
|
</style>
|