[JavaScript知识库]react中使用echarts绘制饼状图----echarts-for-react

react中使用echarts推荐使用echarts-for-react这个npm包，

具体用法参考代码：

import React, { Component } from 'react';
//导入饼图
import 'echarts/lib/chart/pie';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/markPoint';
import ReactEcharts from 'echarts-for-react';
//引入样式
import './index.less';

export default class PiA extends Component {
    getOption = () => {
        //剩余
        let option = {
            title: {
                text: `总授予`,
                x: 'center',
                textStyle: {
                    color: 'rgba(0, 0, 0, 0.9)',
                    fontWeight: 400,
                    fontSize: 14,
                },
            },
            tooltip: {
                trigger: 'item',
                //提示框浮层内容格式器，支持字符串模板和回调函数形式。
                formatter: '{a} <br/>{b} : {c} ({d}%)',
            },
            legend: {
                orient: 'horizontal',
                bottom: 5,
                data: ['已分配', '剩余'],
                itemWidth: 8,
                itemHeight: 8,
                icon: 'circle',
                borderRadius: 16,
            },
            series: [
                {
                    name: `总授予`,
                    type: 'pie',
                    width: 200,
                    height: 200,
                    top: 8,
                    left: 'center',
                    data: [
                        {
                            value: 1111,
                            name: '已分配',
                            label: {
                                show: true,
                                //自定义内容
                                formatter: String('paramAssign'),
                                /* formatter: () => {
                                    if (paramAssign && paramAssign !== 0) {
                                        return String(paramAssign);
                                    } else {
                                        return '';
                                    }
                                }, */
                                color: '#fff',
                            },
                            itemStyle: { color: '#41D1A6' },
                        },
                        {
                            value: 1111,
                            name: '剩余',
                            label: {
                                show: true,
                                //自定义内容
                                formatter: String('1111'),
                                color: '#fff',
                            },
                            itemStyle: { color: '#607CE9' },
                        },
                    ],
                    clockwise: false, //是否顺时针
                    label: {
                        //去除饼图的指示折线label
                        normal: {
                            show: false,
                            position: 'inside',
                            formatter: '{b}:{d}%',
                        },
                    },
                },
            ],
        };
        return option;
    };
    render() {
        return <ReactEcharts option={this.getOption()} />;
    }
}

最终效果：

?关于getOption 函数里面的配置可以参考echarts配置项

只是对于饼状图，其他类型的可以在网上找找，根据echarts中的配置项可以对样式进行修改。