小程序统计进度条及环形图

最新推荐文章于 2024-05-14 10:52:37 发布

茅十八围城—嘤嘤怪

最新推荐文章于 2024-05-14 10:52:37 发布

阅读量726

点赞数

分类专栏：小程序移动端文章标签：小程序

本文链接：https://blog.csdn.net/qq_41212752/article/details/107226905

版权

这篇博客详细介绍了如何在小程序中实现统计用的进度条和环形图，包括了wxml、wxss和js的相关代码实现。

摘要由CSDN通过智能技术生成

小程序统计进度条及环形图

在这里插入图片描述

wxml

<!--pages/statistical/statistical.wxml-->
<view>
	<view class="stater">
		<!-- 标题 -->
		<view class="sta_title">
			直播观看数据汇总
		</view>
		<view class="content-box">
			<block wx:for="{
    {resList}}" wx:key="index">
				<view class="progress-box">
					<view style="color:{
      {
      item.color}}" class="top-area"><text>{
  {item.name}}</text></view>
					<view class="bottom-area">
						<view class="progress-item">
							<view style="background:{
      {
      item.color}};width:{
      {
      (item.has/item.total)*100}}%;" class="progress-line">
								<view style="color:{
      {
      item.color}}" class="progress-val {
    {(item.has/item.total)*100>92?'text-over':''}}">{
  {item.hasLabel}}{
  {item.unit}}</view>
							</view>
						</view>
						<view style="color:{
      {
      item.color}}" class="total-box"><text>{
  {item.totalLabel}}{
  {item.unit}}</text></view>
					</view>
				</view>
			</block>
		</view>
		<view class="sta_title">
			区域数据分析
		</view>
		<view class="content-box">
			<scroll-view wx:if="{
    {classifyList.length}}" scroll-x="true" class="classify-box">
				<block wx:for="{
    {classifyList}}" wx:key="index" >
					<view bindtap="changeFilter" data-index="{
    {index}}" class="classify-item {
    {selectIndex==index?'active-item':''}}">
						<view style="background:{
      {
      item.bgColor}}" class="classify-inner">
							<text>{
  {item.name}}