网站设计的公司运营接单,百度搜索引擎首页,微信管理系统平台电话,杭州做网站电话甘特图
手动封装简版甘特图#xff0c;纯展示功能#xff0c;无其他操作 文章目录 甘特图前言效果图组件使用总结 前言
开始的思路是使用echarts 瀑布图来体现#xff0c;但是试验后发现#xff0c;头部时间功能不满足#xff0c;然未找到其他组件#xff0c;于是手动封…甘特图
手动封装简版甘特图纯展示功能无其他操作 文章目录 甘特图前言效果图组件使用总结 前言
开始的思路是使用echarts 瀑布图来体现但是试验后发现头部时间功能不满足然未找到其他组件于是手动封装一个比较简陋凑乎看。 echarts效果 效果图 组件
templatediv classgantt_chartul classtitle :style{height}li v-fori in 24 :keyip classtitle_font{{ i.toString().length 1 ? 0${i} : i }}/pp classtitle_node/p/li/uldiv classgantt_chart_columns v-forv,i in chartData :keyi :style{height}p classtime_value :style{width:getWidth(v),left:getLeft(v)}/p/div/div/templatescript setupimport {computed,toRefs } from vue;let props defineProps({chartData:{type:Object,default:() {return []}},height:{type:String,default:() {return }}
})const { chartData } toRefs(props);const getWidth computed(() {return function (val) {if (val.length 2) {if (val[0] val[1]) {let num ((val[0] - val[1]) / 24 * 100).toString() %return num} else {let num ((val[1] - val[0]) / 24 * 100).toString() %return num}}}})const getLeft computed(() {return function (val) {if (val.length 2) {if (val[0] val[1]) {let num (val[1] / 24 * 100).toString() %return num} else {let num (val[0] / 24 * 100).toString() %return num}}}
})/script
style scoped langscss.gantt_chart{width: 100%;height: 100%;border: 1px solid #2e5c80;overflow: auto;.title{width: 100%;// height: 16.6666%;overflow: hidden;display: flex;justify-content: space-evenly;overflow: hidden;border-bottom: 1px solid #2e5c80;margin: 0;padding: 0;li {width: 4%;position: relative;text-align: center;list-style:none;box-sizing: border-box;}.title_font {display: inline-block;height: 22px;margin: 0;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}.title_node {width: 1px;height: 10px;margin: 0;background: #1ea9fa;position: absolute;left: 50%;bottom: 0;transform: translateX(-50%);}}.gantt_chart_columns {width: 100%;// height: 16.6666%;overflow: hidden;border-bottom: 1px solid #2e5c80;.time_value {height: 50%;position: relative;top: 50%;transform: translateY(-50%);margin: 0;background-color: #00ccff;}}.gantt_chart_columns:last-child {border-bottom:none;}}
/style使用
import GanttChart from /components/GanttChart.vue;GanttChart stylewidth:50%;height:30%; margin-top: 1.1%; :chartDatachartData height16.3%/import { ref } from vue;
let chartData ref([[1.2,16.4],[5.5,10.8],[1,6.2],[5.2,9],[8.3,10.8],
]) 总结
简单使用至于数据需要处理后传入 感谢各位大佬观看
