caimei365-manager/src/main/webapp/static/modules/cmClubPortrait/cmClubEacths.js

/**
 * 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;//移动适配
};