echarts实现河流图x轴完整展示日期

278 阅读1分钟

官网的案例展示的为 日

image.png

想实现的效果图

image.png

实现方式 xAxis配置项写一个 formatter函数就可以了

代码如下

// xAxis配置项写一个 formatter函数就可以了
    xAxis: {  
        type: 'time',  
        // 如果需要设置X轴的范围,可以使用min和max属性  
        // min: 'dataMin', // 默认为数据中的最小值  
        // max: 'dataMax', // 默认为数据中的最大值  
        axisLabel: {  
            // 设置日期显示的格式  
            formatter: function (value, index) {  
                // 使用ECharts提供的formatTime函数来格式化日期  
                // 这里设置格式为'yyyy-MM-dd'  
                return echarts.format.formatTime('yyyy-MM-dd', value);  
            },  
            // 其他axisLabel配置项...  
        },  
        // 其他xAxis配置项...  
    },