h5-elab-open-ownerUnion/components/charts/customBarChart.vue

<template>
	<view class="barContent">
		<view class="bar-list">
			<view class="bar-list-item" v-for="(item, index) in dataList" :key="index">
				<view class="left">
					{{item.left}}
				</view>
				<!--  :style="`backgroundImage: linear-gradient(${themeColor}, ${themeColor50})};`" -->
				<view class="mid">
					<view class="mid-line" v-if="isThemeColor" :style="`width: ${item.percent + '%'};`"></view>
					<view class="mid-line" v-else :style="`width: ${item.percent + '%'}`"></view>
				</view>
				<view class="right">
					{{item.right}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			isThemeColor: {
				type: Boolean,
				default: true
			},
			orginalList: Array
		},
		data() {
			return {
				dataList: [],
				themeColor: null,
				fuzhuColor: null,
				themeColor50: null,
				themeColor25: null,
				fuzhuColor50: null,
				fuzhuColor15: null
			}
		},
		mounted() {
			let globalData = getApp().globalData
			this.themeColor = globalData.themeColor
			this.themeColor50 = globalData.themeColor50
			this.themeColor25 = globalData.themeColor25
			this.fuzhuColor = globalData.fuzhuColor
			this.fuzhuColor50 = globalData.fuzhuColor50
			this.fuzhuColor15 = globalData.fuzhuColor15
		},
		methods: {
			reloadList() {
				if (this.orginalList.length > 0) {
					var tempList = JSON.parse(JSON.stringify(this.orginalList || []))
					tempList = tempList.sort((item1, item2) => {
						return item1.value - item2.value > 0
					})
					// debugger
					var maxValue = tempList[0].value
					tempList.forEach((item, index) => {
						item['percent'] = (item.value / maxValue * 100).toFixed(2)
					})
					this.dataList = tempList
					// // console.log('数据打印111111：', this.dataList)
				}
			}
		},
		watch: {
			orginalList: {
				handler(e) {
					this.reloadList()
				}
			},
			immediate: true
		}
	}
</script>

<style scoped lang="scss">
	.barContent {
		width: 100%;

		.bar-list {
			width: 100%;

			.bar-list-item {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				font-size: 14rpx;
				font-family: Verdana;
				white-space: nowrap;
				height: 60rpx;
				// line-height: 60rpx;
				padding: 0 20rpx 0 52rpx;
				box-sizing: border-box;
				min-height: 60rpx;

				.left {
					color: #393939;
					width: 25%;
					align-self: center;
				}

				.right {
					color: #3CD9D9;
					width: 20%;
					text-align: right;
					align-self: center;
				}

				.mid {
					margin-top: -10rpx;
					width: 50%;
					position: relative;
					align-self: center;

					.mid-line {
						position: absolute;
						background-color: #DD524D;
						height: 12rpx;
						border-radius: 6rpx;
						top: 0;
					}
				}

			}
		}
	}
</style>