echarts点击选中操作（react）

傷城~ 2023-02-23 12:13 147阅读 0赞

最近的一个需求，做出来之后觉得很简单的一个操作，分享出来

需求是这样的：**echarts的柱状图，点击可以选中变色，最多可以选中五个柱子，五个柱子五个颜色，不能重复。**

先看个效果：

![在这里插入图片描述][20200707142159498.gif_pic_center]

然后上代码：

import React, {  Component } from 'react';
    import * as echarts from 'echarts';
    import ReactEcharts from 'echarts-for-react';
    import styles from '../details.less';
    import _ from 'lodash'
    
    const colorLists = { 
        "0" : "#6bd6fc",
        "1": "#3beaab",
        "2": "#fd9087",
        "3": "#adc6ff",
        "4": "#fed856",
    }
    let unused = [1];
    let initialCid = [0,1,2,3,4]
    class Bar extends Component { 
        render() { 
            const textColor = "#464c5b";
            const axisColor = "#657180";
            const handleChartClick = params => { 
                const platform = params.data;
                const quota = this.props.articleDetails[showType];
                const {  show } = this.props.articleDetails;
                if (show[showType]) { 
                    const {  current } = quota;
                    let existed = false;
                    for (let i = 0; i < current.length; i++) { 
                        const plat = current[i];
                        if (Number(plat.id) === Number(platform.id)) { 
                            if (current.length > 1) { 
                                current.splice(i, 1);
                            }
                            existed = true;
                            break;
                        }
                    }
                    if (!existed) { 
                        let cid = 0;
                        if (current.length > 4) { 
                            cid = unused[0];
                            current.shift();
                        } else { 
                            cid = unused[0];
                        }
                        current.push({  ...platform , "cid": cid});
                    }
                } else { 
                    quota.current = [{ ...platform, "cid": 0 }];
                    show[showType] = !!!show[showType];
                    this.props.dispatch({  type: 'articleDetails/setState', payload: {  show } });
                }
                const colorIdArr = quota.current.map(i =>{ return i.cid})
                if (quota.current.length > 4) { 
                    unused[0] = colorIdArr[0]
                } else { 
                    unused = (_.xor(initialCid, colorIdArr)).sort((a, b) => { return a - b} );
                }
                this.props.dispatch({  type: 'articleDetails/setQuota', payload: quota });
            }
            const handleColorClick = (param) => { 
                const quota = this.props.articleDetails[showType];
                if(Array.isArray(hightlight) && hightlight.indexOf(param['name']) !== -1) { 
                    const cid = quota.current.filter((item) => {  return item.id === param.data.id});
                    return colorLists[cid[0].cid];
                } else { 
                    return '#66aaff';
                }
            }
            const option = { 
                animation: false,
                grid: { 
                    top: 60,
                    bottom: 60,
                    left: 60,
                    right: 60,
                },
                color: color,
                title: { 
                    text: title,
                    textStyle: { 
                        color: textColor,
                        fontWeight: 'normal',
                        fontSize: 12
                    },
                    top: 0
                },
                tooltip: { 
                    trigger: 'axis',
                    axisPointer: { 
                        type: 'shadow',
                        shadowStyle: { 
                            color: '#3ba1ff',
                            opacity: .1
                        }
                    }
                },
                xAxis: { 
                    type: 'category',
                    data: Object.keys(data).length > 0 && data.map(item => item.name),
                    axisLine: { 
                        lineStyle: { 
                            color: "rgba(158,167,180,1)",
                            width: 2,
                        }
                    },
                    axisTick: {  show: false },
                    axisLabel: { 
                        fontSize: 12,
                        color: axisColor,
                        padding: [16, 0, 0, 0],
                        interval: 0,
                    }
                },
                yAxis: { 
                    type: 'value',
                    minInterval: 1,
                    axisLine: {  show: false },
                    axisTick: {  show: false },
                    axisLabel: { 
                        fontSize: 12,
                        color: axisColor,
                    },
                    splitLine: { 
                        lineStyle: { 
                            type: "dashed"
                        }
                    }
                },
    
                series: [{ 
                    data: data,
                    type: 'bar',
                    barWidth: 38,
                    itemStyle: { 
                        normal: { 
                            color: handleColorClick,//操纵点击后的颜色
                            borderColor: '#3ba1ff',
                            borderWidth: 0,
                        }
                    },
    
                }]
            };
            
            return (
                <div className={ styles.chart} style={ {  height: height }}>
                    <ReactEcharts
                        onEvents={ { 
                            click: handleChartClick
                        }}
                        notMerge={ true}
                        lazyUpdate={ true}
                        option={ option}
                        style={ {  width: '100%', height: '100%' }} />
                </div>
            );
        }
    }
    
    export default Bar;

变色操作参考echarts官网  
series > itemStyle > normal > color 的用法自行搜索 = =  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dkODEzMjU_size_16_color_FFFFFF_t_70]

主要代码是在两个函数里

大概就是仨个数组，一个已使用数组，一个待使用数组，一个需使用数组  
点击后把当前点击的数据存到一个数组 点到第六个的时候 `shift()`  
loadash函数\_.xor用来筛选非重复的元素，代表此颜色id还没有用过，可以放到待使用数组中  
其实就是对数据的操作  
完毕

[20200707142159498.gif_pic_center]: https://img-blog.csdnimg.cn/20200707142159498.gif#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dkODEzMjU_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200707143725399.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dkODEzMjU=,size_16,color_FFFFFF,t_70