微信小程序使用wx-charts的圆环图添加突出部分

最新推荐文章于 2022-04-26 19:22:11 发布

Hero in need

最新推荐文章于 2022-04-26 19:22:11 发布

阅读量681

点赞数

分类专栏：微信小程序问题文章标签： canvas 小程序

本文链接：https://blog.csdn.net/qq_43318935/article/details/118903479

版权

本文介绍了如何在微信小程序中使用wx-charts库创建圆环图，并通过canvas技术添加突出部分。通过下载wxcharts.js，导入到小程序中，结合canvas的arc方法调整角度和方向来实现所需效果。同时提到了可能通过opts.extra.ringWidth调整环图区域宽度作为另一种实现策略。

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

微信小程序使用wx-charts的圆环图添加突出部分

效果图
在这里插入图片描述

因为文档内容有限，没有找到直接的方法，于是我决定采取canvas嵌套一个canvas的方法来突出

    <canvas canvas-id="arcCanvas" style="height:220px;width:220px;transform-origin: center center; " >
      <canvas id="myCanvas" canvas-id="myCanvas" style="height:220px;width:220px"></canvas>
    </canvas>

首先去实现一个圆环图的canvas，在(githup地址）上面下载wxcharts.js然后使用const wxCharts = require(’…/…/utils/wxcharts.js’);（路径看自己的）

    new wxCharts({
      animation: true,
      canvasId: 'myCanvas',
      type: 'ring',
      extra: {
        ringWidth: 30,
        pie: {
          offsetAngle: