crm_project/public/assets/js/backend/qingdong/dashboard.js

define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echarts-theme', 'template'], function ($, undefined, Backend, Datatable, Table, Echarts, undefined, Template) {
    var series=[];
    $.each(Orderdata.sourcedata,function(index){
        if(index != 0){
            series.push({type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}});
        }

    });
    var length=Orderdata.sourcedata[0].length;
    length=length-1;
    series.push({
        type: 'pie',
        id: 'pie',
        radius: '30%',
        center: ['50%', '28%'],
        emphasis: {focus: 'data'},
        label: {
            formatter: '{b}: {@'+Orderdata.sourcedata[0][length]+'} ({d}%)'
        },
        encode: {
            itemName: Orderdata.sourcedata[0][0],
            value:  Orderdata.sourcedata[0][length],
            tooltip:  Orderdata.sourcedata[0][length]
        }
    });
    var Controller = {
        index: function () {
            // 初始化表格参数配置
            Table.api.init();

            //绑定事件
            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                var panel = $($(this).attr("href"));
                if (panel.length > 0) {
                    Controller.table[panel.attr("id")].call(this);
                    $(this).on('click', function (e) {
                        $($(this).attr("href")).find(".btn-refresh").trigger("click");
                    });
                }
                //移除绑定的事件
                $(this).unbind('shown.bs.tab');
            });

            //必须默认触发shown.bs.tab事件
            $('ul.nav-tabs li.active a[data-toggle="tab"]').trigger("shown.bs.tab");

        },
        table: {
            one: function () {
                // 基于准备好的dom，初始化echarts实例
                var myChart = Echarts.init(document.getElementById('echart'), 'walden');

                // 指定图表的配置项和数据
                var  option = {
                    legend: {},
                    tooltip: {
                        trigger: 'axis',
                        showContent: false
                    },
                    dataset: {
                        source: Orderdata.Personsourcedata
                    },
                    xAxis: {type: 'category'},
                    yAxis: {gridIndex: 0},
                    grid: {top: '55%'},
                    series:series
                };

                myChart.on('updateAxisPointer', function (event) {
                    var xAxisInfo = event.axesInfo[0];
                    if (xAxisInfo) {
                        var dimension = xAxisInfo.value + 1;
                        myChart.setOption({
                            series: {
                                id: 'pie',
                                label: {
                                    formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                                },
                                encode: {
                                    value: dimension,
                                    tooltip: dimension
                                }
                            }
                        });
                    }
                });

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);

                var myChart2=Echarts.init(document.getElementById('echart2'), 'walden');
                var option2 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar']},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    legend: {
                        data: ['合同金额', '合同份数']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: Orderdata.personcontactdata.date,
                            axisPointer: {
                                type: 'shadow'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '金额',

                            axisLabel: {
                                formatter: '{value} 元'
                            }
                        },
                        {
                            type: 'value',
                            name: '合同数',

                            axisLabel: {
                                formatter: '{value} 份'
                            }
                        }
                    ],
                    series: [
                        {
                            name: '合同金额',
                            type: 'bar',
                            data: Orderdata.personcontactdata.contract
                        },

                        {
                            name: '合同份数',
                            type: 'line',
                            yAxisIndex: 1,
                            data: Orderdata.personcontactdata.num
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart2.setOption(option2);

                var myChart3=Echarts.init(document.getElementById('echart3'), 'walden');
                var option3 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar']},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    legend: {
                        data: ['回款金额']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: Orderdata.personcontactdata.date,
                            axisPointer: {
                                type: 'shadow'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '金额',

                            axisLabel: {
                                formatter: '{value} 元'
                            }
                        }
                    ],
                    series: [

                        {
                            name: '回款金额',
                            type: 'bar',
                            data: Orderdata.personcontactdata.receivables
                        }

                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart3.setOption(option3);

                $(window).resize(function () {
                    myChart.resize();
                });

                $(document).on("click", ".btn-refresh", function () {
                    setTimeout(function () {
                        myChart.resize();
                    }, 0);
                });
            },
            two: function () {
                // 基于准备好的dom，初始化echarts实例
                var myChart = Echarts.init(document.getElementById('echart6'), 'walden');

                // 指定图表的配置项和数据
                var  option = {
                    legend: {},
                    tooltip: {
                        trigger: 'axis',
                        showContent: false
                    },
                    dataset: {
                        source: Orderdata.sourcedata
                    },
                    xAxis: {type: 'category'},
                    yAxis: {gridIndex: 0},
                    grid: {top: '55%'},
                    series:series
                };

                myChart.on('updateAxisPointer', function (event) {
                    var xAxisInfo = event.axesInfo[0];
                    if (xAxisInfo) {
                        var dimension = xAxisInfo.value + 1;
                        myChart.setOption({
                            series: {
                                id: 'pie',
                                label: {
                                    formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                                },
                                encode: {
                                    value: dimension,
                                    tooltip: dimension
                                }
                            }
                        });
                    }
                });

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);

                var myChart2=Echarts.init(document.getElementById('echart7'), 'walden');
                var option2 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar']},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    legend: {
                        data: ['合同金额', '合同份数']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: Orderdata.contactdata.date,
                            axisPointer: {
                                type: 'shadow'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '金额',

                            axisLabel: {
                                formatter: '{value} 元'
                            }
                        },
                        {
                            type: 'value',
                            name: '合同数',

                            axisLabel: {
                                formatter: '{value} 份'
                            }
                        }
                    ],
                    series: [
                        {
                            name: '合同金额',
                            type: 'bar',
                            data: Orderdata.contactdata.contract
                        },

                        {
                            name: '合同份数',
                            type: 'line',
                            yAxisIndex: 1,
                            data: Orderdata.contactdata.num
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart2.setOption(option2);

                var myChart3=Echarts.init(document.getElementById('echart5'), 'walden');
                var option3 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar']},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    legend: {
                        data: ['回款金额']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: Orderdata.contactdata.date,
                            axisPointer: {
                                type: 'shadow'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '金额',

                            axisLabel: {
                                formatter: '{value} 元'
                            }
                        }
                    ],
                    series: [

                        {
                            name: '回款金额',
                            type: 'bar',
                            data: Orderdata.contactdata.receivables
                        }

                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart3.setOption(option3);

                $(window).resize(function () {
                    myChart.resize();
                });

                $(document).on("click", ".btn-refresh", function () {
                    setTimeout(function () {
                        myChart.resize();
                    }, 0);
                });
            },

        },
    };

    return Controller;
});