highchart 图标技术

1.部分html文件

<div region="center" style="width: 100%; height: 100%;">
                <table id="t_auclotBlack" style="height: 100%; width: 100%;"></table>
            </div>
            

 

 

 

2.js 文件

function aucLotAgencyDealreport(begin,end,regionFlag,agencyId){
    var xdata = [];
    var aucLotCount=[];//拍品件数
    var aucLotDealCount=[];//成交件数
    var factCount=[];//实际成交数量
    var regretCount=[];//悔拍次数
    var shootnumber=[];//上拍次数
    var sellnumber=[];//变卖次数
    var aucLotDealnumber=[];//拍卖成交次数
    var firstnumber=[];//优先拍卖成交次数
    var sellDealnumber=[];//变卖成交次数
    $.ajax({
        type: 'get',
        dataType: 'json',
        async: false,
        data: {"beginTime":begin,"endTime":end,
            "regionFlag":regionFlag,"agencyId":agencyId},
        url: parent.baseUrl+"report/findAucAgencyDealCount",
        success: function (result) {
            var json=result;
            for(var i=0;i<json.length;i++){
                xdata.push(json[i].aucagencyName);
                aucLotCount.push(parseInt(json[i].aucLotCount));
                aucLotDealCount.push(parseInt(json[i].aucLotDealCount));
                factCount.push(parseInt(json[i].factCount));
                regretCount.push(parseInt(json[i].regretCount));
                shootnumber.push(parseInt(json[i].shootnumber));
                sellnumber.push(parseInt(json[i].sellnumber));
                aucLotDealnumber.push(parseInt(json[i].aucLotDealnum_ber));
                firstnumber.push(parseInt(json[i].firstnumber));
                sellDealnumber.push(parseInt(json[i].sellDealnumber));
                
            }
            getHighcharts(xdata,aucLotCount,aucLotDealCount,factCount,regretCount,shootnumber,sellnumber,aucLotDealnumber,firstnumber
                    ,sellDealnumber);
        }    
            
    });
    
    
}


function getHighcharts(xdata,aucLotCount,aucLotDealCount,factCount,regretCount,
        shootnumber,sellnumber,aucLotDealnumber,firstnumber,sellDealnumber){
    var chart =new Highcharts.chart('container', {
        credits: {                                
            enabled: false, //去掉版权信息，就是右下角显示的highchars的网站链接 也可以显示成自己的链接，具体请搜索api
        },
        chart: {
            type: 'column'
        },
        title: {
            text: '<span style="font-size:24px;font-weight:bolder;color:Black;">司法机构上拍统计</span>',
        },
        subtitle: {
            text: '上拍统计'
        },
      
        legend: {
            align: 'right',
            verticalAlign: 'middle',
            layout: 'vertical'
        },
        tooltip:{
            valueSuffix: '数量',
            formatter:function(){
                return '<b>'+this.series.name+'</b>:'+this.y;
            }//,this.x Highcharts.dateFormat("%Y年%m月%e日")+this.x+'<br>'+
        },
        xAxis: {
            type:'date',
            categories:xdata,
            //gridLineWidth: 5,
            dateTimeLabelFormats:{
                 year: '%Y',
                 month: '%b \ %y',
                 day: '%e. %b'
             },
        },
        yAxis: {
            allowDecimals: false,
            title: {
                text: '数量'
            }
        },
        plotOptions: {
            series: {
                //pointPadding:0.2,
                groupPadding:0.2
            },
            column: {
                pointWidth:15
            }
        },
        series: [{
            name: '拍品件数',
            data: aucLotCount
        }, {
            name: '成交件数',
            data: aucLotDealCount
        }, {
            name: '实际成交数量',
            data: factCount
        }, {
            name: '悔拍件数',
            data: regretCount
        }, {
            name: '上拍次数',
            data: shootnumber
        }, {
            name: '变卖次数',
            data: sellnumber
        }, {
            name: '拍卖成交次数',
            data: aucLotDealnumber
        }, {
            name: '优先拍卖成交次数',
            data: firstnumber
        }, {
            name: '变卖成交次数',
            data: sellDealnumber
        }],
        responsive: {
            
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        align: 'center',
                        verticalAlign: 'bottom',
                        layout: 'horizontal'
                    },
                    yAxis: {
                        labels: {
                            align: 'left',
                            x: 0,
                            y: -5
                        },
                        title: {
                            text: null
                        }
                    },
                    subtitle: {
                        text: null
                    },
                    credits: {
                        enabled: false
                    }
                }
            }]
        }
    });
}

 

 

3.效果图