/** * Created 机构订单图表 by zjy on 2023/02/10. */ function getDateStr(dd, addCount) { dd.setDate(dd.getDate() + addCount);//获取addCount天后的日期 var y = dd.getFullYear(); var m = (dd.getMonth() + 1) < 10 ? "0" + (dd.getMonth() + 1) : (dd.getMonth() + 1);//获取当前月份的日期,不足10补0 var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate(); return y + "/" + m + "/" + d; } // PC const isPC = ($(window).width() > 768); //默认参数 const defaultParams = { clubId:$('#clubId').val()*1,// 机构id dateType:0,// 日期类别 0日 1月 2半年 3全年 startTime:'',// 开始时间 endTime:'',// 结束时间 type:0// 统计类别 0订单 1搜索关键词 2咨询记录 3访问记录 4初始状态 } // 默认时间 const startDate = getDateStr(new Date(), -365), endDate = getDateStr(new Date(), 0); // 初始化订单选择时间控件 const getInfoOrderDate = function () { $('#orderDate').dateRangePicker({ language: 'cn', startDate: startDate, endDate: endDate, format: 'YYYY-MM-DD', showShortcuts: false, autoClose: isPC, isNowrap: false, getValue: function () { if (defaultParams.startTime && defaultParams.endTime) { return defaultParams.startTime + ' to ' + defaultParams.endTime; } else { return ''; } }, setValue: function (s, s1, s2) { defaultParams.startTime = s1; defaultParams.endTime = s2; $('#orderTimeStart').val(s1); $('#orderTimeEnd').val(s2); if (defaultParams.startTime && defaultParams.endTime) { getClubEacthsData(0,0) } } }); } // 初始化关键词选择时间控件 const getInfoKeyWordsDate = function () { $('#keyWordsDate').dateRangePicker({ language: 'cn', startDate: startDate, endDate: endDate, format: 'YYYY-MM-DD', showShortcuts: false, autoClose: isPC, isNowrap: false, getValue: function () { if (defaultParams.startTime && defaultParams.endTime) { return defaultParams.startTime + ' to ' + defaultParams.endTime; } else { return ''; } }, setValue: function (s, s1, s2) { defaultParams.startTime = s1; defaultParams.endTime = s2; $('#keyWordsTimeStart').val(s1); $('#keyWordsTimeEnd').val(s2); if (defaultParams.startTime && defaultParams.endTime) { getClubEacthsData(1,0) } } }); } // 初始化咨询选择时间控件 const getInfoServiceDate = function () { $('#serviceDate').dateRangePicker({ language: 'cn', startDate: startDate, endDate: endDate, format: 'YYYY-MM-DD', showShortcuts: false, autoClose: isPC, isNowrap: false, getValue: function () { if (defaultParams.startTime && defaultParams.endTime) { return defaultParams.startTime + ' to ' + defaultParams.endTime; } else { return ''; } }, setValue: function (s, s1, s2) { defaultParams.startTime = s1; defaultParams.endTime = s2; $('#serviceTimeStart').val(s1); $('#serviceTimeEnd').val(s2); if (defaultParams.startTime && defaultParams.endTime) { getClubEacthsData(2,0) } } }); } // 初始化访问记录选择时间控件 const getInfoVisitDate = function () { $('#visitDate').dateRangePicker({ language: 'cn', startDate: startDate, endDate: endDate, format: 'YYYY-MM-DD', showShortcuts: false, autoClose: isPC, isNowrap: false, getValue: function () { if (defaultParams.startTime && defaultParams.endTime) { return defaultParams.startTime + ' to ' + defaultParams.endTime; } else { return ''; } }, setValue: function (s, s1, s2) { defaultParams.startTime = s1; defaultParams.endTime = s2; $('#visitTimeStart').val(s1); $('#visitTimeEnd').val(s2); if (defaultParams.startTime && defaultParams.endTime) { getClubEacthsData(3,0) } } }); } // 数据接口请求 const getClubEacthsData = function (type,dateType) { defaultParams.type = type; defaultParams.dateType = dateType; console.log('数据接口请求参数',defaultParams) let url = $('#eachtsAjaxUrl').val(); $.ajax({ url: url, type: "GET", data: defaultParams, contentType : 'application/json;charset=UTF-8', //contentType很重要 success: function (res) { if (res.success) { if(type === 0){ const data = [ {value: 50, name: '普通订单【25%】【1个】'}, {value: 20, name: '二手订单【25%】【1个】'}, {value: 30, name: '返佣订单【25%】【1个】'}, {value: 60, name: '部分退款订单【25%】【1个】'}, {value: 50, name: '全部退款订单【25%】【1个】'}, {value: 20, name: '已关闭订单【25%】【1个】'}, ] getOrderEacths(data) }else{ const dataMap = { 1:{ id:'keyWordsEacths', color:'#e15616', series:{ yAxisData:['M22', '玻尿酸', '超声刀', '面膜', '耗材', '润月雅', 'Ross', '超声跑', '拗口似','是脚手'], seriesData:[1000, 2000, 3000, 4000, 5000, 6000,7000,8000,9000,10000] }, }, 2:{ id:'serviceEacths', color:'#36cbcb', series:{ yAxisData:['M22', '玻尿酸', '超声刀', '面膜', '耗材', '润月雅', 'Ross', '超声跑', '拗口似','是脚手'], seriesData:[1000, 2000, 3000, 4000, 5000, 6000,7000,8000,9000,10000] }, }, 3:{ id:'visitEacths', color:'#3aa0ff', series:{ yAxisData:['搜索供应商', '楼层详情', '新品橱窗', '文章列表', '供应商主页', '二手列表','个人中心','新商品详情','商品搜索','首页'], seriesData:[1000, 2000, 3000, 4000, 5000, 6000,7000,8000,9000,10000] }, } } getOtherEacths(dataMap[type].id,dataMap[type].series,dataMap[type].color); } } else { console.log('机构订单图表数据异常') } } }); } // 基于准备好的dom,初始化echarts实例 const getOrderEacths = function (data) { // 基于准备好的dom,初始化echarts实例 const myChart = echarts.init(document.getElementById('orderEacths')); const option = { tooltip: { trigger: 'item' }, legend: { orient: 'vertical', right: '10%', top:'20%', textStyle: { fontSize: 14, }, }, color:['#3aa0ff','#36cbcb','#fad337','#4dcb73','#f2637b','#975fe4'], series: [ { name: '订单总量', type: 'pie', radius: '70%', center: ['25%', '50%'], avoidLabelOverlap: false, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, label: { show: false, position: 'center' }, data:data } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.onresize = myChart.resize;//移动适配 }; // 其他三个图表 const getOtherEacths = function (id,data,color) { // 基于准备好的dom,初始化echarts实例 console.log('id',id) const myChart = echarts.init(document.getElementById(id)); const option = { title: { show:false }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { show:false, }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'value', boundaryGap: [0, 0.01] }, yAxis: { type: 'category', data: data.yAxisData }, series: [ { type: 'bar', name: '2023', data: data.seriesData, itemStyle:{ color:color, fontSize: 14, } } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.onresize = myChart.resize;//移动适配 };