一个页面有四个图表,当一屏最多渲染两个,前两个如果不滚动页面时图表没有问题,一旦滚动页面,前两个图表的点击会失灵,只有在滚动到原来的位置点击才有效果```javascript
<template>
<scroll-view style="height: 100vh;background-color: #f7f8f9;" ref="scrollBox" scroll-y @scrolltolower="handleScroll" lower-threshold="200">
<view class="sticky-box">
<view class="sticky">
<!-- 页面头部 -->
<as-title text="首页" bgColor="#000" color="#333333"></as-title>
<image class="as-bg-img" src="https://pdsscjdglj.otcps.cn/img/bg.png" mode="aspectFill" />
</view>
</view>
<view style="height: 170upx;"></view>
<!-- <view class="flex justify-between padding">
<view>账号:{{username}}</view>
<view click="ToWarn" @click="quit">退出登录<span class="cuIcon-right"></span></view>
</view> -->
<view class="bg-white" v-show="hasRole(['Admin'])" style="z-index: 9999999999999999999999;">
<!-- 头部数据 -->
<view class="text-df justify-between flex padding-lg ">
<view class=" text-bold text-xl" @click="changeParentValue('unit')">单位列表></view>
<view class="justify-around flex align-center">监督单位<span class="text-xxl margin-left-xs text-bold">{{empTotal}}</span></view>
</view>
<!-- 图表 -->
<qiun-data-charts type="ring" :opts="opts" :chartData="chartData"
@getIndex="(e)=>handleChartClick(e,'unit')" ref="chart"
v-if="chartData.series[0].data.length>0" canvas2d
background="none" :ontouch="true"
canvasId="SAJWHSkQEUxomFPMtSdrDViZMlmDBTJ2" />
</view>
<view style="height: 40upx;" v-show="hasRole(['Admin'])"></view>
<view class="bg-white" v-show="hasRole(['Admin'])" style="z-index: 9999999999999999999999;">
<!-- 头部数据 -->
<view class="text-df justify-between flex padding-lg ">
<view class=" text-bold text-xl " @click="changeParentValue('earlyWarning')">预警列表></view>
<view class="justify-around flex align-center">累计预警(次)<span class="text-xxl margin-left-xs text-bold">{{warnCount}}</span></view>
</view>
<!-- 图表 -->
<qiun-data-charts type="ring" :opts="opts" :chartData="chartData1"
@getIndex="(e)=>handleChartClick(e,'earlyWarning')" ref="chart"
v-if="chartData1.series[0].data.length>0" :canvas2d="true"
canvasId="SAJWHSkQEUxomFPMtSdrDViZMlmDBTJ3" />
</view>
<view style="height: 40upx;" v-show="hasRole(['Admin'])"></view>
<view class="bg-white" v-show="hasRole(['Admin'])" style="z-index: 9999999999999999999999;">
<!-- 头部数据 -->
<view class="text-df justify-between flex padding-lg ">
<view class=" text-bold text-xl " @click="changeParentValue('patrol')">巡查列表></view>
<view class="justify-around flex align-center">今日巡察单位(家)<span class="text-xxl margin-left-xs text-bold">{{todayPatrolCount}}</span></view>
</view>
<!-- 图表 -->
<qiun-data-charts type="ring" :opts="opts" :chartData="chartData2"
@getIndex="(e)=>handleChartClick(e,'patrol')" ref="chart"
v-if="chartData2.series[0].data.length>0" :canvas2d="true"
canvasId="SAJWHSkQEUxomFPMtSdrDViZMlmDBTJ4" />
</view>
<view style="height: 40upx;" v-show="hasRole(['Admin'])"></view>
<view class="bg-white" v-show="hasRole(['Admin'])" style="z-index: 9999999999999999999999;">
<!-- 头部数据 -->
<view class="text-df justify-between flex padding-lg ">
<view class=" text-bold text-xl "></view>
<view class="justify-around flex align-center">今日预警(次)<span class="text-xxl margin-left-xs text-bold">{{todayWarnCount}}</span></view>
</view>
<!-- 图表 -->
<qiun-data-charts type="ring" :opts="opts" :chartData="chartData3"
@getIndex="(e)=>handleChartClick(e,'earlyWarning',true)" ref="chart"
v-if="chartData3.series[0].data.length>0" :canvas2d="true"
canvasId="SAJWHSkQEUxomFPMtSdrDViZMlmDBTJ5" />
</view>
<view style="height: 170upx;" v-show="hasRole(['Admin'])"></view>
<view class=" text-df flex justify-between align-center bg-white padding" v-show="hasRole(['firmAdmin'])">
<view class="text-bold">
今日预警
<span class="cuIcon-refresh" style="margin-left: 5px;" @click="refreshLisk"></span>
</view>
<uv-picker ref="picker" :columns="[selectList.map((i)=>i.key)]" @confirm="confirm"></uv-picker>
<view @click="this.$refs.picker.open()" class="flex align-center" v-show="hasRole(['firmAdmin'])">
{{selectedValue}}
<span class="cuIcon-triangledownfill" style="font-size: 50upx;" />
</view>
</view>
<!-- 列表 -->
<view v-for="item in list" class="as-bigCar" :key="item" v-show="hasRole(['firmAdmin'])">
<view class="flex-sub flex flex-direction radius">
<view class=" text-df text-bold ">{{item.enterpriseName || '名字丢失'}}</view>
<view class="text-sm text-gray margin-tb-sm">
地址:{{item.addressProvinceName || ''}}-{{item.addressMunicipalityName || ''}}-{{item.addressCountyName || ''}}
</view>
<view class="flex">
<view class="text-sm as-tag bg-blue">{{item.addressCountyName}}</view>
<view class="text-sm as-tag bg-blue">{{item.enterpriseTypeName || ''}}</view>
<view class="text-sm as-tag" v-if="item.riskLevelName"
:style="{color:'#fff',backgroundColor:item.colourGrade? item.colourGrade:'#007ffc'}">
{{item.riskLevelName}}
</view>
</view>
</view>
</view>
<as-myLoading :show="isLoad" text="加载中..." v-show="hasRole(['firmAdmin'])"></as-myLoading>
<view v-if="noImageShow && list.length>0 && hasRole(['firmAdmin'])" class="text-lg text-center" style="color: #7d7d7d;margin-top: 20upx;">-没有更多数据了-</view>
<image v-if="noImageShow && list.length<1 && hasRole(['firmAdmin'])" src="https://pdsscjdglj.otcps.cn/img/noDate.png"
style="height: 250upx;margin-top: 50%;margin-left: 50% ;transform: translate(-50%,-50%);" mode="heightFix"></image>
<view v-if="noImageShow && list.length<1 && hasRole(['firmAdmin'])" class="text-lg text-center" style="color: #7d7d7d;margin-top: -100upx;">-没有更多数据了-</view>
<view class="cu-tabbar-height"></view>
</scroll-view>
</template>
1 个回复
DCloud_UNI_JBB
这个问题可以反馈到 ucharts 社区