Apache Echarts Change Legend 如何为 select 添加替代行为

Question

我有一个图表，现在默认情况下在图例中，当您单击某个项目时，它会在图表中消失，而不是我想要实现的效果，当您单击该项目时，当您取消选择所有项目时，您只能在图表中看到该项目其他人像开始一样返回。我怎样才能实现这一点。这是我的代码

 const getChartSeries = (): any[] => {
        return Object.entries(dataMap).map(([key, values]) => {
            const series: any = {
                name: key,
                type: 'line',
                smooth: true,
                showSymbol: false,
                data: values.map(({timestamp, value}) => [timestamp, value]),
                lineStyle: {
                    normal: {
                        color: colors[colorIndex],

                    }
                },
                itemStyle: {
                    color: colors[colorIndex]
                }
            };

            colorIndex = (colorIndex + 1) % colors.length;
            return series;

        });
    };

  const chartWithData=(
      <ReactEcharts
          ref={chartRef}
          option={{
              tooltip: {
                  trigger: 'axis',
                  formatter: function (params: { axisValueLabel: string, marker: string, seriesName: string, value: [Date, number] }[]) {
                      const formattedSeriesName = (name: string) => {
                          return name.replace('_', ' ').replace(/\b\w/g, char => char.toUpperCase());
                      };

                      const time = params[0].axisValueLabel;
                      let content = '<div style="line-height: 1.5; text-align: left;">' + time + '</div>';
                      let names = '';
                      let values = '';

                      params.forEach(function (item: { axisValueLabel: string, marker: string, seriesName: string, value: [Date, number] }) {
                          const formattedName = formattedSeriesName(item.seriesName);
                          names += '<div style="line-height: 1.5; text-align: left; ">' + item.marker + ' ' + formattedName + '</div>';
                          let value: string;
                          if (Number.isInteger(item.value[1])) {
                              value = item.value[1].toString();
                          } else {
                              value = item.value[1].toFixed(2);
                          }
                          values += '<div style="line-height: 1.5; text-align: right; font-weight: bold;">' + value + '</div>';
                      });

                      content += '<div style="display: inline-block; vertical-align: top; margin-right: 10px;">' + names + '</div>' +
                          '<div style="display: inline-block; vertical-align: top;">' + values + '</div>';

                      return content;
                  }

              },
              legend: {
                  data: Object.keys(dataMap),
                  bottom: 1,
                  show: true,
                  type: 'scroll',
                  icon: 'circle',
                  formatter: function (name: string) {
                      const formattedName = name.replace('_', ' ').replace(/\b\w/g, char => char.toUpperCase());
                      return formattedName;
                  },
              },
              grid: {
                  left: '13%',
                  right: '5%',
                  top: '10%',
                  bottom: '15%'
              },
              xAxis: {
                  type: 'time',
                  splitNumber: 5,
                  min: now.getTime() - Number(selectedTime) * 1000,
                  max: now,
                  axisLabel: {
                      formatter: function (value: Date) {
                          return echarts.format.formatTime('hh:mm', value);
                      }
                  },
              },
              yAxis: {
                  type: 'value',
                  axisLine: {
                      show: true,
                  },
                  name: 'Transaction / minute',
                  nameLocation: "middle",
                  nameGap:yAxisNameGap,
              },
              series: getChartSeries(),
          }}
          style={{height:paperSize.height-40,padding:5}}
      />
  );

我怎样才能实现这种行为

Answer 1

您可以使用 chart 事件

legendselectchanged

并基于此设置 legend selected 属性。

示例：

myChart.on('legendselectchanged', function(params) {
  delete params.selected[params.name];
  if (Object.values(params.selected).every(bool => !bool)) {
    for (let name in params.selected) {
      params.selected[name] = true;
    }
  } else {
    for (let name in params.selected) {
      params.selected[name] = false;
    }
  }
  
  params.selected[params.name] = true;
  myChart.setOption({legend: {selected: params.selected}});
});