Commit 832d71d0 authored by leon's avatar leon

feat: progress component bug

parent b4662e18
...@@ -3,26 +3,27 @@ ...@@ -3,26 +3,27 @@
<u-line-progress <u-line-progress
class="u-line" class="u-line"
v-if="elementInfo.option.progress.type === 'line'" v-if="elementInfo.option.progress.type === 'line'"
:style="{'width': elementInfo.width + 'rpx'}" :style="{'width': elementInfo.width + 'px', 'font-size': elementInfo.option.progress.fontSize +'px', 'color': elementInfo.option.progress.titleColor}"
:height="elementInfo.option.progress.height" :height="elementInfo.option.progress.height"
:active-color="elementInfo.option.progress.strokeColor" :active-color="elementInfo.option.progress.strokeColor"
:inactive-color="elementInfo.option.progress.trailColor" :inactive-color="elementInfo.option.progress.trailColor"
:round="elementInfo.option.progress.strokeLinecap == 'round' ? true : false" :round="elementInfo.option.progress.strokeLinecap == 'round' ? true : false"
:percent="elementInfo.data.dataList.endVal" :percent="endVal"
:show-percent="elementInfo.option.progress.showInfo" :show-percent="elementInfo.option.progress.showInfo"
> >
</u-line-progress> </u-line-progress>
<u-circle-progress <u-circle-progress
class="u-circle" class="u-circle"
v-if="elementInfo.option.progress.type === 'circle'" v-if="elementInfo.option.progress.type === 'circle'"
:width="elementInfo.option.progress.width" :width="getRpx(elementInfo.option.progress.width)"
:border-width="elementInfo.option.progress.strokeWidth" :border-width="getRpx(elementInfo.option.progress.strokeWidth)"
:active-color="elementInfo.option.progress.strokeColor" :active-color="elementInfo.option.progress.strokeColor"
:inactive-color="elementInfo.option.progress.trailColor" :inactive-color="elementInfo.option.progress.trailColor"
:percent="elementInfo.data.dataList.endVal" :percent="endVal"
:bg-color="00000000" :bg-color="00000000"
> >
<view class="u-progress-text">{{elementInfo.data.dataList.endVal}}%</view> <view class="u-progress-text"
:style="{'font-size': elementInfo.option.progress.fontSize +'px', 'color': elementInfo.option.progress.titleColor}">{{endVal}}%</view>
</u-circle-progress> </u-circle-progress>
<DashboardProgress style="height: 100%;" v-if="elementInfo.option.progress.type === 'dashboard'" :elementInfo="elementInfo"></DashboardProgress> <DashboardProgress style="height: 100%;" v-if="elementInfo.option.progress.type === 'dashboard'" :elementInfo="elementInfo"></DashboardProgress>
</view> </view>
...@@ -34,13 +35,26 @@ import echartElementData from '@/mixins/echartElementData.js' ...@@ -34,13 +35,26 @@ import echartElementData from '@/mixins/echartElementData.js'
export default { export default {
name:"NormalProgress", name:"NormalProgress",
mixins: [echartElementData], mixins: [echartElementData],
data() {
return {
endVal: 30,
};
},
methods: { methods: {
initChart() {} initChart() {
const that = this
that.$nextTick(() => {
that.endVal = that.elementData.dataList.endVal
})
},
getRpx(value) {
return this.$u.common.pxToRpx(value)
}
} }
} }
</script> </script>
<style> <style lang="scss">
.container { .container {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -54,9 +68,4 @@ export default { ...@@ -54,9 +68,4 @@ export default {
.u-circle { .u-circle {
align-self: center; align-self: center;
} }
.u-progress-text {
font-size: 40rpx;
font-weight: bold;
color: white;
}
</style> </style>
\ No newline at end of file
...@@ -121,8 +121,8 @@ ...@@ -121,8 +121,8 @@
@include vue-flex; @include vue-flex;
justify-items: flex-end; justify-items: flex-end;
justify-content: space-around; justify-content: space-around;
font-size: 20rpx; // font-size: 20rpx;
color: #ffffff; // color: #ffffff;
transition: all 0.4s ease; transition: all 0.4s ease;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment