highcharts3d饼状图渲染时出现没有高度的情况

highcharts yekong

highcharts3d饼状图渲染时正常情况下渲染出来应该是类似下面的情况,但是在实际开发中,如果和其他类型的3d饼状图在一块开发时,会出现饼状图没有高度的情况,类似图2的效果。

图1:

highcharts3d饼状图

图2:

highcharts3d饼状图高度丢失

解决办法

我们在设置饼状图数据的时候,可以给一个h值这个h值就是饼状图的高度了。

list2: function () {
  var list = []
  this.list.forEach((type) => {
    // 饼状图的值 以及饼状图的高度
    list.push({name: type.name, y: type.value, h: 6})
  });
  return list;
},
drawEcharts() {
  var that = this
  let color1 = this.colorList;
  let color2 = this.colorList;
  Highcharts.getOptions().colors = Highcharts.map(
      Highcharts.getOptions().colors,
      function (color, index) {
        return {
          radialGradient: {cx: 0.5, cy: 0.3, r: 0.7},
          stops: [
            [0, color2[index]],
            [1, color1[index]],
          ],
        };
      }
  );
  var chart = Highcharts.chart(that.$refs.echarts, {
    title: [],
    chart: {
      type: 'pie',
      backgroundColor: 'rgba(0,0,0,0)',
      options3d: {
        enabled: true,
        alpha: 60,
        innerSize: 10,
        beta: 0,
        depth: 10,
      }
    },
    tooltip: {
      pointFormat: '{series.name}: {point.y}人<br><b>{point.percentage:.1f}%</b>'
    },
    credits: {
      enabled: false
    },
    labels: {
      style: {
        color: 'red'
      }
    },
    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        depth: 10,
        size: '100%',
        innerSize: '60%',
        center: ['50%', '50%'],
        dataLabels: {
          useHTML: true,
          crop: true,
          enabled: false,
          connectorWidth: 1,
          position: 'center',
          distance: 0,
          x: -15,
          connectorShape: 'straight',
          borderWidth: 0,
          format: '<div class="dataLabels"><b>{point.name}</b>: {point.percentage:.1f} %</div>',
          style: {
            color: 'rgba(26, 178, 255, 1)'
          }
        },
      }
    },
    series: [{
      type: 'pie',
      name: '事件中心',
      data: this.list2
    }]
  });
},
喜欢