uniapp微信小程序开发中使用图表

环形图

代码

html

<qiun-data-charts :opts="opts" type="ring" :chartData="chartData" background="none" />

data

opts: {
					"color": ['#FA8C15', '#1A90FE', '#2F54EA', '#52C41B'],
					"legend": {
						"show": false,
						"position": "right",
						"lineHeight": 25,
					},
					"title": {
						"name": 940,
						"fontSize": 48 / 2,
						"color": "#323567"
					},
					"subtitle": {
						"name": '总计 (辆)',
						"fontSize": 25 / 2,
						"color": "#9B9CB4"
					},
					"extra": {
						"ring": {
							"ringWidth": 30,
							"activeOpacity": 0.5,
							"activeRadius": 10,
							"offsetAngle": 0,
							"labelWidth": 15,
							"border": true,
							"borderWidth": 3,
							"borderColor": "#FFFFFF"
						},
					},
				},
				chartData: {
					categories: [],
					"series": [{
						"data": [{
								"name": "入场",
								"value": 50
							},
							{
								"name": "装车完成",
								"value": 30
							},
							{
								"name": "入场2",
								"value": 20
							},
							{
								"name": "一次性称重",
								"value": 18
							}
						]
					}],
				},
				

文档地址

文档地址