echarts2实现双柱的甘特图_echarts 甘特图 demo

回溯项目还可以,不完善还没有进度百分比先保存着

project

// 绘制图表。

var opt = {

title: {

text: '工作流甘特图'

},

legend: {

data: ['计划完成时间', '实际完成时间']

},

xAxis: {

type: 'time',

position: "top"

},

yAxis: {

type: "category",

data: ['测试', '开发', '设计', '总进度']

},

tooltip: {

trigger: 'axis',

formatter: function(params) {

var res = params[0].name + ""

var date0 = params[0].data;

var date1 = params[1].data;

var date2 = params[2].data;

date0 = date0.getFullYear() + "-" + (date0.getMonth() + 1) + "-" + date0.getDate();

date1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate();

date2 = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();

res += params[0].seriesName + ":" + date0 + ""

res += params[1].seriesName + ":" + date1 + ""

res += params[2].seriesName + ":" + date2 + ""

console.log(params[0]);

return res;

}

},

series: [

{

name: '计划开始时间',

type: 'bar',

stack: '总量',

itemStyle: {

normal: {

color: 'rgba(0,0,0,0)'

}

},

data: [

new Date("2017/09/23"),

new Date("2017/09/10"),

new Date("2017/09/1"),

new Date("2017/09/1"),

]

},

{

name: '计划完成时间',

type: 'bar',

stack: '总量',

data: [

new Date("2017/09/31"),

new Date("2017/09/20"),

new Date("2017/09/15"),

new Date("2017/09/30"),

]

}, {

name: '实际完成时间',

type: 'bar',

stack: '总量',

data: [

new Date("2017/09/30"),

new Date("2017/09/23"),

new Date("2017/09/14"),

new Date("2017/09/30"),

]

}

]

};

echarts.init(document.getElementById('main')).setOption(opt);

效果图如下

image.png

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页