echarts点击选中操作（react）

最新推荐文章于 2023-05-09 21:31:07 发布

狗蛋今天睡醒了吗

最新推荐文章于 2023-05-09 21:31:07 发布

阅读量3.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： react echarts 文章标签： react echart javascript

本文链接：https://blog.youkuaiyun.com/gd81325/article/details/107180674

react 同时被 2 个专栏收录

8 篇文章

订阅专栏

echarts

3 篇文章

订阅专栏

本文介绍了一个React应用中使用Echarts实现柱状图点击选中并变色的需求。允许最多选中五个柱子，每个柱子对应不同颜色且不重复。关键在于利用Echarts的itemStyle.normal.color属性及lodash的_.xor函数处理颜色数组，确保颜色不重复。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

先看个效果：

在这里插入图片描述

然后上代码：

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;