chart-option.js

chartOption: {

            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                show: false,
            },
            grid: {
                // top: 60,
                top: 0,
                left: 60,
                right: 60,
                // bottom: 30,
                bottom: 0,
            },
            dataZoom: {
                show: false,
            },
            xAxis: [
                {
                    type: 'category',
                    data: (function () {
                        let now = new Date(0);
                        let res = [];
                        let len = 5 * 60 * 200; // 5 * 60 * 200 
                        while (len--) {
                            // res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
                            // res.push(now.toUTCString().replace(/^\D*/, ''));
                            res.push(now.toISOString().slice(11).slice(0, -5));
                            // now = new Date(now);
                            now.setMilliseconds(now.getMilliseconds() + 5);
                        }
                        return res;
                    })()
                }
            ],
            yAxis: [
                // {
                //     type: 'value',
                //     scale: true,
                // },
                {
                    type: 'value',
                    splitNumber: 3,
                    name: 'Y-Axis',
                    nameLocation: 'middle',
                    nameGap: 50,
                    splitLine: {
                        show: false
                    }
                },
            ],
            series: [
                {
                    name: 'something',
                    type: 'line',
                    animationEasing: 'elasticOut',
                    animationDelay: function (idx) {
                        return idx * 10;
                    },
                    animationDelayUpdate: function (idx) {
                        return idx * 10;
                    },
                    data: (function () {
                        let res = [];
                        let len = 5 * 60 * 200; // 5 * 60 * 200 
                        while (len--) {
                            res.push(Math.sin(len / (10 * 200)) * 100 + 150);
                        }
                        return res;
                    })()
                },
            ]
        }

mark-area

// series[i]-pie.markArea.label.backgroundColor
// series[i]-bar.markArea.label.backgroundColor


option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'randomx', 
            type: 'bar', 
            markArea: { 
                itemStyle: {
                    borderType: 'dashed',
                    normal: { color: 'red' },
                }, 
                data: [
                    [
        {
            name: 'Mark area between two points in data coordiantes',
            coord: [10, 20]
        },
        {
            coord: [20, 30]
        }
    ]
                ],
            }
        }, 
        {
            name:'randomx', 
            type: 'bar', 
            markArea: { 
                itemStyle: { 
                    normal: { color: 'blue' },
                }, 
                data: [
                    [
                        { xAxis: 1 }, 
                        { xAxis: 2 }
                    ], 
                ]
            }
        },
        {
            name:'randomx', 
            type: 'bar', 
            markArea: { 
                itemStyle: { 
                    normal: { color: 'yellow' },
                }, 
                data: [
                    [
                        { xAxis: 2 }, 
                        { xAxis: 6 }
                    ], 
                ]
            }
        },
        
        {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};