highchart 图标技术

简介: 1.部分html文件    2.js 文件function aucLotAgencyDealreport(begin,end,regionFlag,agencyId){ var xdata ...

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.效果图

 

 

 

 

相关文章
|
9月前
|
容器
layui框架实战案例(14):tabs选项卡切换时echarts拉伸变形无法正常显示的解决方案
layui框架实战案例(14):tabs选项卡切换时echarts拉伸变形无法正常显示的解决方案
95 0
|
8月前
|
前端开发 测试技术 容器
【CSS】如何给自己头像打造3D动态悬浮效果?(慎入!有点难)
有设想过,当你鼠标移入头像时,展现出从圆圈或洞中探出的那种效果吗?我有类似的想法,但采用了不同的方式并添加了一些动画。我感觉非常实用,并且可以产生简洁的悬停效果,可以在您自己的头像之类的东西上使用。
【CSS】如何给自己头像打造3D动态悬浮效果?(慎入!有点难)
非常漂亮的纯css3实现多彩侧边导航(非常流畅),附效果演示
非常漂亮的纯css3实现多彩侧边导航(非常流畅),附效果演示
|
9月前
|
前端开发 定位技术
百度地图标注提示框CSS气泡对话框实现属性解决方案
百度地图标注提示框CSS气泡对话框实现属性解决方案
79 0
|
编解码 前端开发 容器
举重若轻流水行云,前端纯CSS3实现质感非凡的图片Logo鼠标悬停(hover)光泽一闪而过的光影特效
喜欢看电影的朋友肯定会注意到一个有趣的细节,就是电影出品方一定会在片头的Logo环节做一个小特效:暗影流动之间光泽一闪而过,这样做不仅可以提高Logo的辨识度,还可以提升质感,一举两得。参照华纳兄弟影业(Warner Bros. Pictures)的例子
举重若轻流水行云,前端纯CSS3实现质感非凡的图片Logo鼠标悬停(hover)光泽一闪而过的光影特效
|
前端开发 开发者
使用tailwind在谷歌浏览器上,button会出现蓝色背景的问题
使用tailwind在谷歌浏览器上,button会出现蓝色背景的问题
使用tailwind在谷歌浏览器上,button会出现蓝色背景的问题
|
小程序
微信小程序:echarts层级太高,遮挡van-popup弹框组件
微信小程序:echarts层级太高,遮挡van-popup弹框组件
1011 0
|
Web App开发 前端开发 JavaScript
用SVG 制作 Sprites的图标系统(一)
我一直是图标字体的大力支持者。很多网站真的需要一个图标系统,图标字体提供了一个该死的精细系统。但是,我认为假设你对 IE 9+ 很好,使用内联 SVG 并且 <use> 引用图标的元素是一个优秀的系统。
227 0
用SVG 制作 Sprites的图标系统(一)
|
Web App开发 缓存 前端开发
用SVG 制作 Sprites的图标系统(二)
我一直是图标字体的大力支持者。很多网站真的需要一个图标系统,图标字体提供了一个该死的精细系统。但是,我认为假设你对 IE 9+ 很好,使用内联 SVG 并且 <use> 引用图标的元素是一个优秀的系统。
192 0
|
前端开发
用CSS制作带图标的按钮
这是一个搜索按钮,带了一个搜索的小图标。写的CSS在IE6和IE7中的兼容性不是很好。四边的圆角使用了CSS3的属性。
用CSS制作带图标的按钮