hustcc / echarts-for-react

⛳️ Apache ECharts components for React wrapper. 一个简单的 Apache echarts 的 React 封装。
https://git.hust.cc/echarts-for-react
MIT License
4.51k stars 629 forks source link

able to use custom transform? #509

Open tytx opened 1 year ago

tytx commented 1 year ago

can this library be used with https://www.npmjs.com/package/echarts-simple-transform for data aggregation? how to "echarts.registerTransform(ecSimpleTransform.aggregate);"?

CAglarBilkent commented 1 year ago

Hi, Is there a way to use the transform with this library? I get this error:

Error: Can not find transform on type "ecStat:regression".

antoineguiral commented 1 year ago

Same question here : I can't manage to use ecSimpleTransform event when using ReactEchartsCore. Any advice? thank you!

CAglarBilkent commented 1 year ago

@antoineguiral Here is what I did: I created a file named "echarts-name.d.ts" I have the following code:

import type { ExternalDataTransform } from '@manufac/echarts-simple-transform';

/**
 * Needed because of: https://github.com/ecomfe/echarts-stat/issues/35
 * Module augmentation: https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation
 */
declare module 'echarts-stat' {
  let transform: {
    regression: ExternalDataTransform;
    histogram: ExternalDataTransform;
    clustering: ExternalDataTransform;
  };
}

And in the file where I use the transformation, I have something like this

import * as echarts from 'echarts/core';
import ReactECharts from 'echarts-for-react';
import ecStat from 'echarts-stat';

export function MyComponentName(props) {
  echarts.registerTransform(ecStat.transform.regression);
  //more code below :D
  //...

  /*
  And when I create the options for the graph, I use the transformation like this:
    transform: {
      type: 'ecStat:regression',
      config: { method: 'polynomial', order: 3 },
    }

  */

}    

Sorry I cannot provide the whole code since it is long and complicated. You need to play with it to make it work. I had tried a bunch of different things, this one worked for me in the end. If you google it, you can find similar examples where people have the code in "echarts-name.d.ts" example above.