echarts 展示月份，放大可以精确到 时、分、秒

效果图

代码

var data = [
    {name:'"2024-07-05 18:00:29"', value:["2024-07-05 18:10:29", 90]},
    {name:'2024-07-04 18:05:29', value:["2024-07-04 18:20:29", 89]},
    {name:'2024-07-03 18:06:29', value:["2024-07-03 18:30:29", 89.5]},
    {name:'2024-07-03 12:09:29', value:["2024-07-03 12:40:29", 56]},
    {name:'2024-07-02 18:12:29', value:["2024-07-02 18:50:29", 57.5]},
    {name:'2024-07-02 18:22:29', value:["2024-07-02 18:10:29", 60.5]},
    {name:'2024-07-02 18:32:29', value:["2024-07-02 18:20:29", 98.5]},
    {name:'2024-07-02 18:44:29', value:["2024-07-02 18:30:29", 98.5]},
    {name:'2024-07-02 18:60:29', value:["2024-07-02 18:40:29", 54.5]},
    {name:'2024-07-02 18:70:29', value:["2024-07-02 18:44:29", 60.5]},
    {name:'2024-07-02 18:80:29', value:["2024-07-02 18:55:29", 90.5]},
    {name:'2024-07-01 18:90:29', value:["2024-07-01 18:59:29", 89]}
];
//时间显示范围
var anchor = [
    {name:'2024-01', value:['2024-01', 0]},
    {name:'2024-12', value:['2024-12', 0]}
];
    // 指定图表的配置项和数据
    option = {
        backgroundColor: '#fff',//背景色
        grid: {
            left: 35,
            right: 20,
            top: 10,
            bottom:40,
            show:false
        },
    
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow', // 鼠标移动到轴的时候显示阴影
            }
        },
        dataZoom: [
            {
                type: 'inside', // 缩放
                // start: 0,
                // end: 20
            },
        ],
        xAxis: {
            type:"time",
            splitNumber: 10,
            axisLabel: {
                // rotate: 60,
                textStyle: {
                fontSize: 8
            }
        }
        },
        yAxis: {
            min: 35
        },
        visualMap: { // 设置区域的颜色
            top: 10,
            right: 10,
            pieces: [{
                gte: 0,
                lte: 90,
                color: '#4D74FA'
            },{
                gt: 90,
                lte: 100,
                color: '#FA578B'
            }],
            outOfRange: {
                color: '#FA578B'
            }
            // show : false
        },
        series: [{
            data: data,
            markLine: {
                silent: true,
                data: [{
                    yAxis: 90 // 基准点
                }]
            },
            type: 'line',
            smooth: true,
           
            // areaStyle: { // 基准线
            //     normal: {
            //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //             offset: 0,
            //             color: 'rgb(255, 158, 68)'
            //         }, {
            //             offset: 1,
            //             color: '#fff'
            //         }])
            //     }
            // },
        },
        {
            name:'.anchor',
            type:'line',
            showSymbol:false,
            data:anchor,
            itemStyle:{normal:{opacity:0}}, //不绘制该线条
            lineStyle:{normal:{opacity:0}}
        }]
    };