微信小程序-多层饼图/包含关系饼图/自定义饼图关系模式

最新推荐文章于 2023-06-12 16:55:48 发布

大闸蛙

最新推荐文章于 2023-06-12 16:55:48 发布

阅读量5.1k

点赞数

分类专栏：小程序文章标签：微信小程序包含关系饼图

本文链接：https://blog.youkuaiyun.com/crabfrog/article/details/82768541

版权

本文介绍如何在微信小程序中创建多层饼图，展示包含关系，通过WXML、WXSS和JS代码实现自定义饼图关系模式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图如下

包含关系饼图

WXML

<view class='chart_wrapper'>
<view class='chart_wrapper'>
    <view class='chart_mark'>
      <view class='mark_item'>
        <view class='mark mark_color1'></view>
        <view>总课时量 24</view>
      </view>
      <view class='mark_item'>
        <view class='mark mark_color2'></view>
        <view>已上课时 12</view>
      </view>
      <view class='mark_item'>
        <view class='mark mark_color3'></view>
        <view>出勤 10</view>
      </view>
      <view class='mark_item'>
        <view class='mark mark_color4'></view>
        &