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 echarts画甘特图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了TypeScript在vue中的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
关于配置babel-plugin-import报错的坑及解决
这篇文章主要介绍了关于配置babel-plugin-import报错的坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了vue treeselect获取当前选中项的label实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要为大家详细介绍了Vue实现Tab选项卡切换，点击不同标题显示对应图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了Vue结合原生js实现自定义组件自动生成示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
这篇文章主要给大家介绍了关于Vue3安装dataV报错问题解决方案的相关资料,dataV用于大屏展示,个人觉得比echarts简单很多,需要的朋友可以参考下2023-06-06
在本篇文章里小编给大家整理的是关于vue按需加载实例的相关知识点内容，有需要的朋友们可以学习参考下。2019-09-09
这篇文章主要介绍了vue.js实现点击图标放大离开时缩小，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-01-01
这篇文章主要介绍了vue-router动态路由设置参数可选，文中给大家提到了vue-router 动态添加 路由的方法,需要的朋友可以参考下2019-08-08
写本篇文章之前其实也关注过vue中的一个关于加载动态组件is的API，最开始研究它只是用来实现一个tab切换的功能,需要的朋友可以参考下2019-05-05
最新评论