关于javascript:reactecharts实现一个饼图的组件

npm 装置 echarts-for-react

npm install --save echarts-for-react
npm install echarts --save

引入模块和组件

import React from 'react';

import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/pie';  // 折线图是 line, 饼图改为 pie, 柱形图改为 bar
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';

配置 option 参数
写在一个独自的文件 config.js 文件，而后 module.exports 导出

let colors = ['#E60012', '#EB6100', '#F39800', '#FFF100', '#8FC31F', '#22AC38', '#009944', '#009E96', '#0068B7', '#601986']
module.exports = {
    color: colors,
    title: {
        text: '设施类型统计',
        left: 'left',
        top: '2%',
        textStyle: {color: '#fff'}
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },

    series: [

        {
            name: '类型统计',
            type: 'pie',// 饼图
            radius: [30, 110],
            roseType: 'area',
            data: [],// 数据前面再导入
            // 设置显示标签的款式
            label: {
                position: 'outside',
                color: '#0DD5ED',
                // formatter: '{b} \n\n {d}%',
                formatter: function (data) {return data.name + '\n\n' + data.percent.toFixed(1) + '%'
                },
                padding: [0, -30, 0, -30],
            },
            // 设置线条款式
            labelLine: {
                length: 10,
                length2: 30,
                lineStyle: {width: 1}
            },
        }
    ]
};

组件初始化
我应用的是 class 组件

import React from 'react';

import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/pie';  // 折线图是 line, 饼图改为 pie, 柱形图改为 bar
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';

import config from './config.js'

class PieDiv extends React.Component {
    /**
     * 初始化 id id 是随机生成的一串惟一的字符串
     */
    constructor(props) {super(props)
        let id = ('_' + Math.random()).replace('.', '_');
        this.state = {pieId: 'pie' + id}
    }
    /**
     * 生成图表，次要做了一个判断，因为如果不去判断 dom 有没有生成，* 在前面如果定期去更新图表，每次生成一个 dom 节点会导致浏览器
     * 占用的 cpu 和内存十分高，踩过坑。* 这里的 config 就是引入的配置文件中的 config, 文件头部会有阐明
     */
    initPie(id) {let myChart = echarts.getInstanceByDom(document.getElementById(id));
        if (myChart === undefined) {myChart = echarts.init(document.getElementById(id));
        }
        myChart.setOption(config)
    }
    // 在其余中央援用的时候，把值传入 list 中，就能够应用改选件，// 因为接口中查问到的不肯定会间接渲染页面，所有采纳 componentWillReceiveProps 生命
    // 周期函数，在值发生变化的时候，从新传入值。componentWillReceiveProps=(nextProps)=> {const {list:oldlist} = this.props
        const {list:newlist} = nextProps
        if(oldlist!=newlist){config.series[0].data = newlist
            this.initPie(this.state.pieId);
        }
    }
    // 应用组件的时候还须要传入一个 height，因为 echarts 图表显示必须要有高度，没有高度无奈显示图表
    render() {const {height} = this.props
        return (<div id={this.state.pieId} style={{height}}></div>
        )
    }
}

export default PieDiv

最初
在其余中央引入，就能够应用这个饼图了

import PieDiv from '***'
<PieDiv height={400} list={this.state.DataArr}/>

传入的 list 数据格式如下

data= [
          { 
            name: 'XXX',
            value: 1 ,
           },
           { 
             name: 'XXX',
            value: 2 ,
            },
     ]