Java学习之道

准备工作

uCharts源码地址：点击跳转

uniapp接入uCharts的下载地址：点击跳转

下载之后，打开项目，参考使用说明.md ：

• 将 qiun-data-charts(非uniCloud) /components下面所有的文件拷贝到自己的项目对应的components目录下；
• 将qiun-data-charts(非uniCloud) /components/static拷贝到自己项目的static目录下

使用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: "#ffffff", // 字体颜色
		lineHeight: 11, // 字体行高
		hiddenColor: "#CECECE", // 点击隐藏时图例标识及文字颜色
		itemGap: 15, // 各个分类（类别）之间的间隔
	},
	extra: {
		pie: {
			activeOpacity: 1, // 启用Tooltip点击时，突出部分的透明度
			activeRadius: 10, // 启用Tooltip点击时，突出部分的宽度（最大值不得超过labelWidth）
			offsetAngle: 0, // 起始角度偏移度数，顺时针方向，起点为3点钟位置为0度（比如要设置起点为12点钟位置，即逆时针偏移90度，传入-90即可）
			// customRadius: 0, // 自定义半径（一般不需要传值，饼图会自动计算半径，自定义半径可能会导致显示图表显示不全）
			labelWidth: 10, // 数据标签到饼图外圆连线的长度
			border: true, // 是否绘制各类别中间的分割线
			borderWidth: 1, // 分割线的宽度
			borderColor: "#FFFFFF", // 分割线的颜色
			linearType: "none", // 渐变类型，可选值："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>

<style lang="scss" scoped>

</style

---

标题：uni-app小程序图表接入，使用ucharts饼图示例
作者：mmzsblog
地址：https://www.mmzsblog.cn/articles/2025/03/06/1741192517180.html

如未加特殊说明，文章均为原创，转载必须注明出处。均采用CC BY-SA 4.0 协议！

本网站发布的内容（图片、视频和文字）以原创、转载和分享网络内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。若本站转载文章遗漏了原文链接，请及时告知，我们将做删除处理！文章观点不代表本网站立场，如需处理请联系首页客服。
• 网站转载须在文章起始位置标注作者及原文连接，否则保留追究法律责任的权利。
• 公众号转载请联系网站首页的微信号申请白名单！

---

个人微信公众号 ↓↓↓