1. npm install react-highcharts –save
2. 引入頁面中 import Highcharts from ‘react-highcharts’

3. 在render中呼叫

   程式碼如下(這是一個餅狀圖的示例):

import React from 'react';
import Highcharts from 'react-highcharts'

import './taskMain.less';

class DoughnutChart extends React.Component{
    constructor(props){
        super(props);
    }
    componentWillMount() {
        this
 
.state = {
            config: {
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    spacing:[10,0,40,0],
                },
                title: {
                    text: "執行成功率"
 
,
                    style:{
                        "color":"#fff",
                        "fontSize":"16px",
                    },
                    verticalAlign:'middle',
                },
                //這是滑鼠懸浮時的提示框
                tooltip: {
                    //point為series中data的資料
                    pointFormat: ' <p style="font-size: 14px">{point.name}:<b>{point.percentage:.1f}%</b></p>'
 
,
                    headerFormat:'<span style="font-size: 14px">{series.name}</span><br/>',
                    hideDelay:200
                },
                credits: {
                    enabled: false   // 隱藏highcharts版權
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        //標註
                        dataLabels: {
                            enabled: true, 
                            format: '<span>{point.name} : {point.percentage:.1f}%</span>',
                            distance:12,
                            style: {
                                color: '#108eef',
                                fontWeight: "lighter",
                                fontSize:'1em',
                            }
                        },
                    },
                },
                series: [{
                    type:'pie',
                    name: this.props.name,
                    colorByPoint: true,
                    data: [{
                        name:"成功",
                        color:"#66CDAA",
                        y:80%
                    },{
                        name:"失敗",
                        color:"#E9967A",
                        y:20%
                    }],
                }]
            },
        }
    }
    render(){
        return <div className="chart">
            <Highcharts config={this.state.config}></Highcharts>
        </div>
    }
}
export default DoughnutChart;

效果圖：