resultSet.chartPivot().map((e, index) => <Cell key={index} fill={COLORS[index % COLORS.length]}/> )
<Cell fill={colors[index % colors.length]}/> ))
<Pie cy="85%" startAngle={180} endAngle={0} data={typesData} dataKey="value" outerRadius={80} label> typesData.map((entry, index) => <Cell key={entry.name} fill={theme.palette[entry.color].main} />)
render() { return ( <ResponsiveContainer minWidth={260} minHeight={240}> <PieChart onMouseEnter={this.onPieEnter}> <Pie data={datas} nameKey="name" valueKey="value" dataKey="value" labelLine={false} label={renderCustomizedLabel} outerRadius={80} fill="#8884d8"> { datas.map((entry, index) => <Cell key={index} fill={COLORS[index % COLORS.length]}/>) } </Pie> <Tooltip /> </PieChart> </ResponsiveContainer> ) }
const CustomPieChart = ({title, categoryData}) => { if (categoryData.length === 0) { return <h3 className="text-center mx-3">{title}还没有任何数据</h3> } return ( <div className="pie-chart-component"> <h3 className="text-center mt-3">{title}</h3> <ResponsiveContainer width={'100%'} height={300}> <PieChart> <Pie dataKey="value" isAnimationActive={false} data={categoryData} cx={'50%'} cy={'50%'} outerRadius={100} fill="#8884d8" label > { categoryData.map((entry, index) => <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />) } </Pie> <Tooltip /> </PieChart> </ResponsiveContainer> </div> ) }
render() { return ( <PieChart width={500} height={600} style={{ margin: "0 auto" }} onMouseEnter={this.onPieEnter}> <Pie data={data} label={renderCustomizedLabel} labelLine={false} outerRadius={90} fill="#8884d8"> { data.map((entry, index) => <Cell fill={COLORS[index % COLORS.length]} />) } </Pie> <Pie activeIndex={this.state.activeIndex} activeShape={renderActiveShape} data={data02} innerRadius={100} outerRadius={130} fill="#8884d8" label> <Tooltip content={<CustomTooltip />} /> <Legend /> </Pie> </PieChart> ) }
<Cell key={index} fill={this.state.activeIndex === index ? activeFill : fill} /> ))} </Bar>
render () { return ( <ResponsiveContainer height={200} width='100%'> <PieChart onMouseEnter={this.onPieEnter}> <Pie data={data} cx='50%' cy={100} labelLine={false} label={this.renderCustomizedLabel} outerRadius={80} fill="#8884d8" dataKey="value" > { data.map((entry, index) => <Cell key={entry} fill={COLORS[index % COLORS.length]}/>) } </Pie> </PieChart> </ResponsiveContainer> ); }
resultSet.chartPivot().map((e, index) => ( <Cell key={index} fill={colors[index % colors.length]} /> ))
render() { return ( <ResponsiveContainer minWidth={260} minHeight={240}> <PieChart width={800} height={400} onMouseEnter={this.onPieEnter}> <Pie data={datas} nameKey="name" valueKey="value" dataKey="value" innerRadius={60} outerRadius={80} fill="#8884d8" paddingAngle={5}> { datas.map((entry, index) => <Cell key={index} fill={COLORS[index % COLORS.length]}/>) } </Pie> <Tooltip /> </PieChart> </ResponsiveContainer> ) }
render () { return ( <ResponsiveContainer height={200} width='100%'> <PieChart onMouseEnter={this.onPieEnter}> <Pie data={data} cx='50%' cy={100} labelLine={false} label={this.renderCustomizedLabel} outerRadius={80} fill="#8884d8" dataKey="value" > { data.map((entry, index) => <Cell key={entry} fill={COLORS[index % COLORS.length]}/>) } </Pie> </PieChart> </ResponsiveContainer> ); }