uniapp如何绘制环形图表

在uniapp中如何实现环形图表的绘制？目前需要在一个项目中展示数据占比，想用环形图来直观显示。尝试过使用ucharts，但不太清楚具体怎么配置成环形效果。请问有没有完整的示例代码或者推荐其他适合uniapp的图表库？最好能支持自定义颜色和动画效果。

2 回复

使用uni-app绘制环形图表，推荐使用ucharts或echarts插件。ucharts轻量且兼容性好，echarts功能强大但体积较大。安装后配置数据即可生成环形图，支持自定义颜色和动画效果。


在 UniApp 中绘制环形图表，推荐使用第三方图表库 uCharts，它轻量且兼容性好。以下是实现步骤和示例代码：

步骤 1：安装 uCharts

步骤 2：引入组件

在页面 JSON 文件中配置：

{
  "usingComponents": {
    "qiun-data-charts": "[@qiun](/user/qiun)/ucharts/components/qiun-data-charts/qiun-data-charts"
  }
}

步骤 3：编写模板和逻辑

  • 模板部分（WXML）：

    <view class="chart-container">
  <qiun-data-charts type="ring" :chartData="chartData" />
</view>

  • 逻辑部分（Vue Script）：

    export default {
  data() {
    return {
      chartData: {
        series: [{
          data: [
            { name: "类别A", value: 50 },
            { name: "类别B", value: 30 },
            { name: "类别C", value: 20 }
          ]
        }]
      }
    };
  },
  onReady() {
    // 可在此动态更新数据
  }
};

步骤 4：样式调整（可选）

在 CSS 中设置容器尺寸：

.chart-container {
  width: 100%;
  height: 300px;
}

注意事项：

  1. 确保 ucharts 文件路径正确，若使用 npm 需在微信开发者工具中构建。
  2. 支持动态更新数据，调用 this.chartData.series[0].data = newData 即可刷新。
  3. 更多配置（如颜色、图例）参考 uCharts 文档。

替代方案：

如需更简单实现，可用 CSS + Canvas 手动绘制，但 uCharts 节省开发时间，功能丰富。

回到顶部