首页 > 其他分享 >js数据处理4

js数据处理4

时间:2022-10-28 17:58:06浏览次数:92  
标签:count 10 data js date 2022 数据处理 type

<template>
  <ModuleBox2
    title="数据趋势图"
    bgType="2"
    :cityShow="true"
    moduleType="sjqs"
    :styleObj="styleObj"
  >
    <div class="echarts-box">
      <lineMore2
        :isSmooth="true"
        :grid="gridd"
        :lineColor="lineColord"
        :dataList="dataListd"
        v-if="!dataListdshow <= 0"
      ></lineMore2>
      <div class="no-data" v-if="dataListdshow <= 0">暂无数据</div>
    </div>
  </ModuleBox2>
</template>

<script>
import lineMore2 from "@/components/echarts/lineMore2.vue";
import ModuleBox2 from "@/components/ModuleBox2.vue";
import { tendency } from "@/api/sentiment";
import { showTime } from "@/utils/index.js";
export default {
  components: { ModuleBox2, lineMore2 },
  props: {},
  data() {
    return {
      styleObj: {
        transform: "scale(1.5)",
        width: "380px",
        height: "420px",
      },
      gridd: {
        left: 45,
        right: 20,
        top: 30,
        bottom: "50%",
      },
      lineColord: [
        "#FF0055",
        "#0080FF",
        "#FF6F00",
        "#51E395",
        "#FFB313",
        "#00F6FE",
        "#FF8C8B",
        "#DCFB60",
        "#A27DD7",
        "#FE3E32",
      ],
      dataListd: [
        // [
        //   "抖音",
        //   "微博",
        //   "论坛",
        //   "微信",
        //   "新闻",
        //   "电视",
        //   "政府",
        //   "电视1",
        //   "政府1",
        //   "抖音1",
        // ],
        // ["10.03", "10.04", "10.05", "10.06", "10.07", "10.08", "10.09"],
        // [
        //   [1, 22, 22, 110, 101, 222, 100, 101, 222, 119],
        //   [2, 33, 22, 120, 131, 122, 100, 110, 101, 222],
        //   [3, 10, 42, 110, 101, 222, 100, 222, 30, 10],
        //   [4, 10, 32, 221, 130, 122, 90, 10, 42, 80],
        //   [5, 101, 222, 119, 210, 132, 20, 222, 30, 10],
        //   [6, 130, 122, 110, 101, 222, 30, 10, 42, 80],
        //   [7, 210, 132, 41, 10, 42, 80, 222, 30, 10],
        //   [8, 10, 42, 110, 101, 222, 100, 222, 30, 10],
        //   [9, 10, 32, 221, 130, 122, 90, 10, 42, 80],
        //   [10, 101, 222, 119, 210, 132, 20, 222, 30, 10],
        // ],
      ],
      dataListdshow: false,
      xxarr2: [],
      xxarr1: [],
    };
  },
  computed: {},
  watch: {},
  mounted() {},
  created() {
    this._tendency();
  },
  methods: {
    _tendency() {
      tendency({
        beginDate: showTime().startTime,
        endDate: showTime().endTime,
      }).then((res) => {
        console.log("res", res);
        if (res.code == "00000") {
          let d = res.data;
          if (d && d.length > 0) {
            let typeList = []; //类型
            let dateList = []; //日期
            let valData = []; //值
            d.map((item) => {
              typeList.push(item.data_type);
              dateList.push(item.date);
              return { typeList, dateList };
            });
            let typeListArr = typeList.filter((item, index) => {
              return typeList.indexOf(item) === index;
            });
            let dateListArr = dateList.filter((item, index) => {
              return dateList.indexOf(item) === index;
            });
            let cc = [];
            let ddcc = [];
            typeListArr.forEach((item) => {
              let xxarr = [];
              dateListArr.forEach((item2) => {
                // let xxxx = d.find((item3, index, arr) => {
                //   return item3.data_type === item && item3.date === item2;
                // });
                let xxxx = {};

                // d.map((item3) => {
                //   //筛选出对应的值
                //   if (item3.data_type === item && item3.date === item2) {
                //     xxxx = item3;
                //   }
                // });
                for (let i = 0; i < d.length; i++) {
                  //筛选出对应的值
                  if (d[i].data_type === item && d[i].date === item2) {
                    xxxx = d[i];
                    // 1+2 = 所有 同一天的所有type 1 + 2
                    if (
                      (d[i].type === 1 || d[i].type === 2) &&
                      d[i].date === item2
                    ) {
                      ddcc.push(d[i]);
                      let arr2 = [];
                      ddcc.forEach((item4) => {
                        const exist = arr2.find((r) => r.date === item4.date);
                        if (exist) exist.count += item4.count;
                        else
                          arr2.push({ date: item4.date, count: item4.count });
                      });
                      let xxarr2 = [];
                      if (arr2 && arr2.length > 0) {
                        arr2.map((item5) => {
                          xxarr2.push(item5.count);
                        });
                      }
                      this.xxarr2 = xxarr2;
                      console.log("111", xxarr2);
                    }
                    //所有1 =  ota //同一天的type 1
                    if (d[i].type === 1 && d[i].date === item2) {
                      cc.push(d[i]);
                      let arr1 = [];
                      cc.forEach((item4) => {
                        const exist = arr1.find((r) => r.date === item4.date);
                        if (exist) exist.count += item4.count;
                        else
                          arr1.push({ date: item4.date, count: item4.count });
                      });
                      let xxarr1 = [];
                      if (arr1 && arr1.length > 0) {
                        arr1.map((item5) => {
                          xxarr1.push(item5.count);
                        });
                      }
                      this.xxarr1 = xxarr1;
                    }
                    //原始数据
                    if (xxxx) {
                      xxarr.push(xxxx.count);
                    } else {
                      xxarr.push(0);
                    }
                  }
                }
              });
              valData.push(xxarr);
            });
            let aa = ["OTA", "所有"];
            let ccc = [this.xxarr1, this.xxarr2];
            this.dataListd = [
              typeListArr.concat(aa),
              dateListArr,
              valData.concat(ccc),
            ];
            // this.dataListd = [typeListArr, dateListArr, valData];
            this.dataListdshow = true;
          } else {
            this.dataListdshow = false;
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.echarts-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  &.echarts-box2 {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
{
    "success": true, 
    "code": "00000", 
    "desc": "成功", 
    "requestId": "356d1275-dfdc-4b7e-a042-b0d40b28f1d5", 
    "data": [
        {
            "date": "2022-10-22", 
            "data_type": "微博", 
            "type": 2, 
            "count": 0
        }, 
        {
            "date": "2022-10-22", 
            "data_type": "抖音", 
            "type": 2, 
            "count": 0
        }, 
        {
            "date": "2022-10-22", 
            "data_type": "论坛", 
            "type": 2, 
            "count": 0
        }, 
        {
            "date": "2022-10-22", 
            "data_type": "美团", 
            "type": 1, 
            "count": 0
        }, 
        {
            "date": "2022-10-22", 
            "data_type": "携程", 
            "type": 1, 
            "count": 0
        }, 
        {
            "date": "2022-10-22", 
            "data_type": "微信", 
            "type": 2, 
            "count": 0
        }, 
        {
            "date": "2022-10-22", 
            "data_type": "电视", 
            "type": 2, 
            "count": 0
        }, 
        {
            "date": "2022-10-22", 
            "data_type": "政府", 
            "type": 2, 
            "count": 0
        }, 
        {
            "date": "2022-10-22", 
            "data_type": "同程", 
            "type": 1, 
            "count": 0
        }, 
        {
            "date": "2022-10-23", 
            "data_type": "微博", 
            "type": 2, 
            "count": 0
        }, 
        {
            "date": "2022-10-23", 
            "data_type": "抖音", 
            "type": 2, 
            "count": 0
        }, 
        {
            "date": "2022-10-23", 
            "data_type": "论坛", 
            "type": 2, 
            "count": 0
        }, 
        {
            "date": "2022-10-23", 
            "data_type": "美团", 
            "type": 1, 
            "count": 2
        }, 
        {
            "date": "2022-10-23", 
            "data_type": "携程", 
            "type": 1, 
            "count": 3
        }, 
        {
            "date": "2022-10-23", 
            "data_type": "微信", 
            "type": 2, 
            "count": 0
        }, 
        {
            "date": "2022-10-23", 
            "data_type": "电视", 
            "type": 2, 
            "count": 1
        }, 
        {
            "date": "2022-10-23", 
            "data_type": "政府", 
            "type": 2, 
            "count": 0
        }, 
        {
            "date": "2022-10-23", 
            "data_type": "同程", 
            "type": 1, 
            "count": 0
        }, 
        {
            "date": "2022-10-24", 
            "data_type": "微博", 
            "type": 2, 
            "count": 0
        }, 
        {
            "date": "2022-10-24", 
            "data_type": "抖音", 
            "type": 2, 
            "count": 0
        }, 
        {
            "date": "2022-10-24", 
            "data_type": "论坛", 
            "type": 2, 
            "count": 0
        }, 
        {
            "date": "2022-10-24", 
            "data_type": "美团", 
            "type": 1, 
            "count": 2
        }, 
        {
            "date": "2022-10-24", 
            "data_type": "携程", 
            "type": 1, 
            "count": 2
        }, 
        {
            "date": "2022-10-24", 
            "data_type": "微信", 
            "type": 2, 
            "count": 0
        }, 
        {
            "date": "2022-10-24", 
            "data_type": "电视", 
            "type": 2, 
            "count": 2
        }, 
        {
            "date": "2022-10-24", 
            "data_type": "政府", 
            "type": 2, 
            "count": 0
        }, 
        {
            "date": "2022-10-24", 
            "data_type": "同程", 
            "type": 1, 
            "count": 0
        }, 
        {
            "date": "2022-10-25", 
            "data_type": "微博", 
            "type": 2, 
            "count": 0
        }, 
        {
            "date": "2022-10-25", 
            "data_type": "抖音", 
            "type": 2, 
            "count": 0
        }, 
        {
            "date": "2022-10-25", 
            "data_type": "论坛", 
            "type": 2, 
            "count": 0
        }, 
        {
            "date": "2022-10-25", 
            "data_type": "美团", 
            "type": 1, 
            "count": 4
        }, 
        {
            "date": "2022-10-25", 
            "data_type": "携程", 
            "type": 1, 
            "count": 3
        }, 
        {
            "date": "2022-10-25", 
            "data_type": "微信", 
            "type": 2, 
            "count": 0
        }, 
        {
            "date": "2022-10-25", 
            "data_type": "电视", 
            "type": 2, 
            "count": 1
        }, 
        {
            "date": "2022-10-25", 
            "data_type": "政府", 
            "type": 2, 
            "count": 0
        }, 
        {
            "date": "2022-10-25", 
            "data_type": "同程", 
            "type": 1, 
            "count": 0
        }, 
        {
            "date": "2022-10-26", 
            "data_type": "微博", 
            "type": 2, 
            "count": 0
        }, 
        {
            "date": "2022-10-26", 
            "data_type": "抖音", 
            "type": 2, 
            "count": 0
        }, 
        {
            "date": "2022-10-26", 
            "data_type": "论坛", 
            "type": 2, 
            "count": 0
        }, 
        {
            "date": "2022-10-26", 
            "data_type": "美团", 
            "type": 1, 
            "count": 1
        }, 
        {
            "date": "2022-10-26", 
            "data_type": "携程", 
            "type": 1, 
            "count": 8
        }, 
        {
            "date": "2022-10-26", 
            "data_type": "微信", 
            "type": 2, 
            "count": 0
        }, 
        {
            "date": "2022-10-26", 
            "data_type": "电视", 
            "type": 2, 
            "count": 1
        }, 
        {
            "date": "2022-10-26", 
            "data_type": "政府", 
            "type": 2, 
            "count": 0
        }, 
        {
            "date": "2022-10-26", 
            "data_type": "同程", 
            "type": 1, 
            "count": 0
        }, 
        {
            "date": "2022-10-27", 
            "data_type": "微博", 
            "type": 2, 
            "count": 0
        }, 
        {
            "date": "2022-10-27", 
            "data_type": "抖音", 
            "type": 2, 
            "count": 0
        }, 
        {
            "date": "2022-10-27", 
            "data_type": "论坛", 
            "type": 2, 
            "count": 0
        }, 
        {
            "date": "2022-10-27", 
            "data_type": "美团", 
            "type": 1, 
            "count": 0
        }, 
        {
            "date": "2022-10-27", 
            "data_type": "携程", 
            "type": 1, 
            "count": 2
        }, 
        {
            "date": "2022-10-27", 
            "data_type": "微信", 
            "type": 2, 
            "count": 0
        }, 
        {
            "date": "2022-10-27", 
            "data_type": "电视", 
            "type": 2, 
            "count": 0
        }, 
        {
            "date": "2022-10-27", 
            "data_type": "政府", 
            "type": 2, 
            "count": 0
        }, 
        {
            "date": "2022-10-27", 
            "data_type": "同程", 
            "type": 1, 
            "count": 0
        }, 
        {
            "date": "2022-10-28", 
            "data_type": "微博", 
            "type": 2, 
            "count": 0
        }, 
        {
            "date": "2022-10-28", 
            "data_type": "抖音", 
            "type": 2, 
            "count": 0
        }, 
        {
            "date": "2022-10-28", 
            "data_type": "论坛", 
            "type": 2, 
            "count": 0
        }, 
        {
            "date": "2022-10-28", 
            "data_type": "美团", 
            "type": 1, 
            "count": 0
        }, 
        {
            "date": "2022-10-28", 
            "data_type": "携程", 
            "type": 1, 
            "count": 0
        }, 
        {
            "date": "2022-10-28", 
            "data_type": "微信", 
            "type": 2, 
            "count": 0
        }, 
        {
            "date": "2022-10-28", 
            "data_type": "电视", 
            "type": 2, 
            "count": 1
        }, 
        {
            "date": "2022-10-28", 
            "data_type": "政府", 
            "type": 2, 
            "count": 0
        }, 
        {
            "date": "2022-10-28", 
            "data_type": "同程", 
            "type": 1, 
            "count": 0
        }
    ]
}

 

标签:count,10,data,js,date,2022,数据处理,type
From: https://www.cnblogs.com/Byme/p/16836907.html

相关文章

  • C#对象转json
     objectobj=new{Provider=appointmentErpStoreEntity.ProvinceName,City=appointmen......
  • JS数组对象排序
    原文地址:https://blog.csdn.net/qq_37899792/article/details/88655920利用数组api——>sort来进行排序varperson=[{name:"Rom",age:12},{name:"Bob",age:22},{name:......
  • C#后端接收前端json数组
    C#后端接收前端json数组方案一:///<summary>///(APP端)查询购物车选中商品的总价///</summary>publicclassCartTotalPriceRequestDto{/......
  • js-2-数组部分
      创建数组的两种方式:1,利用数组字面量vararr= [1,2,3];2,利用newArray()vararr=newArray();创建一个长度为2的数组vararr1=newArray(2); <script>......
  • 浅析package.json
    package.json用来描述项目及项目所依赖的模块信息。全文以npm为例package.json与package-lock.json的关系版本指定~会匹配最近的小版本依赖包,比如~1.2.......
  • JS for循环内实现等待
    for(vari=0;i<100;i++){(function(i){setTimeout(function(){console.log(i);varobject1=scene.getObjectByName("main_mode......
  • js生成随机小数、js生成随机整数、js时间相减获得天数、js获得星期几
     js生成随即小数、js生成随机整数、js时间相减获得天数、js获得星期几/****************************************生成从minNum到maxNum的随机数。*如果指定decimalNum......
  • JS 播放语音,将文本转成语音播放
    functionsss(){varu=newSpeechSynthesisUtterance();u.text="你好。我要播放语音了。。。";u.lang='zh';//u.rate=0.7......
  • ajaxFileUpload.js 无刷新上传图片,支持多个参数同时上传,支持 ie6-ie10
    ajaxFileUpload无刷新上传的原理:在页面动态创建form表单和ifram贞,设定form表单提交的目标为ifram贞,将文件域和要post的参数动态写入form表单中,然后提交from......
  • js函数的几种写法,闭包函数的写法
    最常见的写法://声明一个函数functionfoo(){alert('hi,js');}//调用函数foo();匿名函数写法:varfoo=function(){alert('hi,js');}......