highcharts生成不同高度的3D饼图

最新推荐文章于 2024-05-10 16:09:06 发布

lannieZ

最新推荐文章于 2024-05-10 16:09:06 发布

阅读量1.3k

点赞数 2

分类专栏： highcharts 文章标签： 3d javascript 前端 highcharts

本文链接：https://blog.csdn.net/lanniez/article/details/127357102

版权

highcharts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在这里插入图片描述

getPie() {
      var each = highcharts.each,
      round = Math.round,
      cos = Math.cos,
      sin = Math.sin,
      deg2rad = Math.deg2rad;
      highcharts.wrap(highcharts.seriesTypes.pie.prototype, 'translate', function(proceed) {
          proceed.apply(this, [].slice.call(arguments, 1));
          // Do not do this if the chart is not 3D
          if (!this.chart.is3d()) {
              return;
          }
          var series = this,
              chart = series.chart,
              options = chart.options,
              seriesOptions = series.options,
              depth = seriesOptions.depth || 0,
              options3d = options.chart.options3d,
              alpha = options3d.alpha,
              beta = options3d.beta,
              z = seriesOptions.stacking ? (seriesOptions.stack || 0) * depth : series._i * depth;
          z += depth / 2;
          if (seriesOptions.grouping !== false) {
              z = 0;
          }
          each(series.data, function(point) {
              var shapeArgs = point.shapeArgs,
                  angle;
              point.shapeType = 'arc3d';
              var ran = point.options.h;
              shapeArgs.z = z;
              shapeArgs.depth = depth * 0.75 + ran;
              shapeArgs.alpha = alpha;
              shapeArgs.beta = beta;
              shapeArgs.center = series.center;
              shapeArgs.ran = ran;
              angle = (shapeArgs.end + shapeArgs.start) / 2;
              point.slicedTranslation = {
                  translateX: round(cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)),
                  translateY: round(sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad))
              };
          });
      });
      (function(H) {
          H.wrap(highcharts.SVGRenderer.prototype, 'arc3dPath', function(proceed) {
              // Run original proceed method
              var ret = proceed.apply(this, [].slice.call(arguments, 1));
              ret.zTop = (ret.zOut + 0.5) / 100;
              return ret;
          });
      }(highcharts));

      // 生成不同高度的3d饼图
      highcharts.chart('pieMain', {
        chart: {
          type: 'pie',
          animation: false,
          backgroundColor: 'rgba(0, 0, 0, 0)', // 不显示背景色
          events: {
            load: function() {
              var each = highcharts.each,
                points = this.series[0].points;
              each(points, function(p) {
                p.graphic.attr({
                  translateY: -p.shapeArgs.ran
                });
                p.graphic.side1.attr({
                  translateY: -p.shapeArgs.ran
                });
                p.graphic.side2.attr({
                  translateY: -p.shapeArgs.ran
                });
              });
            }
          },
          options3d: {
            enabled: true,
            alpha: 75,
            beta: 0
          }
        },
        title: '',
          plotOptions: {
            pie: {
              allowPointSelect: true, //每个扇块能否选中
              cursor: "pointer", //鼠标指针
              innerSize: 0,
              size: 390,
              depth: 45, //饼图的厚度
              dataLabels: {
                enabled: true, //是否显示饼图的线形tip
                distance: 0,//设置引导线的长度          
                color: '#b9b8ce',//全局设置字体颜色
                style: {
                  textOutline: 'none',        //去掉文字白边 
                  fontSize: '12'                      
                },
                formatter: function() {
                  let name = this.point.name
                  let value = this.y
                  return name + value + '%'
                }
              },
            },
          },
        credits: {
          enabled: false    //禁用版权url    此处不设置
        },
        series: [{
          type: 'pie',
          name: '',
          data: [{
            'name': '搜狗',
            y: 30.0,
            h: 50
          }, {
            name: '',
            y: 26.8,
            h: 15
          }, {
            name: '谷歌',
            y: 12.8,
            h: 20
          }, {
            'name': 'IE',
            y: 8.5,
            h: 2
          }, {
            'name': '火狐',
            y: 6.2,
            h: 15
          }]
        }]
      });
    }