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>