echarts 折线图时间段展示，日期缺失，前端进行数据填充以及去重操作

最新推荐文章于 2024-07-29 19:53:51 发布

zxmin1302

最新推荐文章于 2024-07-29 19:53:51 发布

阅读量1.5w

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/zxmin1302/article/details/85329023

版权

本文介绍了如何处理Echarts折线图在显示时间段时遇到的日期缺失问题，通过前端进行数据填充和去重操作，确保图表的完整性和准确性。详细步骤包括时间段的处理以及最终的Echarts展示效果。相关代码可在GitHub上查阅。

摘要由CSDN通过智能技术生成

    //数据处理
    //数据处理
    function showData(datashow,timeData){
        var data1 = new Array(), //交易指数
            data2 = new Array(), //交易增长指数
            data3 = new Array(), //支付转化指数
            data4 = new Array(), //流量指数
            data5 = new Array(); //搜索人气
        //获取总额    
        for(let j=0;j<timeData.length;j++){
            for(let i=0;i<datashow.length;i++){
                if(timeData[j] == datashow[i].data_date){
                    data1.push({'time':timeData[j],value:datashow[i].trade_index?datashow[i].trade_index:0}); //交易指数
                    data2.push({'time':timeData[j],value:datashow[i].trade_index_percent?datashow[i].trade_index_percent:0}); //交易增长指数
                    data3.push({'time':timeData[j],value:datashow[i].pay_rate_index?datashow[i].pay_rate_index:0}); //支付转化指数
                    data4.push({'time':timeData[j],value:datashow[i].uv_index?datashow[i].uv_index:0}); //流量指数
                    data5.push({'time':timeData[j],value:datashow[i].pvuv_hits?datashow[i].pvuv_hits:0}); //搜索人气
                }
            }
            data1.push({'time':timeData[j],value:0});
            data2.push({'time':timeData[j],value