<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