244 lines
8.1 KiB
Vue
244 lines
8.1 KiB
Vue
<template >
|
||
<div>
|
||
<div style="display: flex;align-items: center;">
|
||
<a-radio-group default-value="month" size="large" button-style="solid" @change="onSearch">
|
||
<a-radio-button value="year">
|
||
按年份
|
||
</a-radio-button>
|
||
<a-radio-button value="month">
|
||
按月份
|
||
</a-radio-button>
|
||
<a-radio-button value="day">
|
||
按本月
|
||
</a-radio-button>
|
||
<a-radio-button value="week">
|
||
按本周
|
||
</a-radio-button>
|
||
<a-radio-button value="day7">
|
||
最近7天
|
||
</a-radio-button>
|
||
<a-radio-button value="day30">
|
||
最近30天
|
||
</a-radio-button>
|
||
</a-radio-group>
|
||
<p v-if='interval' style="margin: 0 10px;">(数据每 {{interval}} 分钟刷新一次)</p>
|
||
</div>
|
||
|
||
<div :id="id" v-if="isShowCustomChart" style="width: 95%;height: 500px;margin: 20px auto 0;"></div>
|
||
<div class="loading-box" v-else style="width: 95%;height: 500px;margin: 20px auto 0;display: flex;align-items: center;justify-content: center;">
|
||
<a-icon type="loading" spin style="font-size: 50px;color: #122ed1;margin-left: 10px;" />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import * as echarts from 'echarts';
|
||
// import BASE_URL from '@/services/Middle/transport/Custom/api.js';
|
||
// 从父组件中获取数据，id是echarts专属id，同个页面需要传不同id，actions是请求数据的接口，type是图表类型 bar条形图 line折线图，title是图表标题
|
||
export default {
|
||
name: 'MyStatistics',
|
||
props: {
|
||
id:{
|
||
type:String
|
||
},
|
||
actions:{
|
||
type:String
|
||
},
|
||
type:{
|
||
type:String
|
||
},
|
||
title:{
|
||
type:String
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
isShowCustomChart: false,
|
||
interval:null,
|
||
options:{
|
||
year:{
|
||
cycle: 'year',
|
||
span: 0,
|
||
recently:false,
|
||
},
|
||
month:{
|
||
cycle:'month',
|
||
span: 0,
|
||
recently:false,
|
||
},
|
||
day:{
|
||
cycle: 'day',
|
||
span: 0,
|
||
recently:false,
|
||
},
|
||
week:{
|
||
cycle: 'week',
|
||
span: 0,
|
||
recently:false,
|
||
},
|
||
day7:{
|
||
cycle: 'day',
|
||
span: 7,
|
||
recently:true,
|
||
},
|
||
day30:{
|
||
cycle: 'day',
|
||
span: 30,
|
||
recently:true,
|
||
},
|
||
//搜索区
|
||
searchFormData: {
|
||
cycle: 'day',
|
||
span: 7,
|
||
recently:true,
|
||
},
|
||
searchFormItems: [
|
||
{field: 'cycle', title: '类型', span: 5, itemRender: {name: '$select', props: {placeholder: '请输入名称',
|
||
options:[
|
||
{label: '按日', value: 'day'},
|
||
{label: '按周', value: 'week'},
|
||
{label: '按月', value:'month'},
|
||
]
|
||
}}},
|
||
{field: 'span', title: '条数', span: 5, itemRender: {name: '$input', props: {type:'number'}}},
|
||
{field: 'recently', title: '从今天开始', span: 5, itemRender: {name: '$radio', options:[
|
||
{label: '是', value: true},
|
||
{label: '否', value: false}
|
||
]
|
||
}},
|
||
{
|
||
align: 'right', span: 4, itemRender: {
|
||
name: '$buttons', children: [{props: {type: 'submit', content: '筛选', status: 'primary'}},
|
||
{props: {type: 'reset', content: '重置'}}]
|
||
}
|
||
}
|
||
],
|
||
}
|
||
}
|
||
},
|
||
created(){
|
||
this.createChart('month')
|
||
},
|
||
methods: {
|
||
//选中日期后，创建图表
|
||
onSearch(e) {
|
||
this.isShowCustomChart = false;
|
||
this.createChart(e.target.value);
|
||
},
|
||
createChart(name){
|
||
let searchData = this.options[name];
|
||
if(this.type == 'bar'){
|
||
this.$mk.post({
|
||
url: this.actions,
|
||
data: searchData
|
||
}).then(res => {
|
||
this.isShowCustomChart = true;
|
||
this.interval = res.data.interval;
|
||
setTimeout(() => {
|
||
let myChart = echarts.init(document.getElementById(this.id));
|
||
let option = {
|
||
title:{
|
||
text:this.title,
|
||
left: 'left',
|
||
textStyle:{
|
||
fontSize: 20,
|
||
}
|
||
},
|
||
xAxis: {
|
||
name:res.data.label[0],
|
||
type: 'category',
|
||
data:res.data.items?res.data.items.map(item => item.name):[],
|
||
left: '0',
|
||
top: '60',
|
||
orient: 'vertical',
|
||
textStyle: {
|
||
fontSize: 15,
|
||
}
|
||
},
|
||
yAxis: {
|
||
name:res.data.label[1],
|
||
type: 'value'
|
||
},
|
||
series: [
|
||
{
|
||
data:res.data.items?res.data.items.map(item => item.data[0]):[],
|
||
type: 'bar',
|
||
barWidth: '30px' // 设置为类目宽度的50%
|
||
}
|
||
],
|
||
tooltip:{
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
label: {
|
||
backgroundColor: '#6a7985'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
myChart.setOption(option)
|
||
}, 100);
|
||
|
||
})
|
||
|
||
}else if(this.type == 'line'){
|
||
this.$mk.post({
|
||
url: this.actions,
|
||
data: searchData
|
||
}).then(res => {
|
||
this.isShowCustomChart = true;
|
||
this.interval = res.data.interval;
|
||
setTimeout(() => {
|
||
let myChart = echarts.init(document.getElementById(this.id));
|
||
let option = {
|
||
title:{
|
||
text: this.title,
|
||
left: 'left',
|
||
textStyle:{
|
||
fontSize: 20,
|
||
}
|
||
},
|
||
legend: {
|
||
data:res.data.items?res.data.items.map(item => item.name):[],
|
||
left: '0',
|
||
top: '60',
|
||
orient: 'vertical',
|
||
textStyle: {
|
||
fontSize: 15,
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: res.data.label
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
series:res.data.items? res.data.items.map((item) => {
|
||
return {
|
||
name:item.name,
|
||
data: item.data,
|
||
type: 'line',
|
||
}
|
||
}, ):{},
|
||
tooltip:{
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
label: {
|
||
backgroundColor: '#6a7985'
|
||
}
|
||
}
|
||
}
|
||
};
|
||
myChart.setOption(option)
|
||
}, 100);
|
||
|
||
})
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="">
|
||
|
||
</style> |