记录自己写过的Highcharts实现3D柱形图叠堆图

    

 function createHightchartBeiFen(id, pieData) {
        //var   xdata = ["5区四楼科技库房1", "7区4楼财务库", "8区4楼财务库", "3区3楼实物库", "9区4楼科技库1", "1区3楼文书库", "2区3楼文书库", "4区4楼科技库"];
       
    var  yUsed = [100, 100,150, 50, 100,150,130,125];
       var  yUnUse  =[300, 200, 350, 200, 400,320,345,158];
        pieOption = {
            chart: {
                type: 'pie',
                backgroundColor: 'transparent',
                options3d: {
                    enabled: true,
                    alpha: 45,
                    beta: 0
                }
            },
            title: {
                text: ""
            },
            colors: ['#883e93', '#1271cb', '#83c559', '#f92f7b', '#43bea2', '#FF9655', '#FFF263'],
            tooltip: {
                backgroundColor: "#341212",
                style: {                     // 文字内容相关样式
                    color: "#fff",
                    fontSize: "12px",
                    fontWeight: "normal",
                    fontFamily: "\5FAE\8F6F\96C5\9ED1"
                },
                pointFormatter: function () {
                    var unit;
                  switch (this.name) {
                       case "自身":
                           unit = '件'
                           break;
                       case "生产":
                           unit = '件'
                           break;
                       case "文书":
                           unit = '件'
                           break;
                       default:
                           unit = '件'
                   };
                   
                  return '数量:<span style="font-weight:normal"><b>' + this.y + ''+unit+'</b></span>'
               }

            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    depth: 35,
                    dataLabels: {
                        enabled: true,
                       // format: '{point.name} : {point.percentage}',
                        formatter: function(){
                            var unit = '件';
                        
                        return "<p style='width:100px; display:inline-block; white-space:pre-wrap;'><b>"+this.point.name+"</b>"+""+unit+"</p>"
                      },
                        style: {
                            fontSize: '12px',//这个是改饼状图里面显示的字体
                            color: '#fff',
                            fontWeight: "normal",
                        },


                    }
                }
            },
            series: [{
                type: 'pie',
                data: pieData
            }]
        },
            Highcharts.chart(id, pieOption);
    }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值