screen/public/assets/js/backend/goods_data.js

define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echarts-theme', 'template','form'], function ($, undefined, Backend, Datatable, Table, Echarts, undefined, Template,Form) {

    var Controller = {
        index: function () {




            // 基于准备好的dom，初始化echarts实例
            var myChart = Echarts.init(document.getElementById('echart'), 'walden');
            var myChart1 = Echarts.init(document.getElementById('echart1'), 'walden');
            var myChart2 = Echarts.init(document.getElementById('echart2'), 'walden');
            var myChart3 = Echarts.init(document.getElementById('echart3'), 'walden');
            var myChart4 = Echarts.init(document.getElementById('echart4'), 'walden');
            var myChart5 = Echarts.init(document.getElementById('echart5'), 'walden');
            var myChart6 = Echarts.init(document.getElementById('echart6'), 'walden');
            var myChart7 = Echarts.init(document.getElementById('echart7'), 'walden');
            var myChart8 = Echarts.init(document.getElementById('echart8'), 'walden');
            var myChart9 = Echarts.init(document.getElementById('echart9'), 'walden');

            var option = {
                title: {
                    text: '单品订单数量占比',

                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                normal: {
                    label: {
                        show: true,

                        formatter: '{d}%',
                    },
                },


                series: [{
                    name: '',
                    type: 'pie', // 设置图表类型为饼图
                    radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                    color: ['#37A2DA', '#32C5E9'],
                    label: {
                        normal: {
                            show: true,
                            formatter: '{b}: {c}({d}%)'
                        }
                    },
                    data: (function () {
                        var arrNum = [];
                        var testd = Config.goods_data;
                        var teste = Config.goods_column;
                        for (var i = 0; i < testd.length; i++) {
                            arrNum.push({"value": testd[i], "name": teste[i]});
                        }
                        return arrNum;
                    })(),
                }]


            };

            var option1 = {
                title: {
                    text: '单品销售额占比',

                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [{
                    name: '',
                    type: 'pie', // 设置图表类型为饼图
                    radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                    color: ['#37A2DA', '#32C5E9'],
                    label: {
                        normal: {
                            show: true,
                            formatter: '{b}: {c}({d}%)'
                        }
                    },
                    data: (function () {
                        var arrNum = [];
                        var testd = Config.goods_sale_data;
                        var teste = Config.goods_sale_column;
                        for (var i = 0; i < testd.length; i++) {
                            arrNum.push({"value": testd[i], "name": teste[i]});
                        }
                        return arrNum;
                    })(),
                }]

            };

            var option2 = {
                title: {
                    text: '单品订单数量',

                    left: 'center'
                },
                xAxis: {
                    type: 'category',
                    data: Config.goods_column
                },
                yAxis: {
                    type: 'value'
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {

                        data: Config.goods_data,
                        type: 'bar',
                        showBackground: true,
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                    var colorList = [
                                        '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                    ];
                                    return colorList[params.dataIndex]
                                }
                            }
                        },
                    }
                ]
            };
            var option3 = {
                title: {
                    text: '单品销售额',

                    left: 'center'
                },
                xAxis: {
                    type: 'category',
                    data: Config.goods_sale_column
                },
                yAxis: {
                    type: 'value'
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {

                        data: Config.goods_sale_data,
                        type: 'bar',
                        showBackground: true,
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                    var colorList = [
                                        '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                    ];
                                    return colorList[params.dataIndex]
                                }
                            }
                        },
                    }
                ]
            };
            var option4 = {
                title: {
                    text: '单品毛利',

                    left: 'center'
                },
                xAxis: {
                    type: 'category',
                    data: Config.goods_gross_column
                },
                yAxis: {
                    type: 'value'
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {

                        data: Config.goods_gross_data,
                        type: 'bar',
                        showBackground: true,
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                    var colorList = [
                                        '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                    ];
                                    return colorList[params.dataIndex]
                                }
                            }
                        },
                    }
                ]
            };
            var option5 = {
                title: {
                    text: '单品毛利率',

                    left: 'center'
                },
                xAxis: {
                    type: 'category',
                    data: Config.goods_gross_rate_column
                },
                yAxis: {
                    type: 'value'
                },
                tooltip: {
                    trigger: 'item',
                    formatter:'{c}%'　　　　//这是关键，在需要的地方加上就行了
                },


                series: [
                    {
                        name: 'ECharts例子个数统计',
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                    var colorList = [
                                        '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                    ];
                                    return colorList[params.dataIndex]
                                },
                                label: {
                                    show: true,
                                    position: 'top',
                                    formatter: '{b}\n{c}%'　　　　//这是关键，在需要的地方加上就行了
                                }
                            }
                        },
                        data: Config.goods_gross_rate_data,
                    }
                ]


            };
            var option6 = {
                title: {
                    text: '单品退货率',
                    left: 'center'
                },
                xAxis: {
                    type: 'category',
                    data: Config.refund_rate_column
                },
                yAxis: {
                    type: 'value'
                },
                tooltip: {
                    trigger: 'item',
                    formatter:'{c}%'　　　　//这是关键，在需要的地方加上就行了
                },
                series: [
                    {
                        name: 'ECharts例子个数统计',
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                    var colorList = [
                                        '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                    ];
                                    return colorList[params.dataIndex]
                                },
                                label: {
                                    show: true,
                                    position: 'top',
                                    formatter: '{b}\n{c}%'　　　　//这是关键，在需要的地方加上就行了
                                }
                            }
                        },
                        data: Config.refund_rate_data,
                    }
                ]
            };
            var option7 = {
                title: {
                    text: '单品销售金额排名',

                    left: 'center'
                },
                xAxis: {
                    type: 'category',
                    data: Config.sale_money_column
                },
                yAxis: {
                    type: 'value'
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {

                        data: Config.sale_money_data,
                        type: 'bar',
                        showBackground: true,
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                    var colorList = [
                                        '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                    ];
                                    return colorList[params.dataIndex]
                                }
                            }
                        },
                    }
                ]
            };
            var option8 = {
                title: {
                    text: '单品销售数量排名',

                    left: 'center'
                },
                xAxis: {
                    type: 'category',
                    data: Config.sale_num_column
                },
                yAxis: {
                    type: 'value'
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {

                        data: Config.sale_num_data,
                        type: 'bar',
                        showBackground: true,
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                    var colorList = [
                                        '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                    ];
                                    return colorList[params.dataIndex]
                                }
                            }
                        },
                    }
                ]
            };
            var option9 = {
                title: {
                    text: '全商品售后率',

                    left: 'center'
                },
                xAxis: {
                    type: 'category',
                    data: ['全部商品']
                },
                yAxis: {
                    type: 'value'
                },
                tooltip: {
                    trigger: 'axis',
                    formatter(params){
                        return `${params[0].value}%`
                    }
                },
                series: [
                    {

                        data: [svcPer],
                        type: 'bar',
                        showBackground: true,
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                    var colorList = [
                                        '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                    ];
                                    return colorList[params.dataIndex]
                                }
                            }
                        },
                    }
                ]
            };


            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            myChart1.setOption(option1);
            myChart2.setOption(option2);
            myChart3.setOption(option3);
            myChart4.setOption(option4);
            myChart5.setOption(option5);
            myChart6.setOption(option6);
            myChart7.setOption(option7);
            myChart8.setOption(option8);
            myChart9.setOption(option9);

            Form.events.daterangepicker($('#form'))
        }

    };

    return Controller;
});