企业官网建设流程全解析

网站做的一样算不算侵权,网络营销意思,超级工程网站建设,百色建设网站目录 使用场景 如何使用 项目中安装recharts npm install recharts 示例代码 import React, { FC } from react // 导入recharts图表库的相关组件 import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from recharts // 导入统计颜色常量 import { STAT_COLORS } …目录使用场景如何使用项目中安装rechartsnpm install recharts示例代码import React, { FC } from react // 导入recharts图表库的相关组件 import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from recharts // 导入统计颜色常量 import { STAT_COLORS } from ../../../constant // 定义饼图的示例数据 const data01 [ { name: Group A, value: 400 }, { name: Group B, value: 300 }, { name: Group C, value: 300 }, { name: Group D, value: 200 }, { name: Group E, value: 278 }, { name: Group F, value: 189 }, ] // 饼图演示组件 const PieDemo: FC () { return ( // 容器div设置宽度和高度 div style{{ width: 300px, height: 400px }} {/* 响应式容器使图表能够自适应容器大小 */} ResponsiveContainer width100% height100% {/* 饼图组件 */} PieChart {/* 饼图数据配置 */} Pie dataKeyvalue // 指定数据中用于计算扇形大小的字段 data{data01} // 饼图的数据源 cx50% // x 轴的偏移居中显示 cy50% // y 轴的偏移居中显示 outerRadius{50} // 饼图的外半径 fill#8884d8 // 饼图的默认填充色 label{i ${i.name}: ${i.value}} // 设置标签格式显示名称和值 {/* 为每个扇形设置不同的颜色 */} {data01.map((i, index) { return Cell key{index} fill{STAT_COLORS[index]} / // 使用预定义的颜色数组 })} /Pie {/* 鼠标悬停提示框 */} Tooltip / /PieChart /ResponsiveContainer /div ) } export default PieDemo代码解读代码结构和用法1. 导入依赖import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from recharts import { STAT_COLORS } from ../../../constant导入 recharts 库的饼图相关组件◦ 导入项目中定义的统计颜色常量2.数据定义const data01 [ { name: Group A, value: 400 }, { name: Group B, value: 300 }, { name: Group C, value: 300 }, { name: Group D, value: 200 }, { name: Group E, value: 278 }, { name: Group F, value: 189 }, ]3.组件渲染div style{{ width: 300px, height: 400px }} ResponsiveContainer width100% height100% PieChart Pie ... {data01.map((i, index) { return Cell key{index} fill{STAT_COLORS[index]} / })} /Pie Tooltip / /PieChart /ResponsiveContainer /div使用 ResponsiveContainer 确保图表自适应容器大小◦ PieChart 是饼图的主容器◦ Pie 定义饼图的配置如数据源、半径、标签等◦ Cell 为每个扇形设置不同颜色◦ Tooltip 提供鼠标悬停时的提示信息组件特点1. 响应式设计使用 ResponsiveContainer 使饼图能够自适应容器大小2. 自定义颜色通过 Cell 组件为每个扇形设置不同的颜色3. 交互功能通过 Tooltip 提供鼠标悬停时的数据提示4. 标签显示饼图扇形上显示名称和值的标签使用场景这个组件主要用于问卷统计页面的图表展示数据分布的可视化表示演示饼图功能的示例组件如何使用在其他组件中可以这样引入使用import PieDemo from ./PieDemo // 在JSX中 PieDemo /样式设置• 容器大小为 300px 宽度和 400px 高度• 饼图居中显示cx50%cy50%• 外半径为 50 像素• 标签格式为 名称: 值