react 创建饼状图

最新推荐文章于 2024-08-12 08:28:51 发布

Liebe沐慕木

最新推荐文章于 2024-08-12 08:28:51 发布

阅读量2.7k

点赞数

分类专栏： react 文章标签： react 图表 highchart

本文链接：https://blog.csdn.net/Muxinn/article/details/78811062

版权

react 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

npm install react-highcharts –save
引入页面中 import Highcharts from ‘react-highcharts’
在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: ' <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;