284 lines
12 KiB
Vue
284 lines
12 KiB
Vue
<template>
|
||
<el-dialog v-model="visible" :fullscreen="isFullscreen" v-bind="$attrs" :show-close="showClose">
|
||
<template #header>
|
||
<slot name="header">
|
||
<span class="el-dialog__title">{{ title }}</span>
|
||
</slot>
|
||
<div class="sc-dialog__headerbtn">
|
||
<button v-if="showFullscreen" aria-label="fullscreen" type="button" @click="setFullscreen">
|
||
<el-icon v-if="isFullscreen" class="el-dialog__close"><el-icon-bottom-left /></el-icon>
|
||
<el-icon v-else class="el-dialog__close"><el-icon-full-screen /></el-icon>
|
||
</button>
|
||
<button v-if="showClose" aria-label="close" type="button" @click="closeDialog">
|
||
<el-icon class="el-dialog__close"></el-icon>
|
||
</button>
|
||
</div>
|
||
</template>
|
||
<div v-loading="loading">
|
||
<div class="searchHead" v-if="type=='hours'">
|
||
<el-date-picker
|
||
v-model="query.start_time"
|
||
type="date"
|
||
placeholder="选择时间"
|
||
format="YYYY-MM-DD"
|
||
value-format="YYYY-MM-DD"
|
||
:picker-options="pickerOptions"
|
||
/>
|
||
<span class="middleText">至</span>
|
||
<el-date-picker
|
||
v-model="query.end_time"
|
||
type="date"
|
||
format="YYYY-MM-DD"
|
||
value-format="YYYY-MM-DD"
|
||
start-placeholder="结束日期"
|
||
:picker-options="pickerOptions"
|
||
/>
|
||
<el-button type="primary" class="searchBtn" @click="dataSearch">查询</el-button>
|
||
</div>
|
||
<div class="searchHead" v-if="type=='days'">
|
||
<el-date-picker
|
||
v-model="query.start_time"
|
||
type="date"
|
||
format="YYYY-MM-DD"
|
||
value-format="YYYY-MM-DD"
|
||
start-placeholder="开始日期"
|
||
:picker-options="pickerOptions"
|
||
/>
|
||
<el-date-picker
|
||
v-model="query.end_time"
|
||
type="date"
|
||
format="YYYY-MM-DD"
|
||
value-format="YYYY-MM-DD"
|
||
start-placeholder="结束日期"
|
||
:picker-options="pickerOptions"
|
||
/>
|
||
<el-button type="primary" class="searchBtn" @click="dataSearch">查询</el-button>
|
||
</div>
|
||
<div class="searchHead" v-if="type=='month'">
|
||
<el-date-picker
|
||
v-model="query.start_time"
|
||
type="month"
|
||
format="YYYY-MM"
|
||
value-format="YYYY-MM"
|
||
start-placeholder="开始月份"
|
||
:picker-options="pickerOptions"
|
||
/>
|
||
<el-date-picker
|
||
v-model="query.end_time"
|
||
type="month"
|
||
format="YYYY-MM"
|
||
value-format="YYYY-MM"
|
||
start-placeholder="结束月份"
|
||
:picker-options="pickerOptions"
|
||
/>
|
||
<el-button type="primary" class="searchBtn" @click="dataSearch">查询</el-button>
|
||
</div>
|
||
<div class="searchHead" v-if="type=='year'">
|
||
<el-date-picker
|
||
v-model="query.start_time"
|
||
type="year"
|
||
format="YYYY"
|
||
value-format="YYYY"
|
||
start-placeholder="开始日期"
|
||
:picker-options="pickerOptions"
|
||
/>
|
||
<el-date-picker
|
||
v-model="query.end_time"
|
||
type="year"
|
||
format="YYYY"
|
||
value-format="YYYY"
|
||
start-placeholder="结束日期"
|
||
:picker-options="pickerOptions"
|
||
/>
|
||
<el-button type="primary" class="searchBtn" @click="dataSearch">查询</el-button>
|
||
</div>
|
||
<div id="myChart" style="width:100%;height:400px;"></div>
|
||
</div>
|
||
<template #footer>
|
||
<slot name="footer"></slot>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import * as echarts from 'echarts';
|
||
export default {
|
||
props: {
|
||
type: { type: String, default: "hours" },
|
||
title: { type: String, default: "" },
|
||
apiObj: { type: Object, default: () => { } },
|
||
showClose: { type: Boolean, default: true },
|
||
echartType: { type: String, default: 'bar' },
|
||
modelValue: { type: Boolean, default: false },
|
||
showFullscreen: { type: Boolean, default: true },
|
||
loading: { type: Boolean, default: false }
|
||
},
|
||
data() {
|
||
return {
|
||
visible: false,
|
||
isFullscreen: false,
|
||
query:{
|
||
time:''
|
||
},
|
||
myChart:null,
|
||
option: {
|
||
title: {
|
||
text: '折线图',
|
||
subtext: '小标题',
|
||
x: 'center'
|
||
},
|
||
grid: { // 图表距离边框的距离，可用百分比和数字（px）配置
|
||
top: '20%',
|
||
left: '3%',
|
||
right: '10%',
|
||
bottom: '5%',
|
||
containLabel: true
|
||
},
|
||
legend: { // 图例配置选项
|
||
orient: 'horizontal', //图例布局方式：水平 'horizontal' 、垂直 'vertical'
|
||
x: 'right', // 横向放置位置，选项：'center'、'left'、'right'、'number'（横向值 px）
|
||
y: '10',// 纵向放置位置，选项：'top'、'bottom'、'center'、'number'（纵向值 px）
|
||
data: ['查询对象'],
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['1','2','3','4','5','6','7','8','9','10','11','12'],
|
||
name: '时间',
|
||
// x轴名称样式
|
||
nameTextStyle: {
|
||
fontWeight: 600,
|
||
fontSize: 14
|
||
},
|
||
axisLine: {
|
||
lineStyle: { // X 轴颜色配置
|
||
color: '#3366CC'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
rotate: 45, // X 轴标签文字旋转角度
|
||
interval: 0 //设置 X 轴数据间隔几个显示一个，为0表示都显示
|
||
},
|
||
boundaryGap: false, //数据从 Y 轴起始
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
name: '对象值',
|
||
// y轴名称样式
|
||
nameTextStyle: {
|
||
fontWeight: 500,
|
||
fontSize: 14
|
||
},
|
||
//min:0, // 配置 Y 轴刻度最小值
|
||
//max:4000, // 配置 Y 轴刻度最大值
|
||
//splitNumber:7, // 配置 Y 轴数值间隔
|
||
axisLine: {
|
||
lineStyle: { // Y 轴颜色配置
|
||
color: '#3366CC'
|
||
}
|
||
},
|
||
},
|
||
tooltip: {
|
||
show: true, // 是否显示
|
||
trigger: 'axis', // axis item none
|
||
axisPointer: { // 坐标轴指示器配置项。
|
||
type: 'cross', // 'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器 'cross' 十字准星指示器。
|
||
axis: 'auto', // 指示器的坐标轴。
|
||
snap: true, // 坐标轴指示器是否自动吸附到点上
|
||
},
|
||
showContent: true,
|
||
},
|
||
series: [
|
||
{
|
||
name: '查询对象',
|
||
data: [0,0,0,0,0,0,0,0,0,0,0,0],
|
||
type: 'line',
|
||
// symbolSize: function(value) { // 点的大小跟随数值增加而变大
|
||
// return value / 150;
|
||
// },
|
||
symbolSize:8, //设置折线上圆点大小
|
||
symbol:'circle',
|
||
smooth: 0.5, // 设置折线弧度
|
||
itemStyle: {
|
||
normal: {
|
||
label : {
|
||
show: true // 在折线拐点上显示数据
|
||
},
|
||
lineStyle:{
|
||
width:1, // 设置虚线宽度
|
||
type:'dotted', // 虚线'dotted' 实线'solid'
|
||
color: '#3366CC'// 折线颜色设置为0，即只显示点，不显示折线
|
||
}
|
||
}
|
||
}
|
||
},
|
||
]
|
||
},
|
||
pickerOptions: {
|
||
disabledDate(time) {
|
||
return time.getTime() > Date.now();
|
||
}
|
||
}
|
||
}
|
||
},
|
||
watch:{
|
||
modelValue(){
|
||
this.visible = this.modelValue
|
||
if(this.visible){
|
||
this.isFullscreen = false
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
console.log(this.type);
|
||
console.log(this.title);
|
||
console.log(this.echartType);
|
||
this.visible = this.modelValue;
|
||
this.$nextTick(res=>{
|
||
this.getChartsData();
|
||
})
|
||
|
||
},
|
||
methods: {
|
||
async getChartsData(){
|
||
let that = this;
|
||
// var res = await this.apiObj.req(this.query);
|
||
let chartDom = document.getElementById('myChart');
|
||
that.myChart = echarts.init(chartDom);
|
||
// var option = {};
|
||
that.myChart.setOption(that.option);
|
||
},
|
||
//关闭
|
||
closeDialog(){
|
||
this.visible = false;
|
||
|
||
},
|
||
//最大化
|
||
setFullscreen(){
|
||
this.isFullscreen = !this.isFullscreen
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.searchHead{
|
||
display:flex
|
||
}
|
||
.middleText{
|
||
height: 32px;
|
||
line-height: 32px;
|
||
margin: 0 5px;
|
||
display: inline-block;
|
||
}
|
||
.searchBtn{
|
||
margin-left: 5px;
|
||
}
|
||
.sc-dialog__headerbtn {position: absolute;top: var(--el-dialog-padding-primary);right: var(--el-dialog-padding-primary);}
|
||
.sc-dialog__headerbtn button {padding: 0;background: transparent;border: none;outline: none;cursor: pointer;font-size: var(--el-message-close-size,16px);margin-left: 15px;color: var(--el-color-info);}
|
||
.sc-dialog__headerbtn button:hover .el-dialog__close {color: var(--el-color-primary);}
|
||
.sc-dialog:deep(.el-dialog).is-fullscreen {display: flex;flex-direction: column;top:0px !important;left:0px !important;}
|
||
.sc-dialog:deep(.el-dialog).is-fullscreen .el-dialog__header {}
|
||
.sc-dialog:deep(.el-dialog).is-fullscreen .el-dialog__body {flex:1;overflow: auto;}
|
||
.sc-dialog:deep(.el-dialog).is-fullscreen .el-dialog__footer {padding-bottom: 10px;border-top: 1px solid var(--el-border-color-base);}
|
||
</style> |