|
|
<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> |