uniapp 用DIV+CSS实现 echarts柱状图 组件

<template>
	<view class="bar_box flex-col row-between" :style="{color:'#B7B7B7'}">
		<view class="bar_content">
			<view class="bar_items">
				<view class="item" v-for="(item,index) in maxmun" :key="index" @tap="activei=index">
					<view style="position: absolute;top: 0;left: 0;width: 100%;text-align: center;" :style="{'color':activei!=index?'#B7B7B7':activeColor}">{{item.date}}</view>
					<view class="bar_item" :style="{'background-color':activei!=index?themeColor:activeColor,height:show?item.value+'px':'0px'}">
						<view :style="{'color':activeColor}" class="bar_label" v-if="activei==index&&show">
							<u-count-to :start-val="0" :end-val="datas[index].value" :decimals="1" font-size="24" duration="1000" :color="activeColor"></u-count-to>
                            
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bar_title_box flex row-between">
			<view class="bar_title">{{title}}</view>
			<view class="bar_unit">{{unit}}</view>
		</view>
	</view>
</template>

<script>
	let timer=''
	export default {
		props:{
			title:{
				type:String,
				default:'bar'
			},
			unit:{
				type:String,
				default:'(mmol/L)'
			},
			themeColor:{
				type:String,
				default:'#f4f4f4'
			},
			activeColor:{
				type:String,
				default:'rgba(92, 147, 255, 1)'
			},
			activeIndex:{
				type:Number,
				default:0
			},
			datas:{
				type:Array,
				default:[]
			}
		},
		computed:{
				maxmun(){
					let max=Math.max(...this.datas.map(item=>item.value))
					return this.datas.map(item =>({
						value:Math.ceil((item.value/max*120)),
						date:item.date
					}))
				}
		},
		mounted() {
			clearTimeout(timer)
			timer=setTimeout(()=>{
				this.show=true
			},500)
		},
		data() {
			return {
				activei:this.activeIndex,
				show:false
			};
		}
	}
</script>

<style lang="scss" scoped>
	.bar_box{width: 100%;min-height: 150px;background-color: #FFFFFF;}
	.bar_content{flex: 1;padding: 10px;} 
	.bar_items{width: 100%;min-height: 140px;display: flex;align-items: flex-end;overflow: scroll;position: relative;}
	.item{display: flex;align-items: flex-end;min-height: 160px;;overflow: scroll;position: relative;flex-shrink: 0;}
	.bar_item{width: 24px;margin-right:8px;margin-left: 8px;border-radius: 2px;position: relative;transition: height 0.5s ease;}
	.bar_label{position: absolute;top: -15px;font-size: 12px;display: flex;justify-content: center;width: 100%;}
</style>

u-count-to这个标签是用的uview的组件 可以直接改成div

<u-count-to :start-val="0" :end-val="datas[index].value" :decimals="1" font-size="24" duration="1000" :color="activeColor"></u-count-to> 改成 <div :style="{'color':activeColor}">{{datas[index].value||0}}</div>