目前恰好看到用到的有这两个嗷：
1.recharts （附上链接：）
2.nivo （附上链接：）
提示：以下是本篇文章正文内容，下面案例可供参考
import { ResponsivePie } from '@nivo/pie'
import { useReactive } from "ahooks"
import { Cell as Cells, Label, Legend, Pie, PieChart, Tooltip } from "recharts"
const Photo = () => {
const data = useReactive<
{ name: string, value: number }[]
>([
{ name: 'av', value: 30.6 }, //#f15a5c 第一个是最大数据
{ name: 'bv', value: 5.1 }, //#8b59a2 之后从小到大
{ name: 'cv', value: 8.9 }, //#4867ba
{ name: 'dv', value: 12.6 }, //#60b8e3
{ name: 'ev', value: 22.1 }, //#87c874
{ name: 'fv', value: 20.7 }, //#ffbc58
])
// 颜色是按照数据顺序排列的嗷
const COLORS: string[] = ['#f15a5c', '#8b59a2', '#4867ba', '#60b8e3', '#87c874', '#ffbc58'];
const BiHandle = (i: number = 0) => {
return data[i].value
}
const ColorHandle = (i: number = 0) => {
return COLORS[i]
}
const state = useReactive<{
biIndex: number
}>({
biIndex: 0
})
return (
<div className="w-full h-full pl-4 pr-4">
<h1 className="text-gray-00 text-xl fon-bold">饼状图</h1>
<div className='w-full mt-10 flex items-center justify-center '>
<PieChart width={200} height={200} className=' ' >
<Pie
data={data}
cx={85}
cy={85}
innerRadius={60}
outerRadius={90}
fill="#8884d8"
paddingAngle={2}
dataKey="value"
isAnimationActive={true}
stroke="#fff" // 扇区边框颜色
strokeWidth={2} // 扇区边框宽度
cornerRadius={5} // 扇区圆角
>
{data.map((entry, index) => (
<>
<Cells key={index} fill={COLORS[index % COLORS.length]} onClick={() => state.biIndex = index} />
</>
))}
// 点击每块扇形 饼状图中间都会出现对应的比例嗷
<Label
value={+(BiHandle(state.biIndex || 0)) + '%'} position="center"
fill={ColorHandle(state.biIndex) || '#ffbc58'} />
</Pie>
</PieChart>
</div>
</div>
)
}
export default Photo"use client"
import React, { PureComponent } from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
const data = [
{
name: 'aA',
uv: 4000,
pv: 2400,
amt: 2400,
},
{
name: 'aB',
uv: 3000,
pv: 1398,
amt: 5210,
},
{
name: 'aC',
uv: 2000,
pv: 9800,
amt: 3290,
},
{
name: 'aD',
uv: 2780,
pv: 3908,
amt: 4800,
},
{
name: 'aE',
uv: 10,
pv: 4800,
amt: 3181,
},
{
name: 'aF',
uv: 2390,
pv: 3800,
amt: 2500,
},
{
name: 'aG',
uv: 3490,
pv: 4300,
amt: 2100,
},
];
export default class Example extends PureComponent {
static demoUrl = 'https://codesandbox.io/p/sandbox/line-chart-width-xaxis-padding-8v7952';
render() {
return (
<div className='w-full h-full p-4'>
<div className="w-full h-[300px]">
<h1 className="text-gray-00 text-xl fon-bold mb-4">折线图</h1>
<ResponsiveContainer width="100%" height="100%">
<LineChart
width={500}
height={300}
data={data}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
>
<CartesianGrid
strokeDasharray="3 3"
vertical={true} //是否显示纵向网格线
horizontal={true} //是否显示横向网格线
/>
<XAxis dataKey="name" />
<YAxis
type="number"
reversed={false}
allowDuplicatedCategory={false}
allowDecimals={true}
padding={{ top: 0, bottom: 0 }}
hide={false}
orientation={'left'} //z纵坐标显示在左侧还是右侧
mirror={false} //刻度是否镜像
tickCount={5} //刻度数量
/>
<Tooltip />
<Legend />
<Line
type="monotone" // 平滑曲线
dataKey="pv"
stroke="#8884d8"
activeDot={{ r: 6 }} />
<Line
type="linear" //直线类型
dataKey="amt"
stroke="#f1a47d"
activeDot={{ r: 6 }}
dot={{ r: 3, fill: '#f1a47d' }} />
{/* 有些属性可能api上没有显著标出来 需要自己点进去看看都有哪些属性 比如 dot中的 r 就是用来控制直线中的小圆点半径有多大 */}
<Line
type="monotone"
dataKey="uv"
activeDot={{ r: 6 }}
stroke="#82ca9d" />
</LineChart>
</ResponsiveContainer>
</div>
</div>
);
}
}
import { ResponsiveLine } from "@nivo/line"
const Photo = () => {
const Zdata = [
{
"id": "av",
"color": "#4690C2",
"data": [
{
"x": "10/16",
"y": 1530
},
{
"x": "10/17",
"y": 1780
},
{
"x": "10/18",
"y": 2740
},
{
"x": "10/19",
"y": 1420
},
{
"x": "10/20",
"y": 1390
},
{
"x": "10/21",
"y": 1610
},
{
"x": "10/22",
"y": 2660
},
{
"x": "10/22",
"y": 2660
},
]
},
{
"id": "bv",
"color": "#65C246",
"data": [
{
"x": "10/16",
"y": 1400
},
{
"x": "10/17",
"y": 1450
},
{
"x": "10/18",
"y": 2041
},
{
"x": "10/19",
"y": 1494
},
{
"x": "10/20",
"y": 2071
},
{
"x": "10/21",
"y": 3128
},
{
"x": "10/22",
"y": 1280
},
]
},
{
"id": "cv",
"color": "#D5A110",
"data": [
{
"x": "10/16",
"y": 2596
},
{
"x": "10/17",
"y": 2355
},
{
"x": "10/18",
"y": 2924
},
{
"x": "10/19",
"y": 2180
},
{
"x": "10/20",
"y": 2069
},
{
"x": "10/21",
"y": 2472
},
{
"x": "10/22",
"y": 3562
},
]
},
{
"id": "dv",
"color": "#C246",
"data": [
{
"x": "10/16",
"y": 1610
},
{
"x": "10/17",
"y": 1659
},
{
"x": "10/18",
"y": 3204
},
{
"x": "10/19",
"y": 4381
},
{
"x": "10/20",
"y": 3167
},
{
"x": "10/21",
"y": 3216
},
{
"x": "10/22",
"y": 3090
},
]
}
]
return (
<div className="w-full h-full pl-4 pr-4">
<h1 className="text-gray-00 text-xl fon-bold">折线图</h1>
<div className="w-full h-[311px] ">
<ResponsiveLine
lineWidth={2}
data={Zdata}
margin={{ top: 50, right: 50, bottom: 50, left: 50 }}
xScale={{
type: "point",
}}
yScale={{
type: 'linear',
min: 'auto',
max: 'auto',
stacked: false, //是否分开几条线
reverse: false
}}
yFormat=" >-.2f"
axisTop={null}
axisRight={null}
axisBottom={{
tickSize: 3,
tickPadding: 10,
tickRotation: 0,
legend: '',
legendOffset: 36,
legendPosition: 'middle',
truncateTickAt: 8
}}
animate={true}
enableGridX={false}
axisLeft={{
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: '',
legendOffset: 0,
legendPosition: 'middle',
truncateTickAt: 0
}}
colors={{ scheme: 'tableau10' }}
pointSize={3}
pointColor={{ theme: 'background' }}
pointBorderWidth={3}
pointBorderColor={{ from: 'serieColor' }}
pointLabel={e => `${e.data.x}: ${e.data.y}`}
pointLabelYOffset={0}
enableTouchCrosshair={true}
useMesh={true}
/>
</div>
</div>
)
}
export default Photo其余的我就不举例子啦 ，可以自行去搜索链接看一看 ，nivo中的饼状图动效也挺好看嗷，就是我在试的时候了解到，如果想要在饼状图中间加上自定义文字则需要添加中间控件嗷~感兴趣的可以自行研究一下。
因篇幅问题不能全部显示，请点此查看更多更全内容
Copyright © 2019- fenyunshixun.cn 版权所有 湘ICP备2023022495号-9
违法及侵权请联系：TEL:199 18 7713 E-MAIL:2724546146@qq.com
本站由北京市万商天勤律师事务所王兴未律师提供法律服务