Apache Echarts Change Legend how to add alternative behavior for select

Question

I have a chart where now by default in the legend when you click on an item it disappears in the chart instead of that I want to achieve when you click on the item you see only that item in the chart when you deselect it all the others return as at the beginning .How can I achieve this.This is my code

 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}}
      />
  );

How can I achieve this behavior

Answer 1

You can use the chart event legendselectchanged and set the legend selected property based on that.

Example:

myChart.on('legendselectchanged', function(params) {
  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}});
});