uniapp圆环图如何实现

在uniapp中如何实现圆环图的绘制？有没有现成的组件或插件可以直接使用？如果需要自己实现，应该采用canvas还是其他方案？希望能提供一个具体的代码示例或实现思路。

2 回复

使用ECharts或uCharts插件实现。在uniapp中引入插件，配置options，设置type为pie，调整radius形成圆环。示例代码：

options: {
  series: [{
    type: 'pie',
    radius: ['50%', '70%'],
    data: [...]
  }]
}

在 UniApp 中实现圆环图，可以使用第三方图表库 uCharts 或 ECharts。以下是使用 uCharts 的简单示例，因为它轻量且对 UniApp 友好。

步骤 1：安装 uCharts

步骤 2：引入组件

在页面的 vue 文件中配置：

<template>
  <view>
    <qiun-data-charts type="ring" :chartData="chartData" />
  </view>
</template>

<script>
import qiunDataCharts from "[@qiun](/user/qiun)/ucharts/components/qiun-data-charts/qiun-data-charts.vue";

export default {
  components: { qiunDataCharts },
  data() {
    return {
      chartData: {
        series: [
          {
            data: [
              { name: "类别A", value: 50 },
              { name: "类别B", value: 30 },
              { name: "类别C", value: 20 }
            ]
          }
        ]
      }
    };
  }
};
</script>

<style>
/* 确保图表容器有尺寸 */
.qiun-charts {
  width: 100%;
  height: 300px;
}
</style>

关键点说明：

  • type=“ring”：指定图表类型为圆环图。
  • series.data：数据数组，value 决定各部分的占比。
  • 样式需设置宽度和高度，否则图表无法显示。

自定义圆环样式（可选）：

在 chartData 中添加 extra 配置：

chartData: {
  series: [...],
  extra: {
    ring: {
      radius: 80,    // 外半径
      innerRadius: 60, // 内半径，控制环宽
      activeRadius: 10 // 点击时的放大半径
    }
  }
}

注意事项：

  • 确保 uCharts 组件正确导入，路径根据实际位置调整。
  • 如果数据动态更新，直接修改 chartData 并确保引用变化以触发重新渲染。

使用 ECharts 也可实现，但 uCharts 更轻量，适合 UniApp 的跨端需求。如有复杂交互，可参考官方文档进一步配置。

回到顶部