- 综合排序
- 最热优先
- 最新优先
- );};六、供应链场景应用案例6.1订单生产排程甘特图6.2运输计划甘特图七、多端适配与大屏展示7.1响应式设计@media(max-width:768px){.gantt-chart task-bar{height:24px;margin:6px0;}.time-cell{padding:6px0;font-size:10px;}}@media(min-width:1200px){.gantt-chart .task-bar{height:36px;}}7.2大屏展示模式constBigScreenGantt=({tasks,isBigScreen})=>{return(<divclassName={`gantt-chart来自专栏供应链项目实践
洞见供应链 | 基于 React 的交互式甘特图实现订单生产排程与运输计划可视化
24);return{left:(startOffset/totalDays)*100,width:(duration/totalDays)*100};};return(<divclassName="<em>gantt-chart</em>"ref getTaskPosition()根据任务起止时间计算在时间轴上的位置和宽度缩放控制：通过CSStransform实现时间轴的无级缩放，提升用户体验交互反馈：选中任务时高亮显示，便于用户关注特定任务3.3样式文件.gantt-chart ={chunk}/>))}
19310编辑于 2026-05-10
洞见供应链 | 打造交互式订单生产排程与运输计划甘特图
handleTaskSelect}onDragStart={handleDragStart}onDragEnd={handleDragEnd}/>));};return(<divclassName="<em>gantt-chart</em> width:`${scale.width}px`}}>{scale.label}</div>))}</div>);};六、响应式设计与大屏适配6.1自适应布局实现为了适配不同屏幕尺寸，需要实现响应式设计：.<em>gantt-chart</em> media(max-width:768px){.task-list{width:150px;}.task-content{font-size:12px;}}@media(min-width:1200px){.<em>gantt-chart</em>
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号