You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
1.9 KiB
100 lines
1.9 KiB
<template>
|
|
<!-- 图表 -->
|
|
<view class="uchart-huan">
|
|
<view class="title">
|
|
<p style="height: 17px;font-size: 13px;">{{ name }}</p>
|
|
</view>
|
|
<view class="charts-box"><qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" /></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'progressBar',
|
|
props: {
|
|
name: {
|
|
type: String,
|
|
default: '完成百分比'
|
|
},
|
|
//完成百分比
|
|
baifen: {
|
|
type: [Number, String]
|
|
}
|
|
},
|
|
watch: {
|
|
baifen: {
|
|
immediate: false,
|
|
handler(newdata) {
|
|
// console.log(newdata);
|
|
this.getServerData();
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
chartData: {},
|
|
opts: {
|
|
color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
|
|
padding: undefined,
|
|
title: {
|
|
name: '0%',
|
|
fontSize: 15,
|
|
color: '#444C55'
|
|
},
|
|
subtitle: false,
|
|
extra: {
|
|
arcbar: {
|
|
type: 'circle',
|
|
width: 5,
|
|
backgroundColor: '#E9E9E9',
|
|
startAngle: 1.5,
|
|
endAngle: 0.25,
|
|
gap: 2
|
|
}
|
|
}
|
|
}
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getServerData();
|
|
},
|
|
methods: {
|
|
getServerData() {
|
|
// console.log(this.$props.baifen);
|
|
//模拟从服务器获取数据时的延时
|
|
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
|
|
// console.log(this.$props.baifen);
|
|
this.opts.title.name = `${`${this.$props.baifen * 100}`.slice(0, 3)}%`;
|
|
let res = {
|
|
series: [
|
|
{
|
|
color: '#CE184C',
|
|
data: this.$props.baifen
|
|
}
|
|
]
|
|
};
|
|
this.chartData = JSON.parse(JSON.stringify(res));
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.uchart-huan {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
// background-color: red;
|
|
.title {
|
|
}
|
|
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
|
|
.charts-box {
|
|
width: 180rpx;
|
|
height: 140rpx;
|
|
}
|
|
}
|
|
</style>
|