echart 桑基图修改颜色

按照颜色列表顺序，桑基图按节点每一列从上往下排列颜色，效果图如下

引入echarts-for-react

import ReactEcharts from 'echarts-for-react';

<ReactEcharts
  notMerge={true}
  style={reactEchartsStyle}
  option={chartOption}
/>

修改每一项的颜色【这里需要注意的是，我这边是接口返回数据中是可以判断节点是第几层的节点depth值，以及depth总层数】

const colorList = ['#1385FF', '#19FFF6', '#12F3AD', '#FF932D', '#FF4342', '#2368FF'];

// 获取颜色
const getColor = ({ nodes, links, colorList, depthTotal = 0 }) => {
    console.log('nodes---', nodes);
    console.log('links---', links);

    let curIndex = 0;
    const toSetColor = (curDepth = 0) => {
        nodes?.forEach((item, index) => {
            if (item.depth === curDepth && !item.isColumn) {
                if (curIndex >= colorList?.length) {
                        curIndex = 0;
                }

                item.itemStyle = {
                        color: colorList[curIndex],
                }
                curIndex += 1;
            }

            if (curDepth < depthTotal - 1 && index === nodes?.length - 1) {
                toSetColor(curDepth + 1);
            }
        })
    }
    toSetColor();

    links?.forEach(item => {
        const isIn = nodes.findIndex(v => v.name === item.source);
        if (isIn !== -1) {
            item.lineStyle = {
                color: nodes[isIn]?.itemStyle?.color
            }
        }
    });
}