hainan_2024_zhenghe/h5/common/PriceRange.vue

<template>
	<view>
		<view>
			 
			<view class="chart_wrapper" id="line"></view>
			<view class="huakuai_k">
				<view class="huakuai_value">
					<view>￥{{rang0}}</view>
					<view>￥{{rang1}}</view>
				</view>
				<view class="slider-container">
					<slider @change="huakuai0SendValue" @changing="huakuai0_change" activeColor="#5ab6b8" block-color="#5ab6b8" block-size="18" backgroundColor="#5ab6b8" class="huakuai0" :step="step"  :max="rangMax" :value="rang0" />
 
				</view>
				<view class="huakuai1">
					<slider @change="huakuai1SendValue" @changing="huakuai1_change" block-size="18"  block-color="#5ab6b8" activeColor="#5ab6b8" backgroundColor="#5ab6b8" :step="step"  :max="rangMax" :value="rang1"  />
					</view>
				
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,defineEmits,watch 
	} from 'vue'
	import * as echarts from 'echarts';
	const props = defineProps({
	  dataInfo: {
	    type: Object,
	    required: true
	  } ,
	  rangDate: {
	    type: Array,
	    required: true
	  },
	  step: {
	    type: Number,
	    required: true
	  }, 
	  rangMax: {
	    type: Number,
	    required: true
	  }
	  })
	 let rang0=ref(0);
	 let rang1=ref(0);
	 let rangMax=ref(0);
	 rangMax.value=Number(props.rangMax);
	 rang0.value=Number(props.rangDate[0])
	 rang1.value=Number(props.rangDate[1])
 watch(() => props.rangDate, (newrangDate) => {
	 console.log(props.rangDate);
   rang0.value=newrangDate[0]
   rang1.value=newrangDate[1]
     
       
 }, { immediate: false });
	
 
	
	const emit = defineEmits(['huakuaiValue']);
	const  huakuai0SendValue=(e)=> { 
		rang0.value= rang0.value=e.detail.value
		if(rang0.value>rang1.value){
					 let temp=0
					 temp=rang0.value
					 rang0.value=rang1.value
					 rang1.value=temp
		}
		
		 
		
	  emit('huakuaiValue', [rang0.value,rang1.value]);
	}
	const  huakuai1SendValue=(e)=>{
		rang1.value= rang1.value=e.detail.value
		if(rang0.value>rang1.value){
					 let temp=0
					 temp=rang0.value
					 rang0.value=rang1.value
					 rang1.value=temp
		}
	  emit('huakuaiValue', [rang0.value,rang1.value]);
	  
	}
	onMounted(() => {
		drawChart()
		 
	})
	const huakuai0_change=(e)=>{
		 rang0.value=e.detail.value
		 if(rang0.value>rang1.value){
			 let temp=0
			 temp=rang0.value
			 rang0.value=rang1.value
			 rang1.value=temp
		 }
	}
	const huakuai1_change=(e)=>{
		 rang1.value=e.detail.value
		 if(rang0.value>rang1.value){
		 	let temp=0
		 	temp=rang0.value
		 	rang0.value=rang1.value
		 	rang1.value=temp
		 }
	}
	const drawChart = () => {
		let chartDom = document.getElementById('line');
		let myChart = echarts.init(chartDom);
		let xdata=[];
		let ydata=[];
		 props.dataInfo.forEach((v,i)=>{
			 xdata.push(v.i)
			 ydata.push(v.count)
		 })
	 let option = {
		  grid: {
		     left: '10%',
		     right: '10%',
		     top: '0%',
		     bottom: '0%',
		     containLabel: true
		   },
	   xAxis: {
	     type: 'category',
	     boundaryGap: false,
	     data:xdata,
		  axisLine: { show: false }, // 隐藏X轴线
		     axisTick: { show: false }, // 隐藏X轴刻度
		     axisLabel: { show: false } // 隐藏X轴标签
	   },
	   yAxis: {
	     type: 'value',
		  axisLine: { show: false }, // 隐藏Y轴线
		     axisTick: { show: false }, // 隐藏Y轴刻度
		     axisLabel: { show: false } ,// 隐藏Y轴标签
			  splitLine: { show: false } // 隐藏Y轴的分割线
	   },
	   series: [
	     {
	       data: ydata,
	       type: 'line',
		   lineStyle: {
		         width: 0 ,// 隐藏线条，设置线条宽度为0
				 },
		    smooth: true, // 这里设置线条平滑
		 	symbol: 'none', // 隐藏所有数据点的标记符号
	       areaStyle: {
			    color: {
					colorStops: [{
					            offset: 0, color: '#e5f5f6' // 区域顶部颜色，半透明红色
					        }, {
					            offset: 1, color: '#e5f5f6' // 区域底部颜色，更浅的半透明红色
					        }]
				}
			   
		   }
	     }
	   ]
	 };
		option && myChart.setOption(option);
	}
</script>

<style scoped>
	.chart_wrapper{
		height: 100rpx;
		width: 100% !important;
		/* border:1px solid #ccc; */
	}
	.huakuai_k{
	   position: relative;
	   width: 100%;
	   top:-40rpx;
	}
	.huakuai0{
		position: relative;
	 
	}
	.huakuai1{
		position: relative;
		width: 100%;
		top:-54rpx;
	}
	.huakuai_value{
		position: absolute;
		display: flex;
		width: calc(100% - 40rpx);
		justify-content: space-between;
		top: -40rpx;
		padding: 0rpx 20rpx 0rpx 20rpx;
		font-size:26rpx;
		color:#5ab6b8;
	}
 
 
 
	 
</style>
<style>
	 
</style>