echarts堆叠图显示总数 tooltips处理

1. 思路：计算总数data 隐藏渲染；
2. 外部tooltip 加 series 内tooltip （可控隐藏）

const SystemUserSpread: React.FC<Interface> = (props) => {
    const {formDataEcharts } = props
    const echartsRef = useRef<any>()
    useEffect(()=>{
    },[formDataEcharts])
    let seriesrr = formDataEcharts?.dataValue &&formDataEcharts.dataValue.length>0 && formDataEcharts.dataValue.map((item:any,index:number)=>{
        return {
            type: formDataEcharts?.type,
            stack:'123name',
            barWidth: formDataEcharts?.barWidth,
            smooth:true, // line  平滑
            symbol:'circle', // 实心圆
            tooltip:{
                trigger:'axis',
                axisPointer:{
                    type:'shadow',
                    label:{
                        backgroundColor: '#ccc'
                    }
                }
            },
            itemStyle:{
                normal:{
                    color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color:item.colors[0]
                    }, {
                        offset: 0.8,
                        color: item.colors[1]
                    }], false)
                }
            },
            areaStyle: { // 折线内阴影
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: item?.areaStyle&&item?.areaStyle[0] || null
                    },
                        {
                            offset: 1,
                            color:  item?.areaStyle&&item?.areaStyle[1] || null
                        }
                    ], false),
                    shadowBlur: 0
                }
            },
            data: item.data
        }
    })
    // 将堆叠的几个数据加起来，放在一个dataAll
    let dataAll = []
    if(formDataEcharts?.dataValue &&formDataEcharts.dataValue.length>1){
        for (var i = 0; i < formDataEcharts.dataValue[0].data.length; i++) {
            dataAll.push(formDataEcharts.dataValue[0].data[i] + formDataEcharts.dataValue[1].data[i] + formDataEcharts.dataValue[2].data[i])
        }

    }
    const option = {
        backgroundColor: '#fff',
        xAxis: {
            data: formDataEcharts?.data||[],
            axisLine: {
                lineStyle: {
                    color: 'rgba(0,0,0,.45)',
                }
            },
            axisLabel: {
                color: 'rgba(0,0,0,.45)',
                interval: formDataEcharts?.xLabelRotate ? 0 : undefined,
                rotate: formDataEcharts?.xLabelRotate? 30:0,
                fontSize: 12
            },
        },
        grid:{
            left:50,
            bottom: formDataEcharts?.xLabelRotate ? 50 : 20,
            top:20,
            right:50
        },
        tooltip:{
            trigger:'axis',
            axisPointer:{
                type:'shadow',
                label:{
                    backgroundColor: '#ccc'
                }
            }
        },
        yAxis: {
            name: "",  // 单位
            nameTextStyle: {
                color: 'rgba(0,0,0,.45)',
                fontSize: 12
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(0,0,0,.15)',
                }
            },
            axisLabel: {
                color: 'rgba(0,0,0,.45)',
                fontSize: 12
            },
            splitLine: {
                show:true,
                lineStyle: {
                    type:formDataEcharts?.typeLine,
                    color: 'rgba(0,0,0,.15)',
                }
            },
            interval:formDataEcharts?.interval,
            // max:formDataEcharts?.max

        },
        series: seriesrr? [{
            type: formDataEcharts?.type,
            stack:'',
            z:-1,   // 隐藏
            barGap:'-100%',  // 隐藏
            smooth:true, // line  平滑
            symbol:'circle', // 实心圆
            barWidth: formDataEcharts?.barWidth,
            tooltip:{
                show:false,  // 隐藏
            },
            itemStyle:{
                normal:{
                    label: {
                        show: formDataEcharts?.type == 'bar' ? true :false,
                        position:'top',
                        textStyle:{
                            color:'black',
                            fontSize:16
                        }
                    },
                }
            },
            data: formDataEcharts.dataValue.length === 1 ? formDataEcharts.dataValue[0].data : formDataEcharts.dataValue.length>1?dataAll:[]
        },...seriesrr]:[],
    };
    return (
        <div style={{width:'100%',height:'100%'}}>
            <ReactEcharts option={option} ref={echartsRef} style={{width: '100%', height: '100%'}}/>
        </div>
    )
}

export default SystemUserSpread;