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
}
]
}],
},