react+ts按需加载echarts_react ts echarts-CSDN博客

本文链接：https://blog.csdn.net/xiaobai_20190815/article/details/126833683

该博客介绍了如何在TypeScript环境中配置并使用ECharts，包括导入必要的图表和组件，如BarChart、LineChart、PieChart，以及TitleComponent、TooltipComponent等。同时，展示了如何注册组件，设置渲染器，并在React应用中使用ECharts。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

配置echarts.ts


// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';

// 引入柱状图图表等，图表后缀都为 Chart
import { BarChart, LineChart, PieChart } from 'echarts/charts';
// 系列类型的定义后缀都为 SeriesOption
import type { BarSeriesOption, LineSeriesOption, PieSeriesOption } from 'echarts/charts';

import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  // AriaComponent,

  // 数据集组件
  DatasetComponent,
  // 内置数据转换器组件 (filter, sort)
  TransformComponent,
} from 'echarts/components';
// 组件类型的定义后缀都为 ComponentOption
import type {
  TitleComponentOption,
  TooltipComponentOption,
  GridComponentOption,
  LegendComponentOption,
  DatasetComponentOption,
} from 'echarts/components';

// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';

// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
export type ECOption = echarts.ComposeOption<
  | BarSeriesOption
  | LineSeriesOption
  | PieSeriesOption
  | TitleComponentOption
  | TooltipComponentOption
  | GridComponentOption
  | DatasetComponentOption
  | LegendComponentOption
>;

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent,

  BarChart,
  LineChart,
  PieChart,

  LabelLayout,
  UniversalTransition,

  CanvasRenderer,
]);

export default echarts;

调用

import echarts from '@/echarts';



......


 <ReactEChartsCore
                style={{ height: 200 }}
                echarts={echarts}
                option={options}
                notMerge={true}
                lazyUpdate={true}
              
              />