echarts.tsx 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. import type {
  2. AxisPointerComponentOption,
  3. ECharts,
  4. LineSeriesOption,
  5. PatternObject,
  6. } from 'echarts';
  7. import type ReactEchartsCore from 'echarts-for-react/lib/core';
  8. export type SeriesDataUnit = {
  9. name: string | number;
  10. value: number;
  11. itemStyle?: {
  12. color?: string;
  13. };
  14. // number because we sometimes use timestamps
  15. onClick?: (series: Series, instance: ECharts) => void;
  16. };
  17. export type Series = {
  18. data: SeriesDataUnit[];
  19. seriesName: string;
  20. areaStyle?: {
  21. color: string | PatternObject;
  22. opacity: number;
  23. };
  24. color?: string;
  25. id?: string;
  26. lineStyle?: AxisPointerComponentOption['lineStyle'];
  27. // https://echarts.apache.org/en/option.html#series-line.z
  28. markLine?: LineSeriesOption['markLine'];
  29. stack?: string;
  30. // https://echarts.apache.org/en/option.html#series-line.stack
  31. z?: number;
  32. };
  33. export type ReactEchartsRef = ReactEchartsCore;
  34. export type EChartEventHandler<P> = (params: P, instance: ECharts) => void;
  35. export type EChartChartReadyHandler = (instance: ECharts) => void;
  36. export type EChartHighlightHandler = EChartEventHandler<any>;
  37. /**
  38. * XXX: These are incomplete types and can also vary depending on the component type
  39. *
  40. * Taken from https://echarts.apache.org/en/api.html#events.Mouse%20events
  41. */
  42. interface EChartMouseEventParam {
  43. // color of component (make sense when componentType is 'series')
  44. color: string;
  45. // subtype of the component to which the clicked glyph belongs
  46. // i.e. 'scatter', 'line', etc
  47. componentSubType: string;
  48. // type of the component to which the clicked glyph belongs
  49. // i.e., 'series', 'markLine', 'markPoint', 'timeLine'
  50. componentType: string;
  51. // incoming raw data item
  52. data: Record<string, any>;
  53. // data index in incoming data array
  54. dataIndex: number;
  55. // Some series, such as sankey or graph, maintains more than
  56. // one types of data (nodeData and edgeData), which can be
  57. // distinguished from each other by dataType with its value
  58. // 'node' and 'edge'.
  59. // On the other hand, most series has only one type of data,
  60. // where dataType is not needed.
  61. dataType: string;
  62. // data name, category name
  63. name: string;
  64. seriesId: string;
  65. // series index in incoming option.series (make sense when componentType is 'series')
  66. seriesIndex: number;
  67. // series name (make sense when componentType is 'series')
  68. seriesName: string;
  69. // series type (make sense when componentType is 'series')
  70. // i.e., 'line', 'bar', 'pie'
  71. seriesType: string;
  72. // incoming data value
  73. value: number | number[];
  74. }
  75. export type EChartMouseOutHandler = EChartEventHandler<EChartMouseEventParam>;
  76. export type EChartMouseOverHandler = EChartEventHandler<EChartMouseEventParam>;
  77. export type EChartClickHandler = EChartEventHandler<EChartMouseEventParam>;
  78. export type EChartDataZoomHandler = EChartEventHandler<{
  79. /**
  80. * percentage of zoom finish position, 0 - 100
  81. */
  82. end: number;
  83. /**
  84. * percentage of zoom start position, 0 - 100
  85. */
  86. start: number;
  87. type: 'datazoom';
  88. /**
  89. * data value of zoom finish position; only exists in zoom event of
  90. * triggered by toolbar
  91. */
  92. endValue?: number;
  93. /**
  94. * data value of zoom start position; only exists in zoom event of
  95. * triggered by toolbar
  96. */
  97. startValue?: number;
  98. }>;
  99. export type DataPoint = Pick<SeriesDataUnit, 'name' | 'value'>;
  100. export type EChartRestoreHandler = EChartEventHandler<{type: 'restore'}>;
  101. export type EChartFinishedHandler = EChartEventHandler<{}>;
  102. export type EChartRenderedHandler = EChartEventHandler<{}>;