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);