react 创建饼状图

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

3. 在render中调用

   代码如下(这是一个饼状图的示例):

注：config中为绘制图必须的属性等内容，可参考highcharts官网示例及api文档。地址为：https://www.hcharts.cn/demo/highcharts

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: ' 
{point.name}:{point.percentage:.1f}%
',
                    headerFormat:'{series.name}
',
                    hideDelay:200
                },
                credits: {
                    enabled: false   // 隐藏highcharts版权
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        //标注
                        dataLabels: {
                            enabled: true, 
                            format: '{point.name} : {point.percentage:.1f}%',
                            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 
"chart">
            this.state.config}>
        
    }
}
export default DoughnutChart;

效果图：