/** * 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) $.ajax({ url: $('#eachtsAjaxUrl').val(), type: "GET", data: defaultParams, contentType : 'application/json;charset=UTF-8', //contentType很重要 success: function (data) { console.log('res',data) if (data.code === 0) { switch (type) { case 0: if(!data.orderPortrait){ $('#orderEacthsNone').show(); $('#orderEacths').hide(); $('.eachts-total').hide(); }else{ getOrderEacths(data.orderPortrait) } break; case 1: if(!data.behavior){ $('#keyWordsEacthsNone').show(); $('#keyWordsEacths').hide(); }else{ setOtherData(type,data) } break; case 2: if(!data.remarks){ $('#serviceEacthsNone').show(); $('#serviceEacths').hide(); }else{ setOtherData(type,data) } break; case 3: if(!data.pageType){ $('#visitEacthsNone').show(); $('#visitEacths').hide(); }else{ setOtherData(type,data) } break; } } 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 setOtherData = function (type,data) { const dataMap = { 1:{ id:'keyWordsEacths', color:'#e15616', series:{ yAxisData:data.behavior.name, seriesData:data.behavior.value }, }, 2:{ id:'serviceEacths', color:'#36cbcb', series:{ yAxisData:data.remarks.name, seriesData:data.remarks.value }, }, 3:{ id:'visitEacths', color:'#3aa0ff', series:{ yAxisData:data.pageType.name, seriesData:data.pageType.value }, } } getOtherEacths(dataMap[type].id,dataMap[type].series,dataMap[type].color); } // 其他三个图表 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;//移动适配 };