echarts时间轴；计划时间实际时间

最近遇到一个图表需要展示任务的计划时间和实际时间
常用echarts的大佬知道这是一个xy轴刻度对应两条柱子的图；
但是由于多个任务(刻度)开始的时间不一致可能不在0开始（多任务柱子开始位置）

需要展示两条柱子

let option = {
        ...
        series:[
            {
                name: '计划时间',
                type: 'bar',
                data:[...]
            }，
            {
                name: '实际时间',
                type: 'bar',
                data:[...]
            }
        ]
        ...
    }

如上的option加上数据渲染出的如图

处理开始日期（值）不一样问题

开始日期不一样的（多个任务；任务一10月1日-10月10日；任务二10月2日开始）两个任务的开始位置是不一样的
我想到是用堆叠柱状图把开始日期空白的部分隐藏掉

 let option = {
        ...
        series:[
        
            //用于开始位置空白的柱子要注意堆叠图的数组位置在前渲染时在前
            {
                name: '计划时间0',
                type: 'bar',
                stack: 'total1',     //堆叠属性；计划时间的这里用的total1
                data:[...],
                label: {
                    show: false
                },
                itemStyle: {    //隐藏柱子
                    opacity: 0,
                },
            }，
            {
                name: '计划时间',
                type: 'bar',
                stack: 'total1',
                data:[...]
            }，
            
            //用于开始位置空白的柱子
            {
                name: '实际时间0',
                type: 'bar',
                stack: 'total2',    //堆叠属性；实际时间的这里用的total2
                data:[...],
                label: {
                    show: false
                },
                itemStyle: {      //隐藏柱子
                    opacity: 0,
                },
            }
            {
                name: '实际时间',
                type: 'bar',
                stack: 'total2',     //堆叠属性；实际时间的这里用的total2
                data:[...]
            }
        ]
        ...
    }
   

加上数据渲染可以看到效果如下

处理轴label显示

由于这个图的需求就是展示日期；后期数据可以使用时间戳；
通过时间戳在x或者y轴自定义渲染刻度

数据格式我这里是这样的

    let date_timestr = +new Date();   
    //为什么有这个；这个作用于xy轴的自定义显示；
    //因为echarts是从0开始的如果设置最小值为数据内的最小值；
    //就会发现自定义x轴显示日期跨度非常之大不合理
    // 这个变量在我们自定义是拼接格式化就好；
    // 这个值是所有数据中最小的日期的时间戳


    // 数据部分没有前面的年月 相当于只有任务的开始的天和结束的天；小时等等应该都可以吧
    // 计划时间
    let opacity_Data = [            //隐藏部分的；开始时间的 (几天几小时)
        1000 * 60 * 60 * 24 * 2,
        1000 * 60 * 60 * 24 * 4,
        1000 * 60 * 60 * 24 * 2,
        1000 * 60 * 60 * 24 * 10,
    ]
    let high_Data = [               //高亮部分的；结束时间的
        1000 * 60 * 60 * 24 * 5,
        1000 * 60 * 60 * 24 * 10,
        1000 * 60 * 60 * 24 * 100,
        1000 * 60 * 60 * 24 * 50,
    ]

    // 实际时间的
    let opacity_Data2 = [
        1000 * 60 * 60 * 24 * 2,
        1000 * 60 * 60 * 24 * 4,
        1000 * 60 * 60 * 24 * 2,
        1000 * 60 * 60 * 24 * 10,
    ]
    let high_Data2 = [
        1000 * 60 * 60 * 24 * 10,
        1000 * 60 * 60 * 24 * 7,
        1000 * 60 * 60 * 24 * 10,
        1000 * 60 * 60 * 24 * 55,
    ]

xAxis: {
    type: 'value',
    minInterval: 1000 * 60 * 60 * 24,       //最小轴线分割 一天的的值 如果是小时自行修改
    // 此处可
    // 最大的用于限制x多刻度线的一刻度值 这里8天一刻度；其它的都可以多了如果要细致到小时等等自行修改
    // 如果数据是天的且想要精确到一天甚至更小推荐添加滚动条
    maxInterval: 1000 * 60 * 60 * 24 * 8,   //最大轴线分割 一天的的值 如果是小时自行修改
    axisLabel: {
        fontSize: 12,
        fontWeight: 600,
        color: '#888',
        formatter: function (val, index) {
            let date_ = new Date(val + date_timestr);
            let label_ = `${date_.getFullYear()}/${date_.getMonth() + 1}/${date_.getDate()}`;
            return label_;
        },
        // maxInterval 的设置刻度较多旋转显示
        rotate: 20
    },
    splitLine: {
        show: true,
        lineStyle: {
            color: '#eee',
        },
    },
    axisLine: {
        show: false
    }
},

