echarts + vue 实现项目进度不同颜色柱形甘特图

template 里代码

<div class="demo><div class="chart-title"><i class="completed">已完成</i><i class="timeout">超时</i><i class="to-be-completed">待完成</i></div><div id="gantt-chart"></div>
</div>
注意： gantt-chart 一定要设置宽高，否则图无法显示

script代码

import echarts from 'echarts' // 注意echarts版本，高版本不支持透明度rgba,以下代码版本为3.8.5
export default {name: 'project-progress',data () {return {ganttChart: null,chartData: [{name: '可熊-库内',start: '2020-02-10',end: '2020-02-15',status: 1 // 1 待完成 2 已完成 3 超时},{name: '游梦-退仓退供接收-计划',start: '2020-02-03',end: '2020-02-05',status: 2},{name: '李坤-退货出库单页-计划',start: '2020-02-02',end: '2020-02-09',status: 3},{name: '苍岳-合批+合波+占用-计划',start: '2020-02-03',end: '2020-02-17',status: 1},{name: '善博-拣货单生成-计划',start: '2020-02-03',end: '2020-02-17',status: 1},{name: '唐汇波-拣货单获取-实操',start: '2020-02-04',end: '2020-02-05',status: 3},{name: '唐汇波-拣货单批量提交-实操',start: '2020-02-05',end: '2020-02-17',status: 3},{name: '宸斐-发运',start: '2020-02-03',end: '2020-02-10',status: 2},{name: '联调',start: '2020-02-17',end: '2020-02-23',status: 2},{name: '测试',start: '2020-02-24',end: '2020-03-10',status: 1},{name: '灰度',start: '2020-02-29',end: '2020-03-11',status: 1},{name: '发布',start: '2020-03-10',end: '2020-03-12',status: 1}]}},mounted () {window.addEventListener('resize',window._.debounce(() => {this.resizeCharts()}, 100))this.$nextTick(() => {this.initChart()})},methods: {initChart () {this.ganttChart = echarts.init(document.getElementById('gantt-chart'))const _self = thisconst chartOption = {title: {text: '项目进度表',left: 10},grid: {containLabel: true,left: 20},xAxis: {type: 'time'},yAxis: {data: this.chartData.map(item => item.name)},tooltip: {trigger: 'axis',formatter: function (params) {// var res = params[0].name + '</br>'var res = '节点周期:' + '</br>'var date0 = params[0].datavar date1 = params[1].data// date0 = date0.getFullYear() + '-' + (date0.getMonth() + 1) + '-' + date0.getDate()// date1 = date1.getFullYear() + '-' + (date1.getMonth() + 1) + '-' + date1.getDate()res += date0 + '-' + date1 + '</br>'// console.log(params[0])return res}},series: [{name: '实际开始时间',type: 'bar',stack: 'timeout',itemStyle: {normal: {color: 'rgba(0,0,0,0)'}},lineStyle: {},data: this.chartData.map(item => item.start)},{name: '超时',type: 'bar',stack: 'timeout',barWidth: 14, // 柱宽度itemStyle: {normal: {barBorderRadius: 25, // 柱圆角color: function (params) {let color = ''// var colorList = ['#3E84E9','#c23531','#d4cece']; // 超时, 已完成, 待完成var item = _self.chartData.filter(item => { return item.name === params.name })var status = item && item[0] && item[0].status// console.log('====', status)color = status === 1 ? '#d4cece' : (status === 2 ? '#3E84E9' : '#c23531')return color}}},data: this.chartData.map(item => item.end)}]}this.ganttChart.setOption(chartOption) // 第二个参数：true: 是否和之前设置的option进行合并，true为不合并，默认为false:合并this.resizeCharts()},resizeCharts () {this.ganttChart && this.ganttChart.resize()},destroyed () {window.removeEventListener('resize', this.resizeCharts) // 销毁事件}
}

样式代码

<style lang="scss" scoped>
.demo {padding: 5px 15px;position: relative;.chart-title {position: absolute;transform: translateX(-50%);left: 50%;i {font-style: normal;padding-right: 20px;}i:before {content: '';display: inline-block;width: 30px;height: 15px;border-radius: 5px;vertical-align: bottom;margin-right: 3px;background-color: #3e84e9;}i.to-be-completed:before {background-color: #d4cece;}i.timeout:before {background-color: #c23531;}}#gantt-chart {margin: 1em auto;height: 500px;width: 100%;}
}
</style>

echarts + vue 实现项目进度不同颜色柱形甘特图相关推荐

计算机电子表格三维簇状柱形图怎么设置,Excel中怎么制作柱形对比图【excel表格数据生成柱形图】...
怎么创建Excel簇状柱形图并设置图表的格第一步:插入---图表----选择"簇状柱形图" 在图表区域右击---选择数据-----点击" "号-----选择系 ...
一文搞定dhtmlx-gantt调度界面，vue下使用dhtmlxgantt进行项目甘特图模块设计开发（前端界面显示篇（1））
前言: 本文基于在较为成熟完整的项目,进行甘特图模块开发的内容.并不涉及node相关下载.安装及vue的相关使用. 1 需安装的模块 npm install dhtmlx-gantt npm inst ...
vue3+echarts绘制横向柱形进度图
样式入上图,这个真是费劲啊(可能由于本人较菜),图片已经转成svg,如果有本地的图片可按照注释方式去引入 option = {// backgroundColor: 'transparent',gri ...
echarts入门常用图表（柱状堆叠图）
echarts堆叠图柱状图的核心代码是在series中设置stack,拿官网的示例来讲,stack里内容相同的为一组堆叠效果图步骤步骤一:引入echarts.js <script src= ...
甘特图——轻松搞定项目进度管理
大家可能都有过这样的经历和感受,做计划时信誓旦旦,却总是半途而废:想提升自己,一段时间后却发现自己还在原地徘徊:想高效完成工作及生活中的各种目标,却总是不得其法:这是因为你不懂目标管理,那么,你就有必 ...
甘特图：项目进度管理，理想的控制工具
甘特图在项目管理中被广泛应用.它体现一个既简单又基本的控制原理--从计划中选取关键内容并予以密切注视.这样一个简单.清晰.明了的图表,给项目的执行带来了方便.项目管理工具进度猫帮助项目经理对项目进行计 ...
甘特图让项目进度一目了然
甘特图在项目管理中被广泛应用.它体现一个既简单又基本的控制原理--从计划中选取关键内容并予以密切注视.这样一个简单.清晰.明了图表,给项目的执行带来了方便.项目管理工具进度猫帮助项目经理对项目进行计划 ...
matplotlib画柱状对比图
背景有两组数据,用柱状图表示出两组数据之间的差异代码 import numpy as np from matplotlib import pyplot as plt ''' 柱形对比图共有11组 ...
3款最好用的甘特图软件有哪些？
1.worktile 主要做的是项目,系统分为:消息,项目,日历,网盘,应用,应用里包括简报,考勤,审批,销售,门户,公告,考核等.项目里面有一点非常好,可以置顶处理,个人觉得这个点子很好,首页清晰明 ...

echarts + vue 实现项目进度不同颜色柱形甘特图

template 里代码

script代码

样式代码

echarts + vue 实现项目进度不同颜色柱形甘特图相关推荐

最新文章

热门文章