uniapp 如何实现环形图绘制

在uniapp中怎么绘制环形图？我尝试过使用echarts和uCharts，但发现配置比较复杂，而且在小程序端兼容性不太好。有没有更简单的方法或者现成的组件可以直接使用？最好是能支持动态数据更新和自定义颜色样式的方案。

2 回复

在uniapp中，可使用canvas绘制环形图。步骤如下：

  1. 创建canvas组件
  2. 获取canvas上下文
  3. 绘制底层圆环
  4. 绘制进度圆环
  5. 添加动画效果（可选）

示例代码：

const ctx = uni.createCanvasContext('myCanvas')
ctx.arc(100, 100, 80, 0, 2 * Math.PI)
ctx.setStrokeStyle('#eee')
ctx.stroke()

ctx.arc(100, 100, 80, -Math.PI/2, Math.PI*1.5)
ctx.setStrokeStyle('#007AFF')
ctx.stroke()
ctx.draw()

也可使用echarts或uCharts等第三方图表库更简单实现。


在 UniApp 中实现环形图可以通过以下两种方式实现，推荐使用 ECharts 或 Canvas 绘制，具体方法如下：

1. 使用 ECharts（推荐，简单高效）

  • 步骤：

    1. 安装 mpvue-echarts 插件（UniApp 中已内置支持）。
    2. 在页面中引入 ECharts 并配置环形图选项。

  • 示例代码：

    <template>
  <view>
    <ec-canvas id="ring-chart" canvas-id="ringChart" :ec="ec"></ec-canvas>
  </view>
</template>

<script>
import * as echarts from '@/components/echarts/echarts.min.js'; // 引入 ECharts

export default {
  data() {
    return {
      ec: {
        onInit: this.initChart // 初始化图表
      }
    };
  },
  methods: {
    initChart(canvas, width, height) {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      canvas.setChart(chart);

      // 环形图配置
      const option = {
        series: [{
          type: 'pie',
          radius: ['50%', '70%'], // 内半径和外半径，形成环形
          data: [
            { value: 40, name: '数据1' },
            { value: 60, name: '数据2' }
          ],
          label: { show: true }
        }]
      };
      chart.setOption(option);
      return chart;
    }
  }
};
</script>

2. 使用 Canvas 原生绘制（灵活但复杂）

  • 步骤：

    1. 在页面中添加 <canvas> 标签。
    2. 通过 JavaScript 计算环形路径并绘制。

  • 示例代码：

    <template>
  <view>
    <canvas canvas-id="ringCanvas" style="width:300px;height:300px;"></canvas>
  </view>
</template>

<script>
export default {
  onReady() {
    this.drawRing();
  },
  methods: {
    drawRing() {
      const ctx = uni.createCanvasContext('ringCanvas');
      const data = [30, 70]; // 数据比例
      const colors = ['#FF6B6B', '#4ECDC4'];
      let startAngle = 0;

      data.forEach((value, index) => {
        const angle = (value / 100) * 2 * Math.PI;
        // 绘制扇形
        ctx.beginPath();
        ctx.arc(150, 150, 80, startAngle, startAngle + angle, false);
        ctx.lineTo(150, 150);
        ctx.setFillStyle(colors[index]);
        ctx.fill();
        startAngle += angle;
      });

      // 中间挖空形成环形
      ctx.beginPath();
      ctx.arc(150, 150, 50, 0, 2 * Math.PI);
      ctx.setFillStyle('#FFFFFF');
      ctx.fill();

      ctx.draw();
    }
  }
};
</script>

注意事项：

  • ECharts 方式：功能丰富，支持交互和动画，但需引入库（约 500KB）。
  • Canvas 方式：代码量少，无依赖，但需手动处理细节（如标签、响应式）。
  • 测试时需在真机或模拟器中运行，部分 H5 浏览器可能需调整 Canvas 尺寸。

根据需求选择合适的方法，一般推荐 ECharts 以实现更专业的图表效果。

回到顶部