import React from 'react'; import './index.less'; import PieChart from '@src/components/PieChart'; function makePie(text, subtext, color, data) { return { title: { text, textAlign: 'center', textVerticalAlign: 'middle', textStyle: { fontSize: 14, color: '#686872' }, subtext, subtextStyle: { fontSize: 16, color: '#303036' }, top: '28%', left: '45%', }, color, series: [ { type: 'pie', radius: ['85%', '100%'], hoverAnimation: false, animation: false, label: { show: false, }, data, }, ], }; } export default function Ratio(props) { const { text, subtext, values, size = 'basic' } = props; return ( <div className={`ratio-pie ${size}`}> <PieChart width={size === 'small' ? 80 : 110} height={size === 'small' ? 80 : 110} option={makePie(text, subtext, values.map(item => item.color), values.map(item => item.value))} /> <div className="label-list"> {values.map(item => { return ( <div className="item"> <i style={{ backgroundColor: item.color }} /> {item.label} </div> ); })} </div> </div> ); }