echarts+react17 实现联动的时间统计图表

一.环境准备

        首先需要下载echarts资源环境，如何安装大家动动手指自行查找吧。

        

二.编程实现

        最近项目上面有个界面展现的数据分析界面需要我参与设计，按照我的想法在网上找了一些有关图标展示比较炫酷的界面，第一个想到的就是百度开源出来的echarts,找了一个比较合适的集成到项目里面，下面直接上代码。。。

        1.uniqBy遍历数据集进行去重

uniqBy(
        datalist.map(el => ({ value : el.taskId})),
        'value'
      ),
      [datalist]

        说明：这里使用uniqBy方法对taskId这个字段进行去重，去重后taskId字段显示唯一。

        2.filter对数据集筛选，实现图表的联动效果。

 const taskSelectedResultes = useMemo(() => {

    if (taskSelectResult.length) {
      return datalist.filter(el => taskSelectResult.includes(el.taskId));
    }
    return datalist;
  }, [taskSelectResult, datalist]);

        3.封装方法，方便后续修改。

<SimResult
              echarts={echarts}
              dataSource={taskSelectedResultes}
              taskSelectOption={taskSelectOption}
              curCheck={curCheck}
              setCurCheck={setCurCheck}
              setTaskSelectResult={setTaskSelectResult}
              rowSelects={rowSelects}
              setRowSelects={setRowSelects}
            />

        4.选择框、echarts图表接收并处理数据集

const options = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow' 
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: ['uav1', 'uav2', 'airship', 'uuv']
        },
        series: [
          {
            name: '起始位置距拍摄位置时长',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [result[0]?.startShootingTime, result[1]?.startShootingTime, result[2]?.startShootingTime, result[3]?.startShootingTime]
          },
          {
            name: '拍摄总时长',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [result[0]?.shootTime, result[1]?.shootTime, result[2]?.shootTime, result[3]?.shootTime]
          },
        ]
      };
    return (
    <div style={{ marginTop: "24px" }} >
     <Select 
        placeholder="请选择任务ID" 
        style={{ minWidth: 150 }}
        onChange={value => {
            props.setTaskSelectResult(value);
            console.log("value",value);
        }}
        options={props.taskSelectOption}
     />
     <ReactECharts 
        style={{ height: 240 }}
        echarts={props.echarts}
        option={options}
        notMerge={true}
        lazyUpdate={true}
        />
    </div> 

        最后界面出来的效果如下，达到我们预期的效果：