93 lines
2.4 KiB
Vue
93 lines
2.4 KiB
Vue
|
<template>
|
||
|
|
<div ref="chartRef" style="width: 100%; height: 420px;"></div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import {randomString} from "@/utils"
|
||
|
|
import { ref, onMounted } from 'vue';
|
||
|
|
import * as echarts from 'echarts';
|
||
|
|
import { formatTime, finalTimestamp } from '@/utils/ruoyi'; // 时间格式化
|
||
|
|
const { proxy } = getCurrentInstance();
|
||
|
|
|
||
|
|
const chartRef = ref(null);
|
||
|
|
const props = defineProps({
|
||
|
|
data:{
|
||
|
|
type: Array,
|
||
|
|
default: () => []
|
||
|
|
},
|
||
|
|
dateType:{
|
||
|
|
type: String,
|
||
|
|
default: '1'
|
||
|
|
},
|
||
|
|
nameTile:{
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
}
|
||
|
|
})
|
||
|
|
let datarr = [];
|
||
|
|
let seriesArr = [];
|
||
|
|
if (props.dateType == '1'){
|
||
|
|
props.data.forEach(item => {
|
||
|
|
datarr.push(formatTime(item.dayTime));
|
||
|
|
seriesArr.push(item.cnt);
|
||
|
|
})
|
||
|
|
}else if (props.dateType == '2'){
|
||
|
|
props.data.forEach(item => {
|
||
|
|
datarr.push(item.day);
|
||
|
|
seriesArr.push(item.number);
|
||
|
|
})
|
||
|
|
}
|
||
|
|
// 在组件挂载后初始化图表
|
||
|
|
onMounted(() => {
|
||
|
|
const chart = echarts.init(chartRef.value); // 初始化图表
|
||
|
|
const option = {
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis'
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
top: "8%",
|
||
|
|
left: "1%",
|
||
|
|
right: "1%",
|
||
|
|
bottom: "0%",
|
||
|
|
containLabel: true,
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'category',
|
||
|
|
data: datarr.length == 0 ?[0]:datarr,
|
||
|
|
axisLine: {
|
||
|
|
onZero: false // <<< 让X轴永远在底部
|
||
|
|
}
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: 'value',
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: props.nameTile,
|
||
|
|
data: seriesArr.length == 0 ?[0]:seriesArr,
|
||
|
|
type: 'line',
|
||
|
|
symbol: 'circle',
|
||
|
|
symbolSize: 10,
|
||
|
|
lineStyle: {
|
||
|
|
width: 2
|
||
|
|
},
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
chart.setOption(option); // 设置图表选项
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang='scss'>
|
||
|
|
.column-copy {
|
||
|
|
cursor: pointer;
|
||
|
|
color: #409EFF;
|
||
|
|
white-space: nowrap;
|
||
|
|
|
||
|
|
i {
|
||
|
|
transform: translateY(2px);
|
||
|
|
margin-right: 2px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|