uniapp 如何实现环行图和饼图插件

在uniapp中如何实现环形图和饼图的展示？有没有推荐的插件或组件可以使用？希望能在H5和小程序端都能兼容，最好能支持自定义颜色、数据标签和交互效果。如果有具体的代码示例或配置教程就更好了！

2 回复

在uni-app中实现环形图和饼图，推荐使用uCharts或ECharts插件：

  1. uCharts：轻量级，支持多端
// 安装后引入即可使用
import uCharts from '@/components/u-charts/u-charts.min.js'
  1. ECharts：功能强大
// 需引入echarts和对应渲染器
import * as echarts from 'echarts'

两者都支持配置环形图（通过设置radius范围）和饼图，可根据项目需求选择。


在 UniApp 中实现环形图和饼图，推荐使用第三方图表库 uCharts 或 ECharts，它们兼容小程序和 H5，配置简单且功能丰富。以下是基于 uCharts 的实现方法（代码更轻量）：

步骤 1：安装 uCharts

  1. 访问 uCharts 官网 下载组件包。
  2. 将 ucharts.js 和 qiun-data-charts 组件复制到 UniApp 项目的 /components 目录。

步骤 2：配置图表组件

在页面中引入组件并配置数据：

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

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

步骤 3：环形图配置

通过 opts 属性调整环形图样式：

export default {
  data() {
    return {
      chartData: {...}, // 数据同上
      opts: {
        extra: {
          pie: {
            innerRadius: "50%", // 设为50%即为环形图
            labelWidth: 15
          }
        }
      }
    };
  }
};

模板中传递 opts：

<qiun-data-charts type="pie" :opts="opts" :chartData="chartData" />

关键点说明：

  1. 类型切换：type="pie" 固定为饼图/环形图。
  2. 环形图：通过 innerRadius 控制内半径比例（0%~100%）。
  3. 自适应：组件默认支持屏幕旋转和尺寸自适应。

替代方案：ECharts

若需更复杂交互，可使用 ECharts：

  1. 安装 mpvue-echarts 或 uni-ec-canvas。
  2. 通过 option 配置标准 ECharts 饼图。

注意事项：

  • 在 pages.json 中注册组件（uCharts 需全局注册）。
  • H5 端需确保 Canvas 支持，测试真机兼容性。

以上代码可实现基础环形图/饼图，详细配置参考 uCharts 文档的 pie 类型章节。

回到顶部