react + hooks 实现Echarts树状图 - 手风琴效果，滑过节点时展示其他信息

官网效果

React中实现

// npm i echarts --save
// npm i echarts-for-react --save
import ReactEcharts from 'echarts-for-react';

const EchartsDom = () => {
  // 配置
  const getOption = {
    // 标题
    title: {
      text: '阿巴阿巴',
    },
    // 提示，滑过时展示数据
    tooltip: {
      trigger: 'item',
      formatter: (params: any) => {
        return (
          [params.name] +
          '<br/>基线数量 : ' +
          [params.data.idss] +
          '<br/>资金(万元) : ' +
          [params.data.collapsed]
        );
      },
    },
    // 主要配置
    series: [
      {
      	// 类型
        type: 'tree',
        // 数据源
        data: edata,

        top: '1%',
        left: '7%',
        bottom: '1%',
        right: '20%',

        symbol: 'none', // symbolSize: 100,
		// 字体节点样式
        label: {
          backgroundColor: 'rgba(241, 191, 14, 1)',
          borderRadius: [22, 11, 11, 6],
          padding: [16, 16, 16, 16],
        },
		// 线条样式
        lineStyle: {
          color: 'rgba(221, 212, 212, 1)',
          curveness: 0.8,
          width: '0.5',
        },

        leaves: {},

        emphasis: {
          focus: 'descendant',
        },
		// 默认展开计几层
        initialTreeDepth: 1,

        expandAndCollapse: true,
        animationDuration: 550,
        animationDurationUpdate: 750,
      },
    ],
  };

  return (
    <div>
      <ReactEcharts
        style={{ height: 700 }}
        option={getOption}
        notMerge={true}
        lazyUpdate={true}
        // 绑定事件
        onEvents={onclick}
      ></ReactEcharts>
    </div>
  );
}

这样就类似官网效果图，这里onEvents={onclick}你直接绑定onclick回调的话在ts中会报错，可以这样搞：

// 实现手风琴效果的函数
const clickEchartsPie = (params: any) => {
	console.log('params:', params);
};

const onclick = {
	// 这里绑定回调
    click: clickEchartsPie,
  };

params.data就是数据源的item，你可以给他加一个collapsed来控制它展开收缩，idss是他的标识符。那接下来就是用户点击时来处理数据：

const clickEchartsPie = (e: any) => {
    var idss = e.data.idss; // 2

    // 收缩同级的子级节点 & 通过 collapsed 属性控制节点收缩
    // data就是数据源
    var children = data[0].children;

    for (var i in children) {
      //当前点击的节点展开  其余节点收缩
      if (children[i].idss == idss) {
        children[i].collapsed = false;
      } else {
        children[i].collapsed = true;
      }
    }

    const newData = data.map((item, key) => (key == 0 ? { ...item, children: children } : item));
    // const [edata, setData] = useState(data // 数据)
    seteData(newData);
  };

这就是我的解决思路，大佬勿喷[doge]！

附上一份data.js

const data = [{
  name: '阿巴阿巴',
  label: {
    backgroundColor: 'rgba(168, 0, 252, 1)',
    borderRadius: [22, 11, 11, 6],
    padding: [16, 16, 16, 16],
  },
  children: [
    {
      name: '产品1',
      idss: 1,
      collapsed: false,
      label: {
        backgroundColor: 'rgba(252, 25, 0, 1)',
        borderRadius: [22, 11, 11, 6],
        padding: [16, 16, 16, 16],
      },
      children: [
        {
          name: '基线1',
          children: [
            { name: '基线1', value: 3938, collapsed: true, },
            { name: '基线2', value: 3812, collapsed: true, },
            { name: '基线3', value: 6714, collapsed: true,  },
            { name: '基线4', value: 743, collapsed: true,  },
          ],
        },
        {
          name: '基线2',
          children: [
            { name: '基线1', value: 3534, collapsed: true,  },
            { name: '基线2', value: 5731, collapsed: true,  },
            { name: '基线3', value: 7840, collapsed: true,  },
            { name: '基线4', value: 5914, collapsed: true,  },
            { name: '基线5', value: 3416, collapsed: true,  },
          ],
        },
        {
          name: '基线3',
          children: [{ name: 'AspectRatioBanker', value: 7074 }],
        },
      ],
    },
    {
      name: '产品2',
      idss: 2,
      collapsed: true,
      label: {
        backgroundColor: 'rgba(242, 144, 7, 1)',
        borderRadius: [22, 11, 11, 6],
        padding: [16, 16, 16, 16],
      },
      children: [
        { name: '基线1', collapsed: true, },
        { name: '基线1', value: 1759, collapsed: true, },
        { name: '基线2', value: 2165, collapsed: true, },
        { name: '基线3', value: 586, collapsed: true, },
        { name: '基线4', value: 3331, collapsed: true, },
        { name: '基线5', value: 772, collapsed: true, },
        { name: '基线6', value: 3322, collapsed: true, },
      ],
    },
    {
      name: '产品3',
      idss: 3,
      collapsed: true,
      label: {
        backgroundColor: 'rgba(252, 248, 0, 1)',
        borderRadius: [22, 11, 11, 6],
        padding: [16, 16, 16, 16],
      },
      children: [
        { name: '基线1', value: 8833, collapsed: true, },
        { name: '基线2', value: 1732, collapsed: true, },
        { name: '基线3', value: 3623, collapsed: true, },
        { name: '基线4', value: 10066, collapsed: true, },
      ],
    },
  ],
}];

export default data;