A recent demand, an operation that feels very simple after making it, share it
The requirement is this: echarts histogram, click to select the color change, you can select up to five columns, five columns and five colors, and cannot be repeated.
First look at the effect:
Then on the code:
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;
For color change operation, please refer to the usage of echarts official website
series> itemStyle> normal> color to search by yourself ==
The main code is in two functions
It is about three arrays, one used array, one to be used array, and one to use array.
After clicking, save the currently clicked data to an array. When the point reaches the sixth, shift()
loadash function _.xor is used to filter non-repeated elements , on behalf of this color id has not yet been used, you can use an array to be placed in
fact, the operation of the data
is completed