放大数据再还原之前的值----->最大值的0.5倍
const other = [
{ name: 'rose1', value: 0, color: '#5573e1' },
{ name: 'rose2', value: 20, color: '#7fd160' },
];
export const otherPie = {
option: {
grid: {
top: '8%',
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true,
},
legend: {
show: false,
},
tooltip: {
trigger: 'item',
// formatter: '{b}:<br>{c}({d}%)',
},
series: [
{
type: 'pie',
roseType: 'area',
radius: ['15rem', '70rem'],
center: ['50%', '55%'],
avoidLabelOverlap: false,
startAngle: -90, //起始角度
label: {
show: true,
overflow: 'none',
width: 50,
align: 'left',
// margin: '50%',
fontSize: '16px',
margin: 0,
color: '#fff',
// color: 'auto',
rich: {
a: {
fontSize: '13px',
padding: [
0, // 上
0, // 右
5, // 下
0, // 左
],
},
b: {
fontSize: '16px',
},
},
},
labelLine: {
normal: {
show: false,
length2: 20, //第一条线
length: 10, //第二条线
lineStyle: {
width: 1, // 线条的宽度
// color: '#000', //线的颜色设置, 如没有设置颜色则线条的颜色跟随饼状图的颜色
},
},
},
data: [],
},
],
},
};
import { otherPie} from './config';
[otherData, setOtherData] = useState(otherPie);
为零时显示
//饼图值放大
let pieData = other;
let showData = [];
let sum = 0,
max = 0;
pieData.forEach((item) => {
sum += item.value;
if (item.value >= max) max = item.value;
});
// 放大规则
let number = Math.round(max * 0.5);
showData = pieData.map((item) => {
return {
// value: item.value !== 0 ? number + item.value : item.value,
value: number + item.value,
name: item.name,
itemStyle: item.itemStyle,
};
});
const otherResult = _.cloneDeep(otherData);
otherResult.option.series[0].data = showData;
otherResult.option.tooltip.formatter = (param) => {
/* let text = '';
if (param.value === 0) {
text = param.name + '<br>' + param.value;
} else {
text = param.name + '<br>' + (param.value - number);
} */
let text = param.name + '<br>' + (param.value - number);
return text;
};
otherResult.option.series[0].label.formatter = (v) => {
/* let text = '';
if (v.data.value === 0) {
text = '{a|' + v.data.name + '}' + '\n' + '{b|' + v.data.value + '}';
} else {
text = '{a|' + v.data.name + '}' + '\n' + '{b|' + (v.data.value - number) + '}';
} */
let text = '{a|' + v.data.name + '}' + '\n' + '{b|' + (v.data.value - number) + '}';
return text;
};
setOtherData({ ...otherResult });
为零时不显示
//饼图值放大
let pieData = other;
let showData = [];
let sum = 0,
max = 0;
pieData.forEach((item) => {
sum += item.value;
if (item.value >= max) max = item.value;
});
// 放大规则
let number = Math.round(max * 0.5);
showData = pieData.map((item) => {
return {
value: item.value !== 0 ? number + item.value : item.value,
name: item.name,
itemStyle: item.itemStyle,
};
});
const otherResult = _.cloneDeep(otherData);
otherResult.option.series[0].data = showData;
otherResult.option.tooltip.formatter = (param) => {
let text = '';
if (param.value === 0) {
text = param.name + '<br>' + param.value;
} else {
text = param.name + '<br>' + (param.value - number);
}
return text;
};
otherResult.option.series[0].label.formatter = (v) => {
let text = '';
if (v.data.value === 0) {
text = '{a|' + v.data.name + '}' + '\n' + '{b|' + v.data.value + '}';
} else {
text = '{a|' + v.data.name + '}' + '\n' + '{b|' + (v.data.value - number) + '}';
}
return text;
};
setOtherData({ ...otherResult });