<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>
					<slider @changing="huakuai0_change" activeColor="#5ab6b8" block-color="#5ab6b8" block-size="18" backgroundColor="#5ab6b8" class="huakuai0"  max="99999" :value="rang0" >
			 
					</slider>
				</view>
				<view class="huakuai1"><slider @changing="huakuai1_change" block-size="18"  block-color="#5ab6b8" activeColor="#5ab6b8" backgroundColor="#5ab6b8" max="99999" :value="rang1"  /></view>
				
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import * as echarts from 'echarts';
	let rang0=ref(0);
	let rang1=ref(99999);
	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 option = {
	   xAxis: {
	     type: 'category',
	     boundaryGap: false,
	     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
		  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: [0,8, 12,7 ,33, 5,5],
	       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: 200rpx;
		width: 100% !important;
	}
	.huakuai_k{
	   position: relative;
	   width: 100%;
	   top:-120rpx;
	}
	.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>