最近的一个需求，做出来之后觉得很简单的一个操作，分享出来
需求是这样的：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;
变色操作参考echarts官网
series > itemStyle > normal > color 的用法自行搜索 = =
主要代码是在两个函数里
大概就是仨个数组，一个已使用数组，一个待使用数组，一个需使用数组
点击后把当前点击的数据存到一个数组 点到第六个的时候 shift()
loadash函数_.xor用来筛选非重复的元素，代表此颜色id还没有用过，可以放到待使用数组中
其实就是对数据的操作
完毕