react.js 使用Echarts 实现点击选中图例时候最多只能选两个，最少不得少于一个

react.js 使用Echarts 实现点击选中图例时候最多只能选两个，最少不得少于一个

效果如下

1.安装echarts-for-react插件

npm install --save echarts-for-react

2.引入

import ReactEcharts from 'echarts-for-react';

3.使用

getShadow() {
    const {
      consolidatStatements: { Trend },
    } = this.props;
    let dateList = Trend.dateList ? Trend.dateList.map(item => item.dimension) : [];
    const option = {
      title: [
        {
          text: '',
        },
      ],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999',
          },
        },
      },
      legend: {
        icon: 'roundRect', //形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
        data: [
          '收益',
          'ecpm',
          'eCPM API',
          '广告请求',
          '流量请求',
          '请求API',
          '展示',
          '展示API',
          '点击',
          '点击API',
        ],
        selected: {
          收益: Trend['cost'] ? true : false,
          ecpm: Trend['ecpm'] ? true : false,
          'eCPM API': Trend['ecpmApi'] ? true : false,
          广告请求: Trend['requestNum'] ? true : false,
          流量请求: Trend['flowRequestNum'] ? true : false,
          请求API: Trend['apiRequestNum'] ? true : false,
          展示: Trend['showNum'] ? true : false,
          展示API: Trend['apiShowNum'] ? true : false,
          点击: Trend['clickNum'] ? true : false,
          点击API: Trend['apiClickNum'] ? true : false,
        },
      },
      grid: {
        left: '1%',
        right: '1%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: dateList,
      },
      yAxis: [
        {
          type: 'value',
        },
        {
          splitLine: { show: false },
          type: 'value',
          min: 0,
          max: 100,
          interval: 15,
          axisLabel: {
            formatter: '{value} %',
          },
        },
      ],
      series: [
        {
          name: '收益',
          type: 'line',
          data: Trend['cost'] ? Trend['cost'] : [],
        },
        {
          name: 'ecpm',
          type: 'line',
          data: Trend['ecpm'] ? Trend['ecpm'] : [],
        },
        {
          name: 'eCPM API',
          type: 'line',
          data: Trend['ecpmApi'] ? Trend['ecpmApi'] : [],
        },
        {
          name: '广告请求',
          type: 'line',
          data: Trend['requestNum'] ? Trend['requestNum'] : [],
        },
        {
          name: '流量请求',
          type: 'line',
          data: Trend['flowRequestNum'] ? Trend['flowRequestNum'] : [],
        },
        {
          name: '请求API',
          type: 'line',
          data: Trend['apiRequestNum'] ? Trend['apiRequestNum'] : [],
        },
        {
          name: '展示',
          type: 'line',
          data: Trend['showNum'] ? Trend['showNum'] : [],
        },
        {
          name: '展示API',
          type: 'line',
          data: Trend['apiShowNum'] ? Trend['apiShowNum'] : [],
        },
        {
          name: '点击',
          type: 'line',
          data: Trend['clickNum'] ? Trend['clickNum'] : [],
        },
        {
          name: '点击API',
          type: 'line',
          data: Trend['apiClickNum'] ? Trend['apiClickNum'] : [],
        },
      ],
    };
    return option;
  }
//事件
  onEvents = () => {
    return {
    	//图例组件用户切换图例开关会触发该事件。
      legendselectchanged: this.onChartLegendselectChanged,
    };
  };
    onChartLegendselectChanged = params => {
    const echarts_instance = this.echart.getEchartsInstance();
    const option = echarts_instance.getOption();
    const select_value = Object.values(params.selected);
    let n = 0;
    select_value.map(item => {
      if (!item) {
        n++;
      }
    });
    if (n <= 7) {
      let paramsName = [];
      for (var key in params.selected) {
        if (params.selected[key]) {
          paramsName.push(key);
        }
      }
      let paramsArray = paramsName;
      paramsName = paramsName.filter(item => item !== params.name);
      option.legend[0].selected[paramsName[0]] = false;
      paramsArray = paramsArray.filter(item => item !== paramsName[0]);
      let dimensionList = [];
      paramsArray.map(item => {
        dimensionList.push(
          {
            收益: 'cost',
            ecpm: 'ecpm',
            'eCPM API': 'ecpmApi',
            广告请求: 'requestNum',
            流量请求: 'flowRequestNum',
            请求API: 'apiRequestNum',
            展示: 'showNum',
            展示API: 'apiShowNum',
            点击: 'clickNum',
            点击API: 'apiClickNum',
          }[item]
        );
      });
      this._loadTodayTrendPlanCount({ dimensionList: dimensionList });
      this.setState({
        dimensionList,
      });
    } else {
      // legend图例点击最后一个不可点击，至少保留一个 legend
      if (n === select_value.length) {
        option.legend[0].selected[params.name] = true;
      } else {
        // 否则..
        let keyArray = [];
        let dimensionKeyList = [];
        for (var keySelect in params.selected) {
          if (params.selected[keySelect]) {
            keyArray.push(keySelect);
          }
        }
        keyArray.map(item => {
          dimensionKeyList.push(
            {
              收益: 'cost',
              ecpm: 'ecpm',
              'eCPM API': 'ecpmApi',
              广告请求: 'requestNum',
              流量请求: 'flowRequestNum',
              请求API: 'apiRequestNum',
              展示: 'showNum',
              展示API: 'apiShowNum',
              点击: 'clickNum',
              点击API: 'apiClickNum',
            }[item]
          );
        });
        this._loadTodayTrendPlanCount({ dimensionList: dimensionKeyList });
        this.setState({
          dimensionList: dimensionKeyList,
        });
      }
    }
    echarts_instance.setOption(option);
  };
    <ReactEcharts
		id="main"
		option={this.getShadow()}
		className="react_for_echarts"
		onEvents={this.onEvents()}
		ref={e => (this.echart = e)}
  />