React组件之echarts

一。组件

import React, {Component} from 'react'
import echarts from 'echarts'

class Chart extends Component {
    constructor(props) {
        super(props)
    }

    componentDidMount() {
        // this.loadChart()
        setTimeout(() => {
            this.loadChart()
        })
    }

    loadChart() {
        const {chartData} = this.props;
        // console.log(this.chart)
        this.chartObj = echarts.init(this.chart);
        this.chartObj.clear();
        const option = {
            tooltip: {
                trigger: 'item',
                // formatter: '{a} <br/>{b}: {c} ({d}%)',
                formatter: '{a} <br/>{b} ({d}%)',
            },
            legend: {
                orient: 'vertical',
                bottom: 60,
                right: 30,
                data: [{
                    name: '可激活：' + chartData.activableCount,
                    textStyle: {
                        color: '#71B6F9'          // 图例文字颜色
                    }
                }, {
                    name: '已激活：' + chartData.activedCount,
                    textStyle: {
                        color: '#FCB247'          // 图例文字颜色
                    }
                }, {
                    name: '已停用：' + chartData.haltCount,
                    textStyle: {
                        color: '#7F8DFF'          // 图例文字颜色
                    }
                }]
            },
            series: [
                {
                    name: chartData.partner,
                    type: 'pie',
                    radius: ['30%', '40%'],
                    center: ['50%', '50%'],
                    avoidLabelOverlap: true,
                    label: {
                        normal: {
                            show: true,
                            position: 'outside',
                            formatter: '{b}:{d}%'
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold',
                            },
                        },
                    },
                    labelLine: {
                        normal: {
                            show: true,
                        },
                    },
                    data: [
                        {
                            value: chartData.activableCount,
                            name: '可激活：' + chartData.activableCount,
                            itemStyle: {color: '#71B6F9'}
                        },
                        {
                            value: chartData.activedCount,
                            name: '已激活：' + chartData.activedCount,
                            itemStyle: {color: '#FCB247'}
                        },
                        {
                            value: chartData.haltCount,
                            name: '已停用：' + chartData.haltCount,
                            itemStyle: {color: '#7F8DFF'}
                        },
                    ],
                },
            ],
        };
        this.chartObj.setOption(option);
        window.onresize = function () {
            location.reload()
        }
    }

    render() {
        return (
            <div style={{height: '300px'}} className="chart" ref={c => this.chart = c}/>
        )
    }
}

export default Chart

二。引用

传入的值是个对象

 <Chart chartData={item.agent}/>