V-chart数据统计
1、柱状图
<ve-histogram
style="margin:0 auto;"
width="60%"
:data="statisticsChartData"
:settings="chartSettings"
/>
data(){
this.chartSettings = {
axisSite: { right: ['proportion'] },
yAxisName: ['个数', '比例'],
yAxisType: ['normal', 'percent'],
labelMap: {
'count': "个数",
'proportion': "比例"
}
};
return {
statisticsChartData: {
columns: ['type', 'count', 'proportion'],
rows: [
{ 'type': '常规测试', 'count': 0, 'proportion': 0,'title':"routine" }
]
}
}
}
2、环形图
<template>
<div class="ringPanel">
<lk-row>
<div class="margin-bottom-20">
{{ title }}
</div>
<div class="dataTable">
<ve-ring
:data="chartData"
:settings="chartSettings"
:extend="chartExtend"
/>
</div>
</lk-row>
</div>
</template>
<script>
const defaultChartData = {
columns: ['title', 'count'],
rows: [
{ 'title': '带StoryID', 'count': 13 ,'proportion': 10}]
};
export default {
props:{
title: {
type: String,
default: '用例分析'
},
chartData: {
type: Object,
default: defaultChartData
},
centerText: {
type: String,
default: '当前总用例数'
},
centerData: {
type: String,
default: '0'
}
},
data(){
this.chartSettings = {
label: { show: false },
hoverAnimation: false,
offsetY: 200,
};
return {
chartExtend: {
legend: {
show: true,
right: '50%',
orient: 'vertical',
align:'left',
y: 'center',
formatter: (name) => {
const param = this.chartData.rows.find(item => {
return item[`title`] === name;
});
return '{label|' + name + '}' +
'{proportion|' + param.proportion + '%' + '}'+
'{count|' + param.count + '}';
},
textStyle: {
rich: {
label: {
fontSize:14,
align:'left',
padding:[0,0,0,10]
},
count: {
fontSize:14,
align:'right',
padding:[0,0,0,15],
},
proportion: {
fontSize:14,
align:'right',
padding:[0,0,0,10],
}
}
}
},
series: {
center: ['30.5%', '50%']
},
graphic: [{
type: 'text',
left: '28%',
top: '45%',
style: {
text: this.centerText,
textAlign: 'center',
fill: '#000',
fontSize: 16,
}
}, {
type: 'text',
left: '30%',
top: '55%',
style: {
text: this.centerData,
textAlign: 'center',
fill: '#999999',
fontSize: 16,
}
}],
}
}
}
}
</script>
<style lang="less" scoped>
.ringPanel {
padding: 20px;
.margin-bottom-20{
padding-left: 8%;
font-size: 17px;
color: #666;
font-weight: bold;
}
.dataTable {
margin-top: 40px;
margin-bottom: 40px;
}
}
</style>
3、日期选择控件(限制30天,且不超过今天)
<el-date-picker
v-model="timeRange"
type="daterange"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
value-format="yyyy-MM-dd"
align="right"
style="width: 100%"
:clearable="false"
:picker-options="pickerOptions"
/>
data:{
timeRange: [],
pickerMinDate: '',
pickerOptions: {
disabledDate: (time) => {
if (this.pickerMinDate) {
const day1 = 31 * 24 * 3600 * 1000;
let maxTime = this.pickerMinDate + day1;
let minTime = this.pickerMinDate - day1;
if (maxTime > new Date()){
maxTime = new Date();
}
return time.getTime() > maxTime || time.getTime() < minTime;
}
return time.getTime() > Date.now();
},
onPick: ({ maxDate, minDate }) => {
this.pickerMinDate = minDate.getTime();
if (maxDate){
this.pickerMinDate = '';
}
}
}
methods: resetDate(){
// 设置默认时间
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
this.timeRange = [start,end];
}