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