jichuangshe/server/public/static/js/analyze.js.bak

/**
 * Created by JianJia.Zhou<jianjia.zhou> on 2022/10/3.
 */
let statDown = (function () {
    let chartInstance = '';
    let dataUrl = '';
    let btnName = '';
    let searchBtnName = '';

    statDown.init = {
        _init(options) {
            chartInstance = echarts.init(document.getElementById(options.dom))
            dataUrl = options.url
            btnName = options.btnName
            searchBtnName = options.searchBtnName

            statDown.buttonEvent._init()
        }
    }
    statDown.buttonEvent = {
        _init() {
            $(btnName).bind("click", function () {
                $(this).toggleClass('btn-primary').toggleClass('btn-default')
                statDown.chart.render()
            })
            $('.datepicker').datetimepicker({
                locale: 'zh-CN',
                format: 'YYYY-MM-DD',
            });
            $(searchBtnName).bind('click', function () {
                statDown.chart.render()
            })
        },
    }

    statDown.query = {
        getData() {
            let productIds = [];
            $(`${btnName}.btn-primary`).each((index, obj) => {
                productIds.push($(obj).data('id'))
            })
            let startAt = $("#filter-column-name-start").val();
            let endAt = $("#filter-column-name-end").val();
            let name = $(".filter-column-name").val();
            let data = {
                productIds,
                startAt,
                endAt,
                name
            }
            return $.post({
                url: dataUrl,
                data
            })
        },
    };
    statDown.chart = {
        render() {
            let data = this.getLegend();
            let categoryData = data.categoryData;
            let legendData = data.legendData;
            let option = this.options(legendData);
            chartInstance.setOption(option, true);
            this.query(legendData, categoryData)
        },
        query(legendData, categoryData) {
            chartInstance.showLoading()
            statDown.query.getData().then(res => {
                let {data} = res
                let series = [];
                legendData.forEach((item, index) => {
                    let temp = {
                        name: item.name,
                        type: item.type,
                        data: data[categoryData[index]]
                    };
                    series.push(temp);
                });

                chartInstance.setOption({
                    xAxis: [{
                        data: data.dates,
                        axisPointer: {
                            type: 'shadow'
                        },
                        splitLine: {
                            show: true
                        }
                    }],
                    series: series
                });
                chartInstance.hideLoading();
            });
        },
        getLegend() {
            let categoryData = [];
            let legendData = [];
            $(".btn-product.btn-primary").each(function () {
                let id = $(this).data("id");
                let name = $(this).text();
                let names = {name: `[${name}]下载数量`, type: 'line', barMaxWidth: 30, average: false};
                categoryData.push(`product_download_num_${id}`);
                legendData.push(names);
            });
            return {legendData, categoryData}
        },
        options(legends) {
            let seriesData = [];
            let legendSelected = {};
            let colors = ["#0095F3", "#95E04A", "#605EEB", "#4ACDBB", "#FFD480"];
            for (let item of legends) {
                let series = {
                    name: item.name,
                    type: item.type !== undefined ? item.type : 'line',
                    barWidth: item.barWidth !== undefined ? item.barWidth : '',
                    yAxisIndex: item.yAxisIndex !== undefined ? item.yAxisIndex : 0,
                    smooth: true,
                    data: [],
                };
                legendSelected[item.name] = item.show !== undefined ? item.show : true;
                if (item.average) {
                    series['markLine'] = {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                }
                seriesData.push(series);
            }
            return {
                animation: true,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },
                },
                toolbox: {
                    feature: {
                        // dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                /*legend: {
                    type :'scroll',
                    left:50,
                    right:50,
                    height:500,
                    data: legend_data,
                    selected:legend_selected,
                },*/
                grid: {
                    left: '4%',
                    right: '4%',
                    containLabel: true
                },
                dataZoom: [{
                    type: 'slider',
                    show: true,
                    xAxisIndex: 0,
                    yAxisIndex: 1,
                    start: 0,
                    end: 100,
                }, {
                    type: 'inside',
                    xAxisIndex: 0,
                    yAxisIndex: 1,
                    start: 0,
                    end: 100
                }],
                xAxis: {
                    type: 'category',
                    data: [],
                    //boundaryGap: false
                },
                yAxis: [
                    {
                        name: '产品下载量',
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} '
                        }
                    }
                ],
                series: seriesData,
                //color: colors
            };
        }
    }

})