完整代码

    let date_timestr = +new Date();  //任务开始的最小值我这里就用的目前时间
    date_timestr = +new Date('2022/10/19');
    let opacity_Data = [            //隐藏部分的；开始时间的 (几天几小时)
        1000 * 60 * 60 * 24 * 2,
        1000 * 60 * 60 * 24 * 4,
        1000 * 60 * 60 * 24 * 2,
        1000 * 60 * 60 * 24 * 10,
    ]
    let high_Data = [               //高亮部分的；结束时间的
        1000 * 60 * 60 * 24 * 5,
        1000 * 60 * 60 * 24 * 10,
        1000 * 60 * 60 * 24 * 100,
        1000 * 60 * 60 * 24 * 50,
    ]

    let opacity_Data2 = [
        1000 * 60 * 60 * 24 * 2,
        1000 * 60 * 60 * 24 * 4,
        1000 * 60 * 60 * 24 * 2,
        1000 * 60 * 60 * 24 * 10,
    ]
    let high_Data2 = [
        1000 * 60 * 60 * 24 * 10,
        1000 * 60 * 60 * 24 * 7,
        1000 * 60 * 60 * 24 * 10,
        1000 * 60 * 60 * 24 * 55,
    ]
    const formatterTime = (d) => {
        let d_ = new Date(d);
        return `${d_.getFullYear()}/${d_.getMonth() + 1}/${d_.getDate()} ${d_.getHours()}:${d_.getMinutes()}:${d_.getSeconds()}`
    }
    let option = {
        grid: {
            containLabel: true,
            right: '10%',
            left: '5%',
            bottom: '6%',
            top: '10%',
        },
        legend: {
            top: "5%",
            data: ['计划时间', '实际时间'],
            selectedMode: false,        //这里禁止点击；需要的自己写事件使用filter动态setOption
            textStyle: {
                fontSize: 12,
                fontWeight: 600
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                // Use axis to trigger tooltip
                type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            },
            formatter: function (ToolFormatterParam) {
                let labels = `<div>
                    <b>${ToolFormatterParam[0].name}</b>
                </div>`;
                ToolFormatterParam.map((item) => {
                    let isSeriesNameZero = item.seriesName.includes('0');
                    if (!isSeriesNameZero) {
                        let startTime = ToolFormatterParam.filter((item2) => {
                            if (item2.seriesName.includes((item.seriesName + '0'))) {
                                return item2
                            }
                        })[0].value + date_timestr;
                        let endTime = null;
                        endTime = date_timestr + item.value;
                        let label_item = `<div>${item.seriesName}：${formatterTime(startTime)} 至 ${formatterTime(endTime)}</div>`
                        labels += label_item
                    }
                })
                return labels;
            }
        },
        xAxis: {
            type: 'value',
            minInterval: 1000 * 60 * 60 * 24,       //最小轴线分割 一天的的值 如果是小时自行修改
            // 此处可
            // 最大的用于限制x多刻度线的一刻度值 这里8天一刻度；其它的都可以多了如果要细致到小时等等自行修改
            // 如果数据是天的且想要精确到一天甚至更小推荐添加滚动条
            maxInterval: 1000 * 60 * 60 * 24 * 8,   //最大轴线分割 一天的的值 如果是小时自行修改
            axisLabel: {
                fontSize: 12,
                fontWeight: 600,
                color: '#888',
                formatter: function (val, index) {
                    let date_ = new Date(val + date_timestr);
                    let label_ = `${date_.getFullYear()}/${date_.getMonth() + 1}/${date_.getDate()}`;
                    return label_;
                },
                // maxInterval 的设置刻度较多旋转显示
                rotate: 20
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#eee',
                },
            },
            axisLine: {
                show: false
            }
        },
        yAxis: {
            type: 'category',
            inverse: true,
            data: ['收购痛讯', '亿个小目标', '下一个小目标', '周游世界'],
            axisLabel: {
                color: '#333',
                fontSize: 12,
                fontWeight: 600
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
        },
        // k = 0,1 隐藏的；k=1，2高亮的
        color: [
            '#fff',
            {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                    {
                        offset: 0,
                        color: '#4297FE', // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: '#007BFF', // 0% 处的颜色
                    },
                ],
                global: false, // 缺省为 false
            },
            '#fff',
            {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                    {
                        offset: 0,
                        color: '#5198FF', // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: '#8BF8FE', // 0% 处的颜色
                    },
                ],
                global: false, // 缺省为 false
            }
        ],
        series: [
            {
                //开始空白（隐藏部分需要在后面加0）tooltip formatter内有判断需要修改注意
                name: '计划时间0',
                type: 'bar',
                stack: 'total',
                label: {
                    show: false
                },
                itemStyle: {
                    opacity: 0,
                },
                emphasis: {
                    focus: 'series'
                },
                barWidth: 24,
                barGap: '10%',
                data: opacity_Data
            },
            {
                name: '计划时间',
                type: 'bar',
                stack: 'total',
                label: {
                    show: false
                },
                emphasis: {
                    focus: 'series'
                },
                barWidth: 24,
                barGap: '10%',
                itemStyle: {
                    borderRadius: [6, 20, 20, 6]
                },
                data: high_Data
            },


            {
                name: '实际时间0',
                type: 'bar',
                stack: 'total2',
                label: {
                    show: false,
                },
                itemStyle: {
                    opacity: 0
                },
                barWidth: 24,
                emphasis: {
                    focus: 'series'
                },
                barGap: '10%',
                data: opacity_Data2
            },
            {
                name: '实际时间',
                type: 'bar',
                stack: 'total2',
                label: {
                    show: false
                },
                emphasis: {
                    focus: 'series'
                },
                barWidth: 24,
                barGap: '10%',
                itemStyle: {
                    borderRadius: [6, 20, 20, 6]
                },
                data: high_Data2
            },
        ],
    };

最终效果如图

echarts也是有xAxis，yAxis type:"time"的配置可以支持日期;

因为使用版本是v5.4.1的原因堆叠没有展示正确


同样代码3.x版本是这样的可以正常展示堆叠的