Echarts在线免费图表

 
            let date_timestr = +new Date();  //任务开始的最小值我这里就用的目前时间
date_timestr = +new Date('2022/10/19');
let data = [
    {
        opacity: [
            1000 * 60 * 60 * 24 * 0,
            1000 * 60 * 60 * 24 * 4,
            1000 * 60 * 60 * 24 * 2,
        ],
        high: [
            1000 * 60 * 60 * 24 * 10,
            1000 * 60 * 60 * 24 * 10,
            1000 * 60 * 60 * 24 * 100,
        ]
    },
    {
        opacity: [
            1000 * 60 * 60 * 24 * 2.2,
            1000 * 60 * 60 * 24 * 1,
            1000 * 60 * 60 * 24 * 2,
        ],
        high: [
            1000 * 60 * 60 * 24 * 1,
            1000 * 60 * 60 * 24 * 1.6,
            1000 * 60 * 60 * 24 * .9,
        ]
    },
    {
        opacity: [
            1000 * 60 * 60 * 24 * 7.2,
            1000 * 60 * 60 * 24 * 1,
            1000 * 60 * 60 * 24 * 2,
        ],
        high: [
            1000 * 60 * 60 * 24 * 10,
            1000 * 60 * 60 * 24 * 1.6,
            1000 * 60 * 60 * 24 * .9,
        ]
    },
];
let barGap = '10%';
let barWidth = 24;
let itemStyleDetail = {
    '0': {
        color: '#aad26d'
    },
    '1': {
        color: '#989896'
    },
    '2': {
        color: '#fb6846'
    }
}
let seriesGroup = data.map((item, index) => {
    let seriesGroup_opacity = {
        //开始空白（隐藏部分需要在后面加0）tooltip formatter内有判断需要修改注意
        name: '计划时间0' + index,
        type: 'bar',
        stack: 'total',   //重点
        label: {
            show: false
        },
        itemStyle: {
            opacity: 0,
        },
        emphasis: {
            focus: 'series'
        },
        barWidth: barWidth,
        barGap: barGap,
        data: item.opacity,
        tooltip: {  //隐藏这个的鼠标悬浮
            show: false,
        },
        emphasis: {      //禁用鼠标悬浮选中的一系列高亮没选中的低亮
            disabled: true
        }
    }
    // 不一样的颜色修改
    let newHigh = item.high.map((highItem, hindex) => {
        let item = {
            value: highItem,
            itemStyle: itemStyleDetail[hindex]
        }
        return item;
    })
    let seriesGroup_high = {
        name: '计划时间' + index,
        type: 'bar',
        stack: 'total',   //重点
        label: {
            show: false
        },
        emphasis: {
            focus: 'series'
        },
        barWidth: barWidth,
        barGap: barGap,
        data: newHigh,
        emphasis: {      //禁用鼠标悬浮选中的一系列高亮没选中的低亮
            disabled: true
        }
    }
    let seriesGroup = [seriesGroup_opacity, seriesGroup_high];
    return seriesGroup;
})
let seriesData = seriesGroup.flat();
console.log(seriesData);
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: '6%',
    },
    // dataZoom: {
    //     show: true, // 为true 滚动条出现
    //     realtime: true,
    //     type: 'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
    //     height: 20, // 表示滚动条的高度，也就是粗细
    //     start: 0, // 表示默认展示20%～80%这一段。
    //     end: 10
    // },
    tooltip: {
        formatter: function (fParam) {
            let seriesIndex = fParam.seriesIndex;
            let dataIndex = fParam.dataIndex;
            console.log(seriesIndex, dataIndex)
            // console.log(option.series[seriesIndex - 1].data[dataIndex])
            let opacityTime = 0;
            let hightTime = 0;
            for (let i = seriesIndex; i--; i > 0) {
                //series 的关系；1个隐藏用的 1个显示用的 [隐藏，显示，隐藏，显示];
                // 对2取余那大的就是隐藏的
                if (i % 2 == 0) {
                    opacityTime += option.series[i].data[dataIndex];
                } else {
                    hightTime += option.series[i].data[dataIndex].value;
                }
            }
            let startTime = formatterTime(date_timestr + opacityTime + hightTime);
            let endTime = formatterTime(date_timestr + fParam.value + opacityTime + hightTime);
            return startTime + '—' + endTime;
        }
    },
    xAxis: {
        type: 'value',
        minInterval: 1000 * 60 * 60 * 24,       //最小轴线分割 一天的的值 如果是小时自行修改
        // 此处可
        // 最大的用于限制x多刻度线的一刻度值 这里8天一刻度；其它的都可以多了如果要细致到小时等等自行修改
        // 如果数据是天的且想要精确到一天甚至更小推荐添加滚动条
        // maxInterval: 1000 * 60 * 60 * 24 * 1,   //最大轴线分割 一天的的值 如果是小时自行修改
        maxInterval: 1000 * 60 * 60 * 24 * 10,   //最大轴线分割 一天的的值 如果是小时自行修改
        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,
        },
    },
    series: seriesData
};