uniapp开发微信小程序 Ucharts 堆叠条状图
html
<qiun-data-charts type="bar" :opts="optsLine" :chartData="chartDataLine" />
data
optsLine: {
'legendShape': 'circle',
dataLabel: false,
xAxis: {
max: 70,
disabled: true,
disableGrid: true,
},
yAxis: {
"disabled": true,
"disableGrid": false,
"showTitle": false,
},
extra: {
bar: {
"type": "stack",
"width": 10,
"seriesGap": 2,
"categoryGap": 3,
"barBorderCircle": false,
"linearType": "none",
"linearOpacity": 1,
"colorStop": 0,
"activeBgColor": "#000000",
"activeBgOpacity": 0.08,
"meterBorde": 1,
"meterFillColor": "#FFFFFF"
}
},
"color": ['#1890FF', '#2F54EA', '#52C41B', '#FA8C15', '#FA541B'],
"legend": {
"show": true,
"position": "top",
"float": "center",
"padding": 5,
"margin": 5,
"backgroundColor": "rgba(0,0,0,0)",
"borderColor": "rgba(0,0,0,0)",
"borderWidth": 0,
"fontSize": 13,
"fontColor": "#666666",
"lineHeight": 11,
"hiddenColor": "#CECECE",
"itemGap": 10
},
"title": {
"name": 940,
"fontSize": 48 / 2,
"color": "#323567"
}
},
chartDataLine: {
"categories": ["xx建筑工地", "xx建筑工地2", "xx建筑工地3", "xx建筑工地4", "xx建筑工地5"],
"series": [{
"name": "石子12",
"legendShape": 'circle',
"data": [35, 36, 31, 33, 13]
}, {
"name": "石子01",
"legendShape": 'circle',
"data": [18, 27, 21, 24, 6]
}, {
"name": "石粉",
"legendShape": 'circle',
"data": [18, 27, 21, 24, 6]
}, {
"name": "毛料",
"legendShape": 'circle',
"data": [18, 27, 21, 24, 6]
}, {
"name": "渣料",
"legendShape": 'circle',
"data": [18, 27, 21, 24, 6]
}]
},