echarts甘特图

甘特图

工单甘特图
- 写出来后的效果
直接上代码
- 有看不懂的可以联系

工单甘特图

最近项目需要工单的甘特图，所以上echarts官网搜了一遍没有关于甘特图的案例，于是自己动手写了一个甘特图，当然，一部分是从各个网站拆分过来的，最后组成了自己的工单甘特图。

写出来后的效果

直接上代码

<template><el-card class="box-card"><div slot="header" class="clearfix"><i style="font-size: 20px;">工单甘特图</i><div class="grol"><div style="display: inline-block;background: #f6071c;" class="man"></div> 小于3天<div style="display: inline-block;background: #faa019" class="man"></div> 小于5天<div style="display: inline-block;background: #0aeabc;" class="man"></div> 大于4天</div></div><div style="text-align: center"><div id="renwu" style="width: 100%;height: 650px">任务进度</div></div></el-card>
</template><script>
import * as echarts from 'echarts'
export default {name: 'TaskProgress',data() {let projectItem = ['任务一','任务二','任务三','任务四','任务五', '任务六'],projectItemStart = ['2021-01-01 12:32:09','2021-01-02 12:32:09','2021-01-10 12:32:09','2021-01-14 12:32:09','2021-01-03 12:32:09','2021-01-18 12:32:09'],projectItemEnd = ['2021-01-03 10:32:09','2021-01-12 06:32:09','2021-01-16 16:32:09','2021-01-17 15:32:09','2021-01-09 16:32:09','2021-01-23 18:32:09'];let projectItemStartValue = projectItemStart.map((item)=>{return new Date(item).valueOf() // 在这把日期转换成数字})let projectItemDuringValue = projectItemEnd.map((item,i)=>{return new Date(item).valueOf()-projectItemStartValue[i]})let dateMin = projectItemStartValue[0];return {option3: {title: {subtext: '任务日期'},tooltip: {trigger: 'axis',formatter: function (params) {const tar = params[1];let start;let enDate;for (let i=0; i<projectItem.length; i++){if (tar.axisValue === projectItem[i]){start=projectItemStart[i];enDate=projectItemEnd[i];}}return tar.name + '<br/>' +tar.seriesName + ' : ' + Math.round(tar.value/(1000*60*60*24))+'天'+'<br/>'+'开始：'+start+'<br/>'+'结束：'+enDate;}},grid: {left: '3%',right: '4%',bottom: '15%',containLabel: true},yAxis: {type: 'category',splitLine: {show: false},data: projectItem},xAxis: {type: 'value',min: dateMin,axisLabel: {color: '#333', // 坐标轴文字颜色formatter: function (param) {let date = new Date(param);let dateLabel = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate(); //x轴显示的日期格式return dateLabel;}}},series: [{name: 'Placeholder',type: 'bar',stack: 'Total',itemStyle: {borderColor: 'transparent',color: 'transparent'},emphasis: {itemStyle: {borderColor: 'transparent',color: 'transparent'}},data: projectItemStartValue},{name: '周期',type: 'bar',stack: 'Total',barWidth: '30%',itemStyle:{normal: {color: function (params) {var dater = params.data/(1000*60*60*24)//自定义颜色let number ;if(dater < 3){number=0}else if (dater < 5){number = 1}else {number=2}const colorList = ['#f6071c', '#faa019', '#0aeabc'];return colorList[number]}}},data: projectItemDuringValue}]}}},mounted() {// 基于准备好的dom，初始化echarts实例setTimeout(() => {let chartDom = document.getElementById('renwu')let myChart = echarts.init(chartDom)// 绘制图表myChart.setOption(this.option3)}, 400)}}
</script><style scoped>
.grol{text-align: right;float: right;margin-right: 10%
}
.man{width: 40px;height: 17px;margin-left: 10px;
}
</style>

有看不懂的可以联系

还是那句话为中华人民服务。

微信：mayir_1

echarts甘特图相关推荐

echart 时间滚动_基于 ECharts 封装甘特图并实现自动滚屏
项目中需要用到甘特图组件,之前的图表一直基于 EChart 开发,但 EChart 本身没有甘特图组件,需要自行封装经过一番鏖战,终于完成了... 我在工程中参考 v-chart 封装了一套图表组件 ...
ECharts画分类甘特图
项目最近做任务排产,需要绘画甘特图,并且每两份一组,做了一个JQuery快速做了POC,实现了大部分功能,后来持续开发,做到了划定当前时间,任务多了后固定左侧列和顶部坐标轴行等等. 分享博客的话就简单 ...
echarts实现甘特图
效果如下图:y轴为餐桌编号,x轴为客人预订的时间: 以8号餐桌为例,甘特数据为阴影部分,表示不同时间段客人用餐占用的时间.如果时间段有交集则说明有时间冲突,应做时间调整. vue 部分代码: < ...
vue+echarts画甘特图
vue项目中添加echarts,只需要增加echarts依赖,然后在main.js中引入echarts就可以使用了. 1.npm install echarts --save 2.修改main.js ...
Vue 中使用 Echarts 实现项目进度甘特图
Vue 中使用 Echarts 实现项目进度甘特图参考:echarts实现甘特图(项目进度/任务进度) 简易版 1. 项目中安装 echarts npm i echarts 2. 实现甘特图 < ...
使用 Echarts 实现项目进度甘特图
Echarts 功能十分强大,可以实现多种图表效果,下面简单介绍下最近使用 Eharts 实现的一个项目进度甘特图. 下面是实现的效果: 目录一.概览 Echarts 基本内容 1.官网文档 2.查 ...
echarts gantt甘特图示例
甘特图(Gantt chart)又称为横道图.条状图(Bar chart).其通过条状图来显示项目.进度和其他时间相关的系统进展的内在关系随着时间进展的情况.以提出者亨利·劳伦斯·甘特(Henry L ...
Echarts之甘特图type: ‘custom‘参数详解
甘特图 const groupData = XEUtils.groupBy(data, "eqpName"); //分组后的数据 const yAxisData = Object. ...
使用Highcharts来画一个简易的甘特图
前端组件 – 甘特图由于在项目中需要画一个基于时间的对比甘特图,但缺乏前端知识,便在网上寻找相关插件或者已有代码. 文章目录前端组件 -- 甘特图前言一.Highcharts? 二.使用 1. ...
如何在前端实现甘特图？SpreadJS两招搞定
SpreadJS v14.0正式版下载如果一个项目由多个任务组成,而任务之间又有关联,我们该怎样准确的显示项目整体进度呢? 使用甘特图,应该是最好的方式. 甘特图,不仅能够让管理者实时有效的掌握项目 ...

echarts甘特图

甘特图

工单甘特图

写出来后的效果

直接上代码

有看不懂的可以联系

echarts甘特图相关推荐

最新文章

热门文章