return ( <ResponsiveContainer width="100%" height={300}> <PieChart> <Pie data={resultSet.chartPivot()}
<div style={{ width: '100%', height: 140, display: 'flex', justifyContent: "space-around" }}> <ResponsiveContainer> <PieChart> <Pie cy="85%" startAngle={180} endAngle={0} data={typesData} dataKey="value" outerRadius={80} label>
render() { return ( <ResponsiveContainer minWidth={260} minHeight={240}> <PieChart margin={{ top: 5, right: 5, left: 5, bottom: 5 }}> <Pie data={datas1} nameKey="name" valueKey="value" dataKey="value" outerRadius={60} fill="#8884d8"/> <Pie data={datas2} nameKey="name" valueKey="value" dataKey="value" innerRadius={70} outerRadius={90} fill="#82ca9d" label/> <Tooltip /> </PieChart> </ResponsiveContainer> ) }
render() { return ( <PieChart width={500} height={300} style={{ margin: "0 auto" }} onMouseEnter={this.onPieEnter}> <Pie activeIndex={this.state.activeIndex} activeShape={renderActiveShape} data={data} innerRadius={60} outerRadius={80} fill="#8884d8" /> </PieChart> ) }
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 ( <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 ChartPie = ({ report, dataKeyX, data, height, width, showLabel }) => { return ( <PieChart width={width} height={height}> <Pie data={data} dataKey="amount" nameKey="product" cx="50%" cy="50%" outerRadius={50} fill="#8884d8" label={showLabel} /> {/* <Pie data={data02} dataKey="value" nameKey="name" cx="50%" cy="50%" innerRadius={60} outerRadius={80} fill="#82ca9d" label /> */} <Tooltip /> {height > 200 && <Legend />} </PieChart> ); }
render() { const {data} = this.props; return ( <PieChart width={400} height={350}> <Pie dataKey="value" isAnimationActive={false} data={data} cx={200} cy={200} outerRadius={80} fill="#8884d8" label /> <Tooltip /> </PieChart> ); }
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> ) }
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> ); }
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> ); }