React中使用Highcharts实现立体饼图

前言

在一个项目中做饼状图、柱状图、水球图，刚开始是借助echarts做的后来客户方说平面的觉得不好看非要立体图类似于3D效果（感官上看着有3D的感觉），无奈下开始翻阅echarts各个属性看是否能够通过配置属性来改变感官效果，后来经过一般拼死的挣扎没找到想要的那种效果，只能翻阅各大图标插件库来寻求解决办法，经过垂死挣扎，皇天不顾有心人让我看到了Highcharts，怎么说呢虽然Highcharts并没有echarts那么强大,但是Highcharts它有它的过人之处。在这里记录下如果使用Highcharts实现立体（富有3D效果）的饼状图。如果实现立体柱状图是完全可以借助echarts来实现的。废话不多说 它来喽
操作平台： Web后台系统
运用技术栈：React + TS
需求：实现带有立体效果的饼状图

方式1（推荐）：
1-1.安装所需的依赖
npm install highcharts highcharts-react-official
1-2. 引入依赖

import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'
import highcharts3d from 'highcharts/highcharts-3d'(当使用3D特效的时候引入)
highcharts3d(Highcharts)(当使用3D特效的时候引入)

1-3. 在render中使用

const SSS = {
      // 用于设置图表区相关属性
      chart: {
        type: 'pie',
        // 背景设为透明
        // backgroundColor: 'rgba(0,0,0,0)',
        options3d: {
          enabled: true, // 是否显示3D样式
          // 展示的角度
          alpha: 45,
          beta: 0
        }
      },
      // 标题
      title: {
        text: null,
      },
      // 鼠标放在饼图上显示的字
      tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'//小数点保留位数
      },
      // 设置图表的表现效果 设置该选项，会对整个图表生效。但是，如果你在series中单独又定制了相应的样式，那么plotOptions的设置将会被自定义的覆盖。 
      plotOptions: {
        pie: {
          // 鼠标样式为小手
          cursor: 'pointer',
          // 饼图的厚度
          depth: 20,
          dataLabels: {
            enabled: true,
            format: '{point.name}'
          }
        }
      },
      // 改变饼图默认颜色
      colors: ['#0DD9D4', '#D62222', '#95D94C'],
      // 禁用右下角版权信息
      credits: {
        enabled: false
      },
      // 用于设置图表中要展示的数据相关的属性
      series: [{
        // 显示类型
        type: 'pie',
        // 饼图显示的数据
        name: '占比',
        data: [
          // 显示的字和所占比例
          ['测试网络是否连接正确', 70.0],
          ['查找资讯', 5.0],
          ['懒得打网址直接搜网站的名字', 25.0]
        ]
      }]
    }
<HighchartsReact highcharts={Highcharts}  options={SSS} />

方式2：
1-1. 下载依赖
npm install highcharts
1-2. 引入依赖

import Highcharts from 'highcharts'
import highcharts3d from 'highcharts/highcharts-3d'(当使用3D特效的时候引入)

1-3. 在render模块中定义

 <div id="container" style="height: 400px"></div>

1-4. 在componentwillmount生命周期中定义

Hightcharts.chart（’container‘，{
   //highcharts各种图的参数
}）

更多参数配置请参考https://api.highcharts.com.cn/highcharts