echarts#ECharts TypeScript Examples

// allows to lazily bind to only those events that are requested through the `@Output` by parent components
  // see https://stackoverflow.com/questions/51787972/optimal-reentering-the-ngzone-from-eventemitter-event for more info
  private createLazyEvent<T>(eventName: string): EventEmitter<T> {
    return this.chartInit.pipe(
      switchMap((chart: ECharts) => new Observable(observer => {
        chart.on(eventName, (data: T) => this.ngZone.run(() => observer.next(data)))
        return () => chart.off(eventName)
      }))
    ) as EventEmitter<T>
  }

getAutoFunnelTopPosition = (config: {
  chart: ECharts;
  height: number;
  sort: 'ascending' | 'descending' | 'none';
  legendPos: string;
}): number => {
  const { chart, height, sort, legendPos } = config;
  if (legendPos !== 'left' && legendPos !== 'right') return 8;
  if (!height) return 16;
  // 升序
  if (sort === 'ascending') return 16;

  const chartHeight = chart.getHeight();
  if (!chartHeight) return 16;
  // 24 marginBottom
  return chartHeight - 24 - height;
}

// deprecated, left for compatibility reasons to avoid triggering major version

  // ngx-echarts events
  @Output() chartInit = new EventEmitter<ECharts>()

private chart: ECharts

LineGraph: React.FC<CP_LINE_GRAPH.Props> = (props) => {
  const { props: configProps, data, operations, execOperation, customOp } = props;
  const color = themeColor[configProps.theme ?? 'light'];
  const chartRef = React.useRef<ECharts>();
  const dataRef = React.useRef(data);
  dataRef.current = data;

  const clearBrush = () => {
    if (chartRef.current) {
      chartRef.current.dispatchAction({
        type: 'brush',
        areas: [],
      });
    }
  };

  const [option, onEvents] = React.useMemo(() => {
    const { dimensions, xAxis, yAxis, yOptions, xOptions } = data;
    const xAxisData = xAxis?.values || [];
    const chartOption = {
      backgroundColor: 'transparent',
      tooltip: {
        trigger: 'axis',
        formatter: (param: any[]) => {
          const { axisValue } = param[0] || [];
          const xStructure = xOptions?.structure || { type: 'string', precision: '' };
          const tips = [`${formatValue(xStructure.type, xStructure.precision, axisValue)}`];
          param.forEach((item) => {
            const { structure } = yOptions.find((t) => t.dimension?.includes(item.seriesName)) ?? yOptions[0];
            tips.push(
              `${item.marker} ${item.seriesName}: ${formatValue(structure.type, structure.precision, item.data)}`,
            );
          });
          return tips.join('</br>');
        },
      },
      grid: {
        containLabel: true,
        left: 30,
        bottom: 30,
        top: 10,
        right: 0,
      },
      legend: {
        data: (dimensions ?? []).map((item) => ({
          name: item,
          textStyle: {
            color: colorToRgb(color, 0.6),
          },
          icon: 'reat',
          itemWidth: 12,
          itemHeight: 3,
          type: 'scroll',
        })),
        bottom: true,
      },
      xAxis: {
        data: xAxisData,
        axisLabel: {
          color: colorToRgb(color, 0.6),
          formatter:
            xOptions?.structure?.enable && xAxisData.length
              ? (v: number) =>
                  formatValue(
                    xOptions?.structure.type,
                    xOptions?.structure.precision,
                    v,
                    xAxisData[0],
                    xAxisData[xAxisData.length - 1],
                  )
              : undefined,
        },
        splitLine: {
          show: false,
        },
      },
      yAxis: (yOptions ?? []).map(({ structure }) => {
        const { enable, type, precision } = structure;
        return {
          type: 'value',
          axisLabel: {
            color: colorToRgb(color, 0.3),
            formatter: enable ? (v: number) => formatValue(type, precision, v) : undefined,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: [colorToRgb(color, 0.1)],
            },
          },
        };
      }),
      series: (yAxis ?? []).map((item, index) => {
        let temp = {};
        if (index === 0) {
          temp = {
            areaStyle: {
              normal: {
                color: genLinearGradient(theme.color[0]),
              },
            },
          };
        }
        return {
          type: 'line',
          name: item.dimension,
          data: item.values,
          ...temp,
        };
      }),
    };
    clearBrush();
    const chartEvents = {};
    if (operations?.onSelect || customOp?.onSelect) {
      Object.assign(chartOption, {
        brush: {
          toolbox: [''],
          throttleType: 'debounce',
          throttleDelay: 300,
          xAxisIndex: 0,
        },
      });
      Object.assign(chartEvents, {
        brushSelected: (params: IBrushSelectedParams) => {
          const { areas } = params.batch[0] ?? {};
          const xAxisValues = dataRef.current.xAxis.values || [];
          if (areas?.length) {
            const { coordRange } = areas[0];
            if (coordRange?.length) {
              const [startIndex, endIndex] = coordRange;
              if (startIndex >= endIndex) {
                clearBrush();
                return;
              }
              const start = xAxisValues[Math.max(startIndex, 0)];
              const end = xAxisValues[Math.min(endIndex, xAxisValues.length - 1)];
              customOp?.onSelect && customOp.onSelect({ start, end });
              operations?.onSelect && execOperation(operations.onSelect, { start, end });
            }
          }
        },
      });
    }
    return [chartOption, chartEvents];
  }, [color, data, operations, customOp]);

  const handleReady = React.useCallback(
    (chart: ECharts) => {
      chartRef.current = chart;
      if (operations?.onSelect || customOp?.onSelect) {
        chart.dispatchAction({
          type: 'takeGlobalCursor',
          key: 'brush',
          brushOption: {
            brushType: 'lineX',
            brushMode: 'single',
          },
        });
      }
    },
    [operations?.onSelect, customOp?.onSelect],
  );

  return (
    <div className={`px-4 pb-2 ${configProps.className ?? ''}`} style={{ backgroundColor: colorToRgb(color, 0.02) }}>
      {data.title ? (
        <div
          className={`title h-12 flex items-center justify-between ${
            configProps.theme === 'dark' ? 'text-white' : 'text-normal'
          }`}
        >
          {data.title}
        </div>
      ) : null}
      <div className={data.title ? '' : 'pt-4'}>
        {option.series.length && option.yAxis.length ? (
          <Echarts
            key={Date.now()} // FIXME render exception occasionally，the exact reason is not yet clear
            onEvents={onEvents}
            onChartReady={handleReady}
            option={option}
            style={{
              width: '100%',
              height: '170px',
              minHeight: 0,
              ...configProps.style,
            }}
          />
        ) : (
          <EmptyHolder relative />
        )}
      </div>
    </div>
  );
}