uni-app 用于开发H5项目展示饼图，使用ucharts 饼图示例

先下载ucharts H5示例源码：

uCharts: 高性能跨平台图表库，支持H5、APP、小程序（微信小程序、支付宝小程序、钉钉小程序、百度小程序、头条小程序、QQ小程序、快手小程序、360小程序）、Vue、Taro等更多支持canvas的框架平台，支持饼图、圆环图、线图、柱状图、山峰图、区域图、雷达图、圆弧进度图、仪表盘、K线图、条状图、混合图、玫瑰图、漏斗图、词云图、时序图、散点图、气泡图、地图等常见图表。 - Gitee.com

下载之后，打开项目，将下面所有的文件拷贝到【自己的项目】对应目录

 使用ucharts画表

<template>
  <view style="width: 100%; height: 100%">
    <qiun-data-charts type="pie" :opts="opts" :chartData="chartData" />
  </view>
</template>
<script>
export default {
  data() {
    return {
      chartData: {},
      opts: {
        color: ["#a743ea", "#eb9327", "#eadb36", "#0cd689"],
        fontColor: "#c5ddf5", // 全局默认字体颜色，16进制颜色格式
        padding: [5, 5, 5, 5],
        rotate: false, //横屏模式
        animation: true, // 是否动画展示图表
        dataLabel: true, // 是否显示图表区域内数据点上方的数据文案
        legend: {
          show: true,
          position: "bottom", //图例相对画布的显示位置，可选值：'bottom','top','left','right'
          float: "center", // 图例位置对齐方向，可选值：'center','left','right','top','bottom'
          padding: 5, //图例内填充边距
          margin: 5, // 图例外侧填充边距
          backgroundColor: "rgba(0,0,0,0)", // 图例背景颜色
          borderColor: "rgba(0,0,0,0)", // 图例边框颜色
          borderWidth: 0, // 图例边框线宽
          fontSize: 13, // 字体大小
          fontColor: "#c5ddf5", // 字体颜色
          lineHeight: 11, // 字体行高
          hiddenColor: "#CECECE", // 点击隐藏时图例标识及文字颜色
          itemGap: 15, // 各个分类（类别）之间的间隔
        },
        extra: {
          pie: {
            activeOpacity: 0.5, // 启用Tooltip点击时，突出部分的透明度
            activeRadius: 10, // 启用Tooltip点击时，突出部分的宽度（最大值不得超过labelWidth）
            offsetAngle: 0, // 起始角度偏移度数，顺时针方向，起点为3点钟位置为0度（比如要设置起点为12点钟位置，即逆时针偏移90度，传入-90即可）
            // customRadius: 0, // 自定义半径（一般不需要传值，饼图会自动计算半径，自定义半径可能会导致显示图表显示不全）
            labelWidth: 10, // 数据标签到饼图外圆连线的长度
            border: true, // 是否绘制各类别中间的分割线
            borderWidth: 3, // 分割线的宽度
            borderColor: "#0879be", // 分割线的颜色
            linearType: "custom", // 渐变类型，可选值："none"关闭渐变,"custom"开启渐变
            // customColor: [], //自定义渐变颜色，数组类型对应series的数组长度以匹配不同series颜色的不同配色方案，例如["#FA7D8D", "#EB88E2"]
          },
        },
      },
    };
  },
  props: {
    pieData: {
      type: Array,
      default: () => [
        {
          name: "数量1",
          value: 23,
        },
        {
          name: "数量2",
          value: 20,
        },
        {
          name: "数量3",
          value: 29,
        },
        {
          name: "数量4",
          value: 10,
        },
      ],
    },
  },
  watch: {
    pieData: {
      handler() {
        this.setChartData();
      },
      immediate: true,
    },
  },
  methods: {
    // 设置数据 渲染图表
    setChartData() {
      this.chartData = {
        series: [
          {
            data: this.pieData,
          },
        ],
      };
    },
  },
};
</script>

使用echart画表：饼图

<template>
  <view class="charts-box">
    <view class="chart-title">费趋势</view>
    <qiun-data-charts :chartData="chartDataPie" :echartsH5="true" :echartsApp="true"
                      background="none" :eopts="eopts" />

  </view>
</template>

<script>
export default {
  data() {
    return {
      chartData: {},
      // opts:opts uCharts配置
      eopts: {
        color: ["#3287f7", "#ffb87c", "#7cdeb9", "#f26f84", "#6fccf0", "#a16af0"],
        legend: {
          show: false
        }
      },
      chartDataPie: {
        "series": [{
          'type': 'pie',
          radius: '55%',
          label: {
            normal: {
              formatter: "{b}:\n{c}\n{d}%", //百分比之后换行显示文字
              color: '#555'
            },
            color: '#555'
          },
          data: [{"name":"生产部1","value":50},{"name":"生产部2","value":30},{"name":"生产部3","value":20},{"name":"生产部4","value":18},{"name":"生产部5","value":8}]
        }]
      },}
  },
  onReady() {
    // this.getServerData();
  },
  methods: {
    getServerData() {
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
          categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
          series: [
            {
              name: "实值",
              data: [35, 36, 31, 33, 13, 34]
            }
          ]
        };
        this.chartData = JSON.parse(JSON.stringify(res));
      }, 500);
    },
  }
};
</script>

<style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
  width: 100%;
  height: 300px;
  border-radius: 10px;
  border: 1rpx solid black;
  padding: 15rpx;
  background-color: #fff;
}
.chartsview{
  /*border-radius: 15rpx;*/
  /*background-color: #fff;*/
}

.chart-title {
  text-align: center;
  background-color: #bfc;
}
</style>