react+antd+dva ---> Echarts-for-react 图表的使用（柱状图+多环形图）

1.引入

import ReactEcharts from 'echarts-for-react';

 

2.jsx里写入组件

<ReactEcharts
       option={getOptionAxis(
               axisData.list
        )}
        style={{
               width: '100%',
               height:'400px'
        }}
/>

　

3.外面render里写柱状图的options

// 绘制柱状图
        const getOptionAxis = list => {
            return {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                legend: {
                    data:
                        Array.isArray(list) && list.length > 0
                            ? list.map(item => item.name)
                            : [],
                    icon: 'circle',
                    itemWidth: 10,
                    itemHeight: 10,
                    itemGap: 20,
                    x: 'center'
                },
                xAxis: [
                    {
                        type: 'category',
                        data: getPath(this.state, 'sixMonth'),
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '总员工',
                        splitLine: {
                            lineStyle: {
                                type: 'dashed'
                            }
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                type: 'dashed'
                            }
                        }
                    },
                    {
                        type: 'value',
                        name: '数量',
                        splitLine: {
                            lineStyle: {
                                type: 'dashed'
                            }
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                type: 'dashed'
                            }
                        }
                    }
                ],
                series:
                    list && list.length > 0
                        ? list.map(item => ({
                              name: item.name,
                              type: item.name === '总员工数' ? 'line' : 'bar',
                              data: item.value,
                              itemStyle: {
                                  normal: {
                                      color:
                                          item.name === '总员工数'
                                              ? '#3BA0FF'
                                              : '#FAD337'
                                  }
                              }
                          }))
                        : []
            };
        };

 

超级简单484

 

84！！！

需求还要一个多层环形图！

像这样！

点击外部，要求内部随之变更

点击legend（就是上面那一行文字示例），也要求两层环形图动态变化

 

ok。

1.jax写个组件

<ReactEcharts
                                                                    option={getOptionPie(
                                                                        pieData
                                                                    )}
                                                                    onEvents={{
                                                                        click: this
                                                                            .onChartClick,
                                                                        legendselectchanged: this
                                                                            .onLegendClick
                                                                    }}
                                                                    style={{
                                                                        width:
                                                                            '100%',
                                                                        height:
                                                                            '400px'
                                                                    }}
                                                                />

x··············x··········注意············x···················x

onEvents={{

click: this

.onChartClick,

legendselectchanged: this

.onLegendClick

}}

这两个点击事件，是这么写的 ↑ ，第一个是环形图的点击事件，第二个是图例的点击事件

 

2.写图表options

 

// 绘制饼图
        const getOptionPie = pieData => {
            const { chooseIndex } = this.state;
            const requestData =
                Array.isArray(pieData) && pieData.length > 0
                    ? pieData.map((item, index) => ({
                          name: item.name,
                          value: item.value,
                          selected: index === chooseIndex
                      }))
                    : [];
            const mydata = option3data.map((item, index) => {
                return {
                    name: item.name,
                    value: item.value,
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                            color: colorChoose,
                            opacity: 1 - 0.1 * index
                        }
                    }
                };
            });
            return {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    type: 'scroll',
                    data:
                        requestData && requestData.length > 0
                            ? requestData.map(item => item.name)
                            : [],
                    icon: 'circle',
                    itemWidth: 10,
                    itemHeight: 10,
                    itemGap: 20,
                    x: 'center'
                },
                series: [
                    {
                        name: '部门',
                        type: 'pie',
                        radius: [0, '30%'],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            }
                        },
                        label: {
                            normal: {
                                position: 'inner'
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: mydata
                    },
                    {
                        name: '公司',
                        type: 'pie',
                        radius: ['40%', '55%'],
                        selectedMode: 'single',
                        itemStyle: {
                            normal: {
                                color(params) {
                                    return pieColor[params.dataIndex];
                                }
                            }
                        },
                        label: {
                            normal: {
                                position: 'inner',
                                formatter: '{d}%',
                                fontSize: 12
                            }
                        },
                        data: requestData
                    }
                ]
            };
        };

 

3.点击事件：

// 环形饼状图外圈被点击
    onChartClick = (param, echarts) => {
        if (param.componentIndex === 1) {
            const { dispatch, gateway } = this.props;
            const pieData = getPath(gateway, 'pieData', []);
            const params = getPath(pieData, `${param.dataIndex}.children`, []);
            dispatch({
                type: 'gateway/getNewOption',
                payload: {
                    option3data: params,
                    colorChoose: param.color
                }
            });
            this.setState({
                chooseIndex: param.dataIndex
            });
        }
    };

    // 饼图legend 点击事件-确保内环跟随改变
    onLegendClick = (param, echarts) => {
        const { dispatch, gateway } = this.props;
        const pieData = getPath(gateway, 'pieData', []);
        const { pieColor } = gateway;
        let newIndex = 0;
        // eslint-disable-next-line no-restricted-syntax
        for (const index in param.selected) {
            // eslint-disable-next-line no-prototype-builtins
            if (param.selected.hasOwnProperty(index)) {
                if (param.selected[index]) {
                    this.setState({
                        chooseIndex: newIndex
                    });
                    const params = getPath(pieData, `${newIndex}.children`, []);
                    const paramsColor = getPath(pieColor[newIndex]);
                    dispatch({
                        type: 'gateway/getNewOption',
                        payload: {
                            option3data: params,
                            colorChoose: paramsColor
                        }
                    });
                    return;
                }
                newIndex += 1;
            }
        }
    };

 

批注：

（1）pieData是后端返回的数据，格式为：

渲染时外圈为最外层数据，内圈为对应的children里的数据

（2）option3data 存储的数据为内环数据

（3）colorChoose 存储当前被选中的数据的颜色（用来给内圈赋颜色）

（4）pieColor 存储外环的颜色库：

 

ps处理对象还有如下2种方法：

const array1 = Object.values(param.selected);

const array2 = Object.keys(param.selected);

console.log(array1, array2);