vue项目使用Echarts制作项目工期甘特图

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue项目使用Echarts制作项目工期甘特图相关的知识,希望对你有一定的参考价值。

参考技术A

项目迭代过程中,碰上一个需求,要求用甘特图的方式显示项目的工期进度,开完会我赶紧搜索一下甘特图是啥东东,大概了解之后,做出了如下样式

Echarts版本4.5.0

vue版本2.x

HTML部分

CSS部分

data部分

由于是demo,所以用的自己的数据,首先给需要用到的变量赋值

赋值之后,根据值,定义初始参数配置

上述参数配置中,还需定义一下自定义的图形绘制方法

这些都ok,我们就可以初始化chart了

大功告成

如果看了觉得有帮助的,我是@ 鹏多多11997110103 ,欢迎 点赞 关注 评论;
END

往期文章

个人主页

以上是关于vue项目使用Echarts制作项目工期甘特图的主要内容,如果未能解决你的问题,请参考以下文章

vue+echarts画甘特图

基于echarts的项目甘特图

在vue项目中使用echarts制作3d柱状图

甘特图[javascript甘特图,甘特图组件,vue甘特图,vue Gantt图表,响应式甘特图,项目经理,vue项目]

echarts vue 甘特图实现

关于ECharts甘特图的实现