【highCharts绘制3d饼图】有、无高低差的3d饼图

在Vue中使用highCharts绘制3d饼图的方法

参考： 在Vue中使用highCharts绘制3d饼图的方法

首先使用 npm在你的项目中安装vue-highcharts

npm install vue-highcharts --save

由于vue-highcharts依赖于highcharts，我们还需要安装后者

npm install highcharts --save

或者

yarn add  highcharts --save
yarn  add  vue-highcharts --save

安装完成后，进入项目main.js进行配置：

import highcharts from 'highcharts'
import VueHighCharts from 'vue-highcharts'

引入以上两项之后，因为我们需要使用3d图表，还需要引入：

import highcharts3d from 'highcharts/highcharts-3d'

调用3d图表：

highcharts3d(highcharts)

OK，到此为止已经在vue中配置好highcharts,接下来根据API绘制一份3d饼图

无高低差的3d饼图

新建一个饼图的组件：

<template>
<div class="container">
  <div :id="id" :option="option"></div>
</div>
</template>
<script>
import HighCharts from 'highcharts'
export default {
  props: {
    id: {
      type: String
    },
      //option 是图表的配置数据
    option: {
      type: Object
    }
  },
  mounted() {
    HighCharts.chart(this.id, this.option)
  }
}
</script>
 
<style scoped>
/* 容器 */
.container {
width: 1000px;
height: 550px;
}
</style>

在需要使用饼图的页面里配置option数据

<template>
  <div class="charts">
    <pie :id="id" :option="option"></pie>
  </div>
</div>
</template>
 
<script>
import pie from '../components/pie'
import manes from '../components/list'
export default {
  components: {
    pie,
  },
  data() {
    return {
      id: 'test',
      option: {
        chart: {
          type: 'pie',//饼图
           options3d: {
             enabled: true,//使用3d功能
             alpha: 60,//延y轴向内的倾斜角度
             beta: 0,
           }
        },
        title: {
          text: '测试用'//图表的标题文字
        },
        subtitle: {
          text: ''//副标题文字
        },
 
      plotOptions: {
        pie: {
          allowPointSelect: true,//每个扇块能否选中
          cursor: 'pointer',//鼠标指针
          depth: 35,//饼图的厚度
          dataLabels: {
            enabled: true,//是否显示饼图的线形tip
          }
        }
      },
        series: [
        {
          type: 'pie',
          name: '测试用1',//统一的前置词,非必须
          data: [
            ['测试1',12],//模块名和所占比，也可以{name: '测试1',y: 12}
            ['测试2',23],
            ['测试3',19],
            ['测试4',29]
          ]
         }
        ]
      }
    }
  },
 
}
</script>
 
<style scoped>
 
</style>

推荐用这个：有高低差的3d饼图（item.h设一样的、events里面注释掉，也能变成无高低差的3d饼图）

<div class="rc4-chart" id="rc4-chart"></div>
import { highchartsPie } from './hightChart.js'



    initRight4Chart() {
      let pieData = []
      let total = 0
      const percent = {}
      const data = [
        {
          area: '泉州',
          value: '2767.6',
        },
        {
          area: '福州',
          value: '2894.67',
        },
        {
          area: '南平',
          value: '350.28',
        },
        {
          area: '厦门',
          value: '1767.71',
        },
        {
          area: '宁德',
          value: '460.56',
        },
        {
          area: '漳州',
          value: '1306.77',
        },
        {
          area: '龙岩',
          value: '582.58',
        },
        {
          area: '莆田',
          value: '502.8',
        },
        {
          area: '三明',
          value: '488.15',
        },
      ]
      //饼图
      pieData = data.map((item, index) => {
        item.name = item.area
      	item.y = item.value - ''
        item.h = (index + 6) * 10
        return item
      })

      highchartsPie('rc4-chart', pieData, '吨')
    },

 // 新增hightChart.js
import Highcharts from 'highcharts'

export function highchartsPie(id,pieData,unit) {
    // 修改3d饼图绘制过程
  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(id, {
  chart: {
    type: 'pie',
    animation: false,
    backgroundColor: '#051723',
    events: {
      load: function() {
        var each = Highcharts.each,
          points = this.series[0].points;
        each(points, function(p, i) {
          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
    }
  },
  credits:{
    enabled:false
  },
  title:{
      align:'right',
      text:'单位: t/h',
      style: { 
        fontSize: 40,
        color: '#fff',
      },
   },
  lenged:{
    align: 'left',
    verticalAlign:'top',
    x: 0,
    y: 0
  },
  tooltip: {
    pointFormat: '{point.name}: <b>{point.y}</b>',
  },
   colors: [
       '#3adcb0',
       '#FDCA2D',
       '#1384F4',
       '#ed9de8',
       '#8ae48f',
   ],
  plotOptions: {
    pie: {
      allowPointSelect: true,
       cursor: 'pointer',
       showInLegend: false,
       depth: 35,
       dataLabels: {
         distance: 60,
         enabled: true,
         formatter: function() { 
          return this.key+': <b>'+this.y+'</b><br/>'+ Highcharts.numberFormat(this .percentage,2)+'%'
         }, 
         style: { 
          fontSize: 35,
          color: '#fff',
         },
       }
    }
  },
  series: [{
    type: 'pie',
    name: '碳排放',
    data: pieData
  }]
  });
}