后台json按条件分类，并实现echart柱状图

最新推荐文章于 2023-10-23 13:33:21 发布

请叫我爱你一万年

最新推荐文章于 2023-10-23 13:33:21 发布

阅读量813

点赞数

分类专栏：业务

本文链接：https://blog.csdn.net/qq_32339477/article/details/88655900

版权

本文档介绍如何根据后端返回的JSON数据，通过Echarts实现柱状图展示。主要内容包括理解数据结构，按照日期进行横坐标分类，以及根据颜色值生成纵坐标，最终形成柱状图的各个元素。代码示例展示了具体实现过程。

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

在最近的业务场景下需要将后台返回的json数据实现在echart柱状图上，看文档，横坐标如图：

在这里插入图片描述
然而后台返回的数据格式如图：

我们要按照日期为横坐标，每个颜色为纵坐标，最后按照每个种类的颜色生成数组；横坐标简单；就是数组去重，最后生成日期数组。然而颜色需要按照数组的每一项表示当天的次数；如图最后生成的颜色数组依次为：
直接上代码：

red=[1,0,0,1,1],or=[0,0,1,0,0],ye=[2,1,0,0,0],bl=[1,1,1,2,0];

            var tongji;
            $.post("url",function (res) {
   //后台返回的数据
                tongji=res.datas;
                console.log(tongji);
                var map = {
   },
                    dest = [];
                for(var i = 0; i < tongji.length; i++){
   //将数组按照日期分类生成新的数组
                    var ai = tongji[i];
                    if(!map[ai.time]){
   
                        dest.push