feat: add echarts 5 support

BREAKING CHANGE: drop support for echarts 3 and 4

jest.config.js

@@ -1,5 +1,6 @@
 module.exports = {
-  preset: 'ts-jest',
+  preset: 'ts-jest/presets/js-with-ts',
   testEnvironment: 'jsdom',
   setupFilesAfterEnv: ['./jest.setup.ts'],
+  transformIgnorePatterns: ['/node_modules/(?!echarts|zrender)']
 };

package.json

@@ -37,7 +37,7 @@
     "react-keyed-flatten-children": "^1.2.0"
   },
   "peerDependencies": {
-    "echarts": "^3.0.0 || ^4.0.0",
+    "echarts": "^5.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
   "author": "Doma <[email protected]>",
@@ -73,7 +73,6 @@
     "@rsuite/document-nav": "^1.0.0",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
-    "@types/echarts": "^4.9.2",
     "@types/jest": "^26.0.20",
     "@types/lodash.merge": "^4.6.6",
     "@types/lodash.omit": "^4.5.6",
@@ -87,7 +86,7 @@
     "chai": "^3.5.0",
     "compression-webpack-plugin": "^3.1.0",
     "css-loader": "^2.1.0",
-    "echarts": "^4.9.0",
+    "echarts": "^5.0.0",
     "enzyme": "^3.1.0",
     "enzyme-adapter-react-16": "^1.9.1",
     "es5-shim": "^4.1.14",

src/ECharts.tsx

@@ -1,14 +1,20 @@
 import React, { useContext, useImperativeHandle, useRef } from 'react';
 import _merge from 'lodash.merge';
 import ReactEchartsCore from 'echarts-for-react/lib/core';
-import echarts from 'echarts/lib/echarts';
+import * as echarts from 'echarts/core';
+import type { ECharts as EChartsInstance, EChartsOption, SeriesOption } from 'echarts';
+import { CanvasRenderer } from 'echarts/renderers';
 import { createEChartsOptionFromChildren } from './utils';
 import './theme/rsuite_light';
 import './theme/rsuite_dark';
 import { EChartsContext } from './constants';
 
+echarts.use([
+  CanvasRenderer
+]);
+
 const styles: {
-  [key: string]: React.CSSProperties
+  [key: string]: React.CSSProperties;
 } = {
   blockCenter: {
     width: '100%',
@@ -34,7 +40,7 @@ const defaultOption = {
 export interface EChartsProps extends React.HTMLAttributes<HTMLDivElement> {
   height?: number;
   loading?: boolean;
-  option?: echarts.EChartOption;
+  option?: EChartsOption;
   locale?: {
     emptyMessage?: React.ReactNode;
     loading?: React.ReactNode;
@@ -43,23 +49,25 @@ export interface EChartsProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 export interface ChartComponentProps<DataType = any[]> extends EChartsProps {
-  name?: string;
+  name?: SeriesOption['name'];
   data?: DataType;
 }
 
 // ECharts with empty message and loading
-function ECharts({
-  height = 300,
-  locale = {
-    emptyMessage: 'No data found',
-    loading: 'Loading...'
-  },
-  option = {},
-  children,
-  ...props
-}: EChartsProps, ref: any) {
-
-  const echartsRef = useRef<echarts.ECharts>();
+function ECharts(
+  {
+    height = 300,
+    locale = {
+      emptyMessage: 'No data found',
+      loading: 'Loading...'
+    },
+    option = {},
+    children,
+    ...props
+  }: EChartsProps,
+  ref: any
+) {
+  const echartsRef = useRef<EChartsInstance>();
 
   useImperativeHandle(ref, () => echartsRef.current);
 
@@ -72,18 +80,14 @@ function ECharts({
    * 3. state.option (components 的 props)
    */
   function getEChartsOption() {
-    return _merge({},
-      defaultOption,
-      option,
-      createEChartsOptionFromChildren(children, context)
-    );
+    return _merge({}, defaultOption, option, createEChartsOptionFromChildren(children, context));
   }
 
   /**
    * 判断 option 是否没有数据，
    * 用于显示数据为空的 placeholder
    */
-  function isDataEmpty(option: { dataset: any; }) {
+  function isDataEmpty(option: { dataset: any }) {
     if (option.dataset) {
       return isDatasetEmpty(option);
     }
@@ -94,7 +98,7 @@ function ECharts({
   /**
    * 进入此方法时一定存在 option.dataset
    */
-  function isDatasetEmpty(option: { dataset: any; }) {
+  function isDatasetEmpty(option: { dataset: any }) {
     if (!option.dataset.source) {
       return true;
     }
@@ -106,9 +110,15 @@ function ECharts({
     return Object.getOwnPropertyNames(option.dataset.source).length < 1;
   }
 
-  function isSeriesEmpty(option: { dataset?: any; series?: any; }) {
-    return !option.series ||
-      option.series.reduce((empty: any, serie: { data: string | any[]; }) => empty && (!serie.data || serie.data.length < 1), true);
+  function isSeriesEmpty(option: { dataset?: any; series?: any }) {
+    return (
+      !option.series ||
+      option.series.reduce(
+        (empty: any, serie: { data: string | any[] }) =>
+          empty && (!serie.data || serie.data.length < 1),
+        true
+      )
+    );
   }
 
   function renderEmptyMessage() {
@@ -130,16 +140,11 @@ function ECharts({
     );
   }
 
-  function onChartReady(echarts: echarts.ECharts) {
+  function onChartReady(echarts: EChartsInstance) {
     echartsRef.current = echarts;
   }
 
-  const {
-    className,
-    style,
-    loading,
-    ...echartsForReactProps
-  } = props;
+  const { className, style, loading, ...echartsForReactProps } = props;
   const echartsOption: any = children ? getEChartsOption() : option;
   const dataEmpty = isDataEmpty(echartsOption);
 
@@ -168,4 +173,4 @@ if (process.env.NODE_ENV !== 'production') {
   ECharts.displayName = 'ECharts';
 }
 
-export default React.forwardRef<echarts.ECharts, EChartsProps>(ECharts);
+export default React.forwardRef<EChartsInstance, EChartsProps>(ECharts);

src/charts/LineChart.tsx

@@ -26,7 +26,7 @@ function LineChart(
   ref: any
 ) {
   function renderDefaultXAxis() {
-    return <XAxis data={data!.map(([category]) => category)} />;
+    return <XAxis {...({ data: data!.map(([category]) => category) } as any)} />;
   }
 
   function renderDefaultLine() {

src/charts/MapChart.tsx

@@ -15,18 +15,16 @@ const mapVisualMapColors = [
   'rgba(8, 132, 204, .3)'
 ];
 
-interface MapChartProps extends ChartComponentProps<MapProps['data']>, MapProps {
+interface MapChartProps
+  extends ChartComponentProps<MapProps['data']>,
+    Omit<MapProps, 'color' | 'height' | 'id'> {
   visualMap?: boolean;
 }
 
-function MapChart({
-  name,
-  data = [],
-  visualMap: shouldShowVisualMap = true,
-  children,
-  ...props
-}: MapChartProps, ref: any) {
-
+function MapChart(
+  { name, data = [], visualMap: shouldShowVisualMap = true, children, ...props }: MapChartProps,
+  ref: any
+) {
   function renderDefaultMap() {
     return <Map name={name} data={data} {...props} />;
   }