玫瑰图使用示例(仅供参考)
- 1.表现形式
提示
下图中的选项框不在下面代码中
- 2.配置
js
// 接口数据
const res = {
data: [
{"name":"快包","value":921087},
{"name":"其他","value":788428},
{"name":"特快","value":403114}]
}
const returnTotal = (num) => {
return parseFloat(String(num)).toLocaleString();
};
const returnAllTotal = (arr) => {
let num = 0;
for (let i = 0; i < arr.length; i++) {
num += arr[i].value;
}
return num;
};
// 图表配置
option = {
legend: {
orient: 'vertical',
selectedMode: false,
icon: 'rect', //图例形状
data: ['快包', '特快', '其他'],
top: '20px',
right: '20px',
// right: 40,
itemWidth: 6, // 图例标记的图形宽度。[ default: 25 ]
itemHeight: 50, // 图例标记的图形高度。[ default: 14 ]
itemGap: 20, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔,纵向布局时为纵向间隔。
formatter: function (name) {
let target;
for (let i = 0; i < pieData.length; i++) {
if (pieData[i].name === name) {
target = pieData[i].value;
}
}
let arr = [
' {title|' + name + '}',
' {value|' + returnTotal(target) + '}' + ' {unit|' + '件' + '}',
];
return arr.join('\n');
},
textStyle: {
rich: {
value: {
color: '#ffffff',
fontSize: '20px',
align: 'left',
padding: [3, 8, 0, 5],
},
title: {
fontSize: '14px',
color: '#aab1d0',
align: 'left',
padding: [0, 0, 12, 5],
},
unit: {
color: '#aab1d0',
},
},
},
},
title: {
text: returnTotal(returnAllTotal(res.data)),
left: '29%',
textAlign: 'center',
top: '55%',
textStyle: {
fontSize: 20,
color: '#ffffff',
},
},
series: [
{
name: '数量',
type: 'pie',
radius: ['60%', '80%'],
center: ['30%', '60%'],
roseType: 'radius',
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: false,
},
},
labelLine: {
show: false,
},
color: ['#23D5FF', '#17F2C3', '#E65152'],
data: res.data,
},
],
}