基于React实现流量趋势图同轴联动的效果（Echarts实现）

前言：

基于业务需求，需要实现多个系列的基于时间的流量趋势图折线图，实现联动的x轴的缩放和滚动浏览。之前用d3定制化了一版，但是基于后期需求扩展考虑，d3定制化开发成本较高，所以考虑基于Echarts实现。

1、基本效果截图

image.png

2、基于React自定义hook的代码实现：

SeriesChart.tsx组件封装：

import React, { useState, useEffect, useRef } from 'react';
import * as echarts from 'echarts';
import ReactEcharts from 'echarts-for-react';
import { dataTypeConfigList } from "../utils";

export default (props: any) => {

    const { dataConfig, brushCallback, brushRange } = props;
    const [option, setOption] = useState<any>(null);
    const chartRef: any = useRef(null);

    // 由于基于文档编写使用，此处用mock数据，实际业务需要定制化修改数据处理相关代码
    function getRandomData() {
        let base = +new Date(1988, 9, 3);
        let oneDay = 24 * 3600 * 1000;

        let data = [[base, Math.random() * 300]];

        for (let i = 1; i < 2000; i++) {
            let now = new Date((base += oneDay));
            data.push([+now, Math.round((Math.random() - 0.5) * 20 + data[i - 1][1])]);
        }

        return data;
    }

    useEffect(() => {
    
        type EChartsOption = echarts.EChartOption;

        let option: EChartsOption;

        let series = dataConfig.series.map((item: any) => {
            let data = getRandomData();

            return {                                     
                name: item.title,
                type: 'line',
                smooth: true,
                symbol: 'none',
                areaStyle: {},
                // sampling: 'lttb', //开启大数量优化算法
                data: data
            }
        })

        option = {
            color: ['#4cd698', '#4e5ad5', '#4eade9', '#f4914e', '#fcb75b', '#ffe180'],
            tooltip: {
                trigger: 'axis',
                position: function (pt) {
                    return [pt[0], '10%'];            
                }
            },
            title: {
                left: 'left',
                text: dataConfig.title
            },
            grid: {
                left: 50,
                right: 40
            },
            legend: {
                show: true,
                icon: 'rect'
            },
            brush: {
                xAxisIndex: 'all',
                brushLink: 'all',
                outOfBrush: {
                    colorAlpha: 0.1
                }
            },
            toolbox: {
                feature: {
                    brush: {
                        type: ['lineX', 'clear']
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'time',
                boundaryGap: false
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%']
            },
            dataZoom: [
                {
                    type: 'inside',
                    start: 0,
                    end: 10,
                    zoomLock: true
                },
                {
                    start: 0,
                    end: 10,
                    zoomLock: true
                }
            ],
            series: series
        };

        setOption(option);

        setTimeout(() => {
            let chartEl: any = chartRef?.current?.getEchartsInstance();
            chartEl.group = 'flowChart';
            echarts.connect('flowChart');
            chartEl.on('brushEnd', (e: any) => {
                //  笔刷框选x轴的范围数值
                let range = e.areas[0].coordRange;
                brushCallback(range);
            })
        })
    }, []);

    useEffect(() => {
        let chartEl: any = chartRef?.current?.getEchartsInstance();

        brushRange && chartEl && chartEl.dispatchAction({
            type: 'brush',
            areas: [
                {
                    brushType: 'lineX',
                    coordRange: brushRange, 
                    xAxisIndex: 0
                }
            ]
        });
    }, [brushRange])

    return <>
        {
            option && <ReactEcharts ref={chartRef}
                option={option}
                style={{ height: '240px', width: '100%' }}
            />
        }
    </>

}

utils数据配置文件代码如下：

export const dataTypeConfigList = [
    {
        title: '流量',
        type: 'flow',
        series: [
            { title: '总流量', key: 'totalByte' },
            { title: '进网流量', key: 'inboundByte' },
            { title: '出网流量', key: 'outboundByte' },
        ]
    },
    {
        title: '数据包',
        type: 'package',
        series: [
            { title: '总数据包', key: 'totalPackage' },
            { title: '进网数据包', key: 'inboundPackage' },
            { title: '出网数据包', key: 'outboundPackage' },
        ]
    }
];

实际使用的demo.tsx演示文件：

import React, { useState } from 'react';
import { Card } from 'antd';
import SeriesChart from './componets/SeriesChart';
import { dataTypeConfigList } from "./utils";

export default () => {
    const [brushRange, setBrushRange] = useState<Array<any>>();

    const brushCallback = (range: Array<any>) => {
        setBrushRange(range);
    }

    return (
        <div className='dashboard-page'>
            <Card style={{ marginTop: 10 }}>
                {
                    dataTypeConfigList.map((item: any) => {
                        return <SeriesChart dataConfig={item} key={item.type} brushCallback={brushCallback} brushRange={brushRange} />
                    })
                }
            </Card>
        </div>
    );
}

3、基本说明

基于基础代码部分，不用做过多说明了，这里只说主要的实现点和实现方案。图表联动时，需要基于Echarts图表实例的group属性，然后调用echarts.connect('flowChart')函数进行将多组图表关联，进行图表联动。这边的flowChart是我自己命名的group属性名。此处用setTimeout的原因是，需要多组echarts图表实例进行初始化之后，再进行connect才有用，所以此处这样处理。没有找到类似React中有类似Vue的$nextTick的API，如果大家有更好的处理方式，就在下方留言给予指正。
至于刷取框选部分，由于我需要考虑系统性能，在刷取结束时进行多图的统一框选，并且brush框选是不受group联动控制的，所以这样处理。
使用ReactEcharts插件的原因是，该插件将Echarts基于React进行了二次封装，在基于窗口的大小尺寸改变时，图表能自动进行重绘。大家想直接使用Echarts也是可以的，就是相应的界面展示优化需要定制化处理而已。

4、写在最后

后续我会将之前d3定制化开发的版本进行分享，d3的优点就是方便直接改变样式进行主题切换处理；当然缺点也很明显就是开发维护成本高。