uniapp微信小程序————秋云圆环图

一、需要的效果

 

二、代码

1、模板上

<view class="charts-box1">
<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
</view>

2、数据代码

a、opts

        	opts: {
					// 横屏模式
					rotate: false,
					// 横屏锁定
					rotateLock: false,
					color: ["#1BB9A3", "#F8BA43", "#FC8888", "#538FF8"],
					// padding: [0, 0, 0, 0],
					// 是否显示圆环上的解释
					dataLabel: true,
					enableScroll: false,
					legend: {
						// 是否显示右侧图例
						show: false,
						position: "",
						lineHeight: 25,
					},
					title: {
						name: "",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						name: "",
						fontSize: 25,
						color: "#7cb5ec"
					},
					extra: {
						ring: {
							// 饼的宽度
							ringWidth: 40,
							activeOpacity: 0.5,
							activeRadius: 10,
							// 颜色的角度
							offsetAngle: 18,
							labelWidth: 15,
							// 是否绘制圆环中间的的隔线
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				}

b、模拟后端的数据

	mounted() {

			this.getServerData();
		},

     methods：{
		     getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res1 = {
						series: [{
							data: [{
								"name": "一班",
								"value": 40,
								"labelText": "60岁-70岁"
							}, {
								"name": "二班",
								"value": 35,
								"labelText": "70岁-80岁"
							}, {
								"name": "三班",
								"value": 10,
								"labelText": "80岁-90岁"
							}, {
								"name": "四班",
								"value": 15,
								"labelText": "50岁-60岁"
							}]
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res1));
				}, 1000);
			}

          }

备注：首先下载秋云插件,再贴上面的代码就行，还有上面百分比是自己写完定位在上面的比较繁琐，还有opts里面的值也备注了意思，秋云那个官网有调试工具，一块钱试用一天，一个账号只有一次机会，最后这是第一个圆环图的代码。

三、 秋云官网地址：uCharts官网 - 秋云uCharts跨平台图表库

 红圈那个组件工具，直接可以线上调试很方便