vue+echarts画甘特图

vue项目中添加echarts，只需要增加echarts依赖，然后在main.js中引入echarts就可以使用了。

1、npm install echarts --save

2、修改main.js

import * as echarts from 'echarts'Vue.prototype.$echarts = echarts

3、具体页面使用：

<template><div class="about"><h1>This is echarts page</h1><div id="myechart" style="height:500px;width:1000px;" ></div></div>
</template>
<script>export default{name:'MyEchart',mounted(){this.drawEchart()},methods:{drawEchart(){let myechart = this.$echarts.init(document.getElementById("myechart"))myechart.setOption({title:{text:"gant"},xAxis:{type:'value'},yAxis:{type:'category',data:["pro1","pro2","pro3","pro4","pro5","pro6"]},series:[{type:'bar',data:[10,20,30,46,78,22]}]})}}}
</script>

展示效果：

甘特图在这个图形的基础上还需要增加数据，形成一个不断迭代的效果。

{type:'bar',name:'base',//stack:'Total',data:[10,20,30,46,78,22]
},
{type:'bar',name:'data2',//stack:'Total',data:[20,20,30,20,10,20]
}

如果不做设置，效果如下所示：

两组数据都从原始位置开始，我们想要的结果是叠加，这里只需要增加一个参数stack:''，指定一个相同的名称，效果如下：

我们如果不想展示第一段，只展示第二段，这时候可以设置第一个数据集对应的样式：

itemStyle{borderColor:'transparent',color:'transparent'
}

展示效果：

我们最终需要的效果如下所示：

从上面的示例，我们可以这样来实现，把两组数据看作一组，每一组第一个数据集展示隐藏，这里如果是项目进度图，我们可以把开始时间、结束时间作为一组，结束时间与开始时间中间这一段时间就是持续时间，这个时间在这里是一个增量，就是第二个数据集是展示在第一个数据集的基础上，它不能再直接使用结束时间，而是使用间隔时间。

数据集：

series:[{type:'bar',name:'base',stack:'Total',data:[86,41,119,46],itemStyle:{borderColor:'transparent',color:'transparent'}},{type:'bar',name:'data2',stack:'Total',data:[100,100,100,100]},{type:'bar',name:'data3',stack:'Total',data:[75,67,64,52],itemStyle:{borderColor:'transparent',color:'transparent'}},{type:'bar',name:'data4',stack:'Total',data:[100,100,100,100]},{type:'bar',name:'data5',stack:'Total',data:[44,90,154,84],itemStyle:{borderColor:'transparent',color:'transparent'}},{type:'bar',name:'data6',stack:'Total',data:[100,100,100,100]},{type:'bar',name:'data7',stack:'Total',data:[46,183,'-',188],itemStyle:{borderColor:'transparent',color:'transparent'}},{type:'bar',name:'data8',stack:'Total',data:[100,100,'-',100]},{type:'bar',name:'data9',stack:'Total',data:[40,'-','-','-'],itemStyle:{borderColor:'transparent',color:'transparent'}},{type:'bar',name:'data8',stack:'Total',data:[{value:100,itemStyle:{normal:{color:'purple'}}},'-','-','-']}]

最终的一个效果：

这个里面，对应每一个数据项都可以设置显示颜色，具体操作就是把data:[]数组变更为：

data:[{value:100,itemStyle:{normal:{color:'purple'}}},'-','-','-']

原来的数据项，变为一个对象，对象的值value对应原来的数字值，样式则使用itemStyle属性设置。

甘特图绘制需要注意的地方：

1、数据显示叠加，使用属性stack。

2、隐藏开始时间，设置显示透明即可。结束时间点不能直接设置结束时间，这是一个增量，需要设置时间间隔。

3、每一个数据项展示，可以单独设置样式，比如颜色，可以把data数组做修改，原来单一的数字值，修改为对象，包含value,itemStyle等属性。

vue+echarts画甘特图相关推荐

前端可排程的vue 排程甘特图
话不多说直接上图结合全网的开源码,又根据echart 图做出了前端可排程的vue 排程甘特图首先要引入echart 模板这里就不再赘述了在这里插入图片描述之后对它进行魔改将横轴改为时间 ...
如何使用excel画甘特图
甘特图小伙伴们都非常的熟悉,首先小编简单的向各位小伙伴介绍一下什么是甘特图,甘特图内在思想简单,即以图示的方式通过活动列表和时间刻度形象地表示出任何特定项目的活动顺序与持续时间.基本是一条线条图,横轴 ...
【Vue.JS】纯 Vue.js 制作甘特图
效果图在线预览 GitHub链接(包含 knockoutJS 版本与 Vue 版本) 推荐组合效果推荐与双表头固定效果组合,实现如上例中横表头(日期)纵向固定,纵表头(类型)横向固定效果. 参照连 ...
echarts画折线图和数据excel导出
最近一直使用echarts画折线图,在此做个记录最后样式代码 <!DOCTYPE html> <html style="height: 100%">&l ...
Origin画甘特图
Origin画甘特图 Step1 数据格式 Step2 整体甘特图 Step3 用不同颜色区分不同job Step4 细节调整 Step1 数据格式以两台机器,三项作业,每项作业有两道工序为例.每项 ...
python用Matplotlib画甘特图
说明使用Matplotlib画甘特图,思想是使用条形图绘制. 关键点,使用plt.barh(y,data,left=()) y是条形图的位置,data是条形图的大小,left是条形图坐标的距离.,具 ...
【高效生活】巧画甘特图
[前言] "登高而招,臂非加长也,而见者远:顺风而呼,声非加疾也,而闻者彰."荀子在千年之前就为如何高效学习,定下了基调."君子性非异也,善假于物也."所以说, ...
知道甘特图吗？会画甘特图吗？管项目经常用到甘特图吗？
年轻同事问我,杰哥,知道甘特图吗?会画甘特图吗?管项目经常用到甘特图吗? 啥是甘特图,怎么画甘特图没啥好回答的,百度一搜都有对应介绍. 我自己对甘特图的理解,甘特图就是以图表的方式直观地反映任务的相关 ...
使用Excel画甘特图
引言学习了这么久,做了这么多个项目,想必大家都知道甘特图这个东西吧,那么每次的甘特图是不是你自己画的,又是怎么画的呢?这次小编来给大家分享一下怎么使用Excel画甘特图. 甘特图简介首先,我们再次 ...

vue+echarts画甘特图

vue+echarts画甘特图相关推荐

最新文章

热门文章