在完成项目图表的时候,通过更改css样式,不借助echarts可以页面绘制出柱状图
页面详细代码如下所示
<template>
<div>
<div class="charts" >
<el-card>
<div style="font-weight: bold;margin-bottom: 15px;">Top10</div>
<div class="service-progress" v-for="(item,index) in chartData06" :key="index"
:value="item" style="position: relative">
<el-progress :percentage="(parseInt(item.value)/topNumber)*100"
:stroke-width="25"
:show-text=false
class="progress-bar">
</el-progress>
<el-row type="flex" justify="center" align="middle" class="progress-info">
<div class="info-c-1">
<el-tooltip class="item" effect="dark" :content="item.name" placement="top" :enterable="false">
<span class="dataNameTxt" style="color: white">{{item.name}}</span>
</el-tooltip>
</div>
</el-row>
<div class="statistics" >
<span style="margin-left:20px;">{{ item.value}}</span>
</div>
</div>
</el-card>
</div>
</div>
</template>
<script>
import monitor from "../../../api/monitor";
import {countDateFn} from '@/views/utils/editTime'
export default {
name: "topNCpmDatabase",
props:["datetime"],
data(){
return{
showTopNCpmData: true,
chartData06:[],
topNumber:1,
}
},
methods:{
topSlow(data){
let arr=[]
for(let i of data){
arr.push(parseInt(i.value))
}
let max = Math.max.apply(1, arr);
this.topNumber=max
},
// 请求数排行(CPM) Top10
async getTopNCpmDatabase(start,end){
let {step, startDate, endDate} = countDateFn(start, end);
let params={
end:endDate,
start:startDate,
step:step,
}
await monitor.queryTopNCpmDatabase(params).then(res => {
if (res.data && res.status === 200) {
if(res.data.success){
this.chartData06 = res.data;
this.topSlow(this.chartData06)
}else{
this.chartData06=[];
}
} else {
this.$popError(res.data.message);
}
})
},
},
watch:{
datetime(){
const {startTime,endTime}=this.datetime;
this.getTopNCpmDatabase(startTime,endTime)
}
}
}
</script>
<style lang="scss" scoped>
.charts .el-card{
height: 310px;
}
/*进度条样式*/
.progress-box {
width: 100%;
overflow: hidden;
}
.service-progress {
padding: 1px 80px 6px 5px;
cursor: pointer;
}
/deep/ .el-progress-bar__outer {
border-radius: 3px !important;
background-color: rgb(206,230,236);
}
/deep/ .el-progress-bar__inner {
border-radius: 3px;
background-color: rgb(36,161,193);
}
/deep/ .progress-info.el-row.is-justify-center.is-align-middle.el-row--flex{
border-radius: 3px;
}
.progress-info {
width: 100%;
margin-top: -25px;
height: 25px;
display: flex;
justify-content: flex-start;
}
.info-c-1 {
width: 40%;
text-align: left;
padding-left: 10px;
font-size: 10px;
color: #495060;
}
.dataNameTxt {
display: inline-block;
max-width: calc(100% - 5px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: bottom;
}
.statistics {
font-size: 10px;
position: absolute;
top: 4px;
width: 120px;
right: -45px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/deep/ .el-card__body {
position: relative;
}
.changeChart {
cursor: pointer;
position: absolute;
z-index: 100;
right: 30px;
}
</style>
页面展示效果如下所示