<script src="{theme:javascript/echarts/build/dist/echarts.js}"></script>
<div id="main">
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span12">
                <div class="box">
                    <div class="box-content" id="image" style="height:350px">
                    </div>
                </div>
            </div>
        </div>        
    </div>
</div>

<script type='text/javascript'>
//
$(function(){
    dataList_ajax(1);
    showechart(1)
    $("[class=tableDd]").click(function(){
        var type = $(this).find('input[name="type"]').val();
        dataList_ajax(type);
        showechart(type);
    });
    $(".h_tableDl .tableDd").click(function(){
        $(".h_tableDl .tableDd").removeClass("active");
        $(this).addClass("active");
    });
});
function showechart(type){
    //路径配置
    require.config({
        paths: {
            echarts: '{theme:javascript/echarts/build/dist}'
        }
    });

    // 使用
    require(
        [
            'echarts',
            'echarts/chart/line',
            'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
        ],
        function (ec) {
            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('image')); 
             //通过Ajax获取数据 
            var url = '{url:/market/dataList_ajax/type/@type@}';
            url = url.replace("@type@",type);
            $.getJSON(url,function(json)
            {
                var option = {
                        title : {
                            text: '图形统计'
                        },
                        tooltip : {
                            trigger: 'axis',
                            interval: 0  ,
                        },
                        legend: {
                            data:['订单量','金额']
                        },
                        toolbox: {
                            show : true,
                            feature : {
                                magicType : {show: true, type: ['line', 'bar']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        xAxis : [
                            {
                                type : 'category',
                                position: 'bottom',
                                boundaryGap: true,
                                axisLine : {    // 轴线
                                    show: true,
                                    lineStyle: {
                                        color: 'green',
                                        type: 'solid',
                                    }
                                },
                                axisTick : {    // 轴标记
                                    show:true,
                                    length: 10,
                                    lineStyle: {
                                        color: 'red',
                                        type: 'solid',
                                    }
                                },
                                splitLine : {
                                    show:true,
                                    lineStyle: {
                                        color: '#483d8b',
                                        type: 'dashed',
                                    }
                                },
                                splitArea : {
                                    show: true,
                                    areaStyle:{
                                        color:['rgba(144,238,144,0.3)','rgba(135,200,250,0.3)']
                                    }
                                },
                                data : ['总成交量','成交未发货量','成交已发货量','成交买家已确认量','成交买家未确认超过15天','退货中','退货已确认','维权中']
                            },
                        ],
                        yAxis : [
                            {
                                name: '订单量(件)',
                                type : 'value',
                                position: 'left',
                                scale: true, 
                                precision: 2, 
                                splitNumber: 9, 
                                axisLine : {    // 轴线
                                    show: true,
                                    lineStyle: {
                                        color: 'red',
                                        type: 'dashed',
                                        width: 2
                                    }
                                },
                                axisTick : {    // 轴标记
                                    show:true,
                                    length: 10,
                                    lineStyle: {
                                        color: 'green',
                                        type: 'solid',
                                        width: 2
                                    }
                                },
                                axisLabel : {
                                    show:true,
                                    interval: 'auto',    // {number}
                                    rotate: -45,
                                    margin: 18,
                                    formatter: '{value}',    // Template formatter!
                                    textStyle: {
                                        color: '#1e90ff',
                                        fontFamily: 'verdana',
                                        fontSize: 10,
                                        fontStyle: 'normal',
                                        fontWeight: 'bold'
                                    }
                                },
                            },
                            {
                                name: '金额(元)',
                                type : 'value',
                                precision: 2, 
                                axisLabel : {
                                    formatter: function (value) {
                                        return value
                                    }
                                },
                                splitLine : {
                                    show: false
                                }
                            }
                        ],
                        series : [
                            {
                                name: '订单量',
                                type: 'bar',
                                data:json.num,
                                itemStyle : { normal: {label : {show: true}}},
                            },
                            {
                                name:'金额',
                                type: 'bar',
                                yAxisIndex: 1,
                                data:json.money,
                                itemStyle : { normal: {label : {show: true}}},
                            },
                        ]
                    };
                                
                // 为echarts对象加载数据 
                myChart.setOption(option,'monokai'); 
            }); 
        }
    );
    
}
function dataList_ajax(type)
{
    var url = '{url:/market/dataList_ajax/type/@type@}';
    url = url.replace("@type@",type);
    $.getJSON(url,function(json)
    {
        $('#data_list').empty();
        var string ='';
        string += "<dl class='tableDl clearfix'><dd class='tableDd2'>订单量</dd><dd class='tableDd2'>"+(json.num[0]?json.num[0]:0)+"</dd><dd class='tableDd2'>"+(json.num[1]?json.num[1]:0)+"</dd><dd class='tableDd2'>"+(json.num[2]?json.num[2]:0)+"</dd><dd class='tableDd2'>"+(json.num[3]?json.num[3]:0)+"</dd><dd class='tableDd2'>"+(json.num[4]?json.num[4]:0)+"</dd><dd class='tableDd2'>"+(json.num[5]?json.num[5]:0)+"</dd><dd class='tableDd2'>"+(json.num[6]?json.num[6]:0)+"</dd><dd class='tableDd2'>"+(json.num[7]?json.num[7]:0)+"</dd></dl>";
        string += "<dl class='tableDl clearfix'><dd class='tableDd2'>金额(元)</dd><dd class='tableDd2'>"+(json.money[0]?json.money[0]:0)+"</dd><dd class='tableDd2'>"+(json.money[1]?json.money[1]:0)+"</dd><dd class='tableDd2'>"+(json.money[2]?json.money[2]:0)+"</dd><dd class='tableDd2'>"+(json.money[3]?json.money[3]:0)+"</dd><dd class='tableDd2'>"+(json.money[4]?json.money[4]:0)+"</dd><dd class='tableDd2'>"+(json.money[5]?json.money[5]:0)+"</dd><dd class='tableDd2'>"+(json.money[6]?json.money[6]:0)+"</dd><dd class='tableDd2'>"+(json.money[7