Vue echarts绘制甘特图的示例代码
更新时间：2024年03月28日 09:21:32 作者：缘月叙文
甘特图是一种条状图,直观展示项目进展随时间的走势及联系,其中,项目时间由横轴表示,项目活动由纵轴表示,本文给大家介绍了Vue echarts绘制甘特图的实现方法,并有详细的代码示例供大家参考,需要的朋友可以参考下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
什么是甘特图
甘特图（Gantt chart）又称为横道图、条状图(Bar chart)。其通过条状图来显示项目、进度和其他时间相关的系统进展的内在关系随着时间进展的情况。以提出者亨利·劳伦斯·甘特（Henry Laurence Gantt）先生的名字命名。
甘特图以图示通过活动列表和时间刻度表示出特定项目的顺序与持续时间。一条线条图，横轴表示时间，纵轴表示项目，线条表示期间计划和实际完成情况。直观表明计划何时进行，进展与要求的对比。便于管理者弄清项目的剩余任务，评估工作进度。
1、不同的颜色表示不同的阶段。
2、每一行表示一个任务。
3、任务与任务之间的黑色箭头表示任务之间的依赖关系，必需完成前面的才能完成后面的。
通过这一张甘特图，能一眼看出以下信息：
今天应该做什么任务
这个任务从什么时候开始，到什么时候结束
在某一段时间有哪些任务
应该先做哪些任务再做哪些任务
哪些任务可以同时做
这个任务是否被其他任务依赖，如果是，那么这个任务就不能推迟，必需按时完成或者提前完成，否则会影响后面的任务
大任务下面有哪些子任务
可以显示任务的里程碑是什么时候
使用场景
主要用于横坐标固定，比如一天24小时，这样就可以根据Y轴数据可正可负
速用示例版
可以直接将option 复制即可
option = {
tooltip: {
trigger: 'axis'
},
grid: {
top: '10%',
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
show: true,
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
splitLine: {
show: true
},
axisLabel: {
padding: [0, 0, 0, -20] // 四个数字分别为上右下左与原位置距离
},
data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00','07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00']
},
yAxis: {
type: 'value',
name: '单位(kW)',
// scale: true,
splitLine: {
show: false
},
axisLabel: {
formatter: '{value}',
}
},
series: [
{
name: '',
type: 'line',
smooth: true,
showSymbol: false,
symbol: false,
lineStyle: {
normal: {
width: 10
}
},
markPoint: {
data: [
{
name: '最大值',
type: 'max',
valueIndex: 0
}
]
},
data: [300, 300, 300, 300, 300, 300, 300],
},
{
name: '',
type: 'line',
smooth: true,
showSymbol: false,
symbol: false,
lineStyle: {
width: 10
},
markPoint: {
data: [
{
name: '最大值',
type: 'max',
valueIndex: 0
}
]
},
data: ['','','','','','', 500, 500, 500, 500, 500]
},
{
name: '',
type: 'line',
smooth: true,
showSymbol: false,
symbol: false,
lineStyle: {
normal: {
width: 10
}
},
markPoint: {
data: [
{
name: '最大值',
type: 'max',
valueIndex: 0
}
]
},
data: ['','','','','','','', '', '','',-100, -100,-100, -100,-100]
},
{
name: '',
type: 'line',
smooth: true,
showSymbol: false,
symbol: false,
lineStyle: {
normal: {
width: 10
}
},
markPoint: {
data: [
{
name: '最大值',
type: 'max',
valueIndex: 0
}
]
},
data: ['','','','','','','', '', '','','','','','','',200,200,200,200,200,200,200,200,200,200]
}
]
};
润雨细无声版
<div ref="strategyDomRef"
style="width: 800px;
height: 600px;"
>
import * as echarts from 'echarts'
mounted() {
let apiData = [
{
startTime: '00:00',
endTime: '05:00',
value: 200,
},
{
startTime: '05:00',
endTime: '12:00',
value: 400,
},
{
startTime: '12:00',
endTime: '18:00',
value: -200,
},
{
startTime: '18:00',
endTime: '20:00',
value: 300,
},
{
startTime: '20:00',
endTime: '24:00',
value: 500,
},
]
this.dealArr(apiData)
this.echartsDraw()
},
methods:{
//数据处理
dealArr(apiData) {
let YAxis = []
apiData.forEach((element) => {
let dealArr = new Array(
element.endTime == '24:00' ? 25 : parseInt(element.endTime) + 1
).fill(Number(element.value))
let yItem = {
name: ' ',
type: 'line',
showSymbol: false,
endLabel: {
show: true,
formatter: '{c}',
position: 'start',
fontSize: 12,
},
lineStyle: {
width: 10,
color: '#36CFC9',
},
data: dealArr.fill('', 0, parseInt(element.startTime)),
}
YAxis.push(yItem)
})
this.yAxis = YAxis
},
//图表绘制
echartsDraw(){
let charts = echarts.init(this.$refs.strategyDomRef)
let option = {
tooltip: {
trigger: 'axis',
formatter: function (params) {
return '<br/> 功率 ： ' + params[0].value
},
},
grid: {
top: '10%',
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: {
type: 'category',
boundaryGap: false,
splitLine: {
// 网格线
show: true,
lineStyle: {
//分割线
color: '#C0C4CC',
width: 1,
type: 'dashed', //dotted：虚线 solid:实线
},
},
axisLabel: {
padding: [0, 0, 0, -20], // 四个数字分别为上右下左与原位置距离
},
data: [
'00:00',
'01:00',
'02:00',
'03:00',
'04:00',
'05:00',
'06:00',
'07:00',
'08:00',
'09:00',
'10:00',
'11:00',
'12:00',
'13:00',
'14:00',
'15:00',
'16:00',
'17:00',
'18:00',
'19:00',
'20:00',
'21:00',
'22:00',
'23:00',
'24:00',
],
},
yAxis: {
type: 'value',
name: '单位(kW)',
splitLine: {
// 网格线
show: true,
lineStyle: {
//分割线
color: '#C0C4CC',
width: 1,
type: 'dashed', //dotted：虚线 solid:实线
},
},
axisLabel: {
formatter: '{value}',
},
},
series: this.yAxis,
}
charts.setOption(option, true)
//清空画布，防止缓存
charts.clear()
//使用刚指定的配置项和数据显示图表。
charts.setOption(option, true)
window.addEventListener('resize', function () {
charts.resize()
})
}
}
到此这篇关于Vue echarts绘制甘特图的示例代码的文章就介绍到这了,更多相关Vue echarts甘特图内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家！
相关文章
这篇文章主要介绍了Vue 生命周期的过程，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
这篇文章主要为大家详细介绍了Vue.js render方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
这篇文章主要介绍了elementui中使用el-tree控件懒加载和局部刷新，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要为大家详细介绍了vue.js实现一个漂亮、灵活、可复用的提示组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的.本文重点给大家介绍Vue数据双向绑定原理及简单实现方法，感兴趣的朋友跟随程序员之家小编一起学习吧2018-05-05
这篇文章主要介绍了Vue实现JSON字符串格式化编辑器组件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
element-UI el-table修改input值视图不更新问题
这篇文章主要介绍了element-UI el-table修改input值视图不更新问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
这篇文章主要为大家介绍了基于ant-design-vue实现表格操作按钮组件示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章主要给大家介绍了关于vue项目history模式刷新404问题的解决办法,需要的朋友可以参考下2023-11-11
这篇文章主要给大家介绍的是vue2 vue3中使用Echarts的相关资料，下面文章 会详细介绍该内容，感兴趣的小伙伴不要错过哟2021-09-09
最新评论