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

大闸蛙

于 2018-09-19 10:36:48 发布

阅读量5.2k

点赞数

CC 4.0 BY-SA版权

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

本文链接：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>
        <view>缺勤 2</view>
      </view>
    </view>
     <canvas class='Canvas' canvas-id="Canvas0"></canvas&g