echarts for react 插件解决legend图例点击最后一个不可点击，至少保留一个 legend

这里使用echarts for react

npm i echarts --save

npm i echarts-for-react --save

代码如下：

import React from 'react';
import 'url-search-params-polyfill';
// import YearPicker from "./components/YearPicker"
import ReactEcharts from 'echarts-for-react';
import './App.css'
import { Row, Col, Button } from 'antd';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {}
  }
  componentDidMount() {

  }
  getOption = () => {

    var colors = ['#5793f3', '#d14a61', '#675bba'];
    return {
      color: colors,

      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        }
      },
      grid: {
        right: '20%'
      },
      toolbox: {
        feature: {
          dataView: {show: true, readOnly: false},
          restore: {show: true},
          saveAsImage: {show: true}
        }
      },
      legend: {
        data:['蒸发量','降水量','平均温度']
      },
      xAxis: [
        {
          type: 'category',
          axisTick: {
            alignWithLabel: true
          },
          data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '蒸发量',
          min: 0,
          max: 250,
          position: 'right',
          axisLine: {
            lineStyle: {
              color: colors[0]
            }
          },
          axisLabel: {
            formatter: '{value} ml'
          }
        },
        {
          type: 'value',
          name: '降水量',
          min: 0,
          max: 250,
          position: 'right',
          offset: 80,
          axisLine: {
            lineStyle: {
              color: colors[1]
            }
          },
          axisLabel: {
            formatter: '{value} ml'
          }
        },
        {
          type: 'value',
          name: '温度',
          min: 0,
          max: 25,
          position: 'left',
          axisLine: {
            lineStyle: {
              color: colors[2]
            }
          },
          axisLabel: {
            formatter: '{value} °C'
          }
        }
      ],
      series: [
        {
          name:'蒸发量',
          type:'bar',
          data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
        },
        {
          name:'降水量',
          type:'bar',
          yAxisIndex: 1,
          data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
        },
        {
          name:'平均温度',
          type:'line',
          yAxisIndex: 2,
          data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
        }
      ]
    }
  }
  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===select_value.length) {
      option.legend[0].selected[params.name] = true;
    }
    echarts_instance.setOption(option)
  }
  render (){
    return (
      <div>
        <Row style={{padding: '20px'}}>
          <h3>只保留一个图例</h3>
          <ReactEcharts
            notMerge
            onEvents={this.onEvents()}
            option={this.getOption()}
            ref={(e) => this.echart = e}
          />
        </Row>

      </div>
    );
  }
}

最终有一个图例不可点击

详情见我码云项目地址https://gitee.com/lenggushi/EchartsDemo-react.git