echarts 配置正常，图表显示不正常

背景

接手一个别人的项目，图表使用Echart，已经封装好，我直接拿来使用。 想要标志最大、最小值，配置了series.markPoint，但是图表没有显示标志。

看官网，配置markPoint后，效果如下：

排查了配置项，使用方法，发现一切正常。版本也没有问题。最后定位到问题，发现是按需引入导致的问题。

原因分析

排除echarts配置问题后，我重新看了echarts的封装代码，发现在引入echarts时，缺少了相关组件，所以导致配置markLPoint后，无法正常显示。

项目是在 TypeScript 中按需引入的，原代码如何：

import * as echarts from 'echarts/core';

import {
  BarChart,
  LineChart,
  PieChart,
  MapChart,
  PictorialBarChart,
  RadarChart,
} from 'echarts/charts';

import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  PolarComponent,
  AriaComponent,
  ParallelComponent,
  LegendComponent,
  RadarComponent,
  ToolboxComponent,
  DataZoomComponent,
  VisualMapComponent,
  TimelineComponent,
  CalendarComponent,
  GraphicComponent,
} from 'echarts/components';

import { SVGRenderer } from 'echarts/renderers';

echarts.use([
  LegendComponent,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  PolarComponent,
  AriaComponent,
  ParallelComponent,
  BarChart,
  LineChart,
  PieChart,
  MapChart,
  RadarChart,
  SVGRenderer,
  PictorialBarChart,
  RadarComponent,
  ToolboxComponent,
  DataZoomComponent,
  VisualMapComponent,
  TimelineComponent,
  CalendarComponent,
  GraphicComponent,
]);

export default echarts;

从以上引入可以看出，import了常用的组件，但是在echarts中，要想实现markPoint效果，还需要单独引入 MarkPointComponent。

原因定位到了，将 MarkPointComponent 引入后，markPoint效果就正常了。

修改后代码：

import * as echarts from 'echarts/core';

import {
  BarChart,
  LineChart,
  PieChart,
  MapChart,
  PictorialBarChart,
  RadarChart,
} from 'echarts/charts';

import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  PolarComponent,
  AriaComponent,
  ParallelComponent,
  LegendComponent,
  RadarComponent,
  ToolboxComponent,
  DataZoomComponent,
  VisualMapComponent,
  TimelineComponent,
  CalendarComponent,
  GraphicComponent,
  MarkPointComponent,
} from 'echarts/components';

import { SVGRenderer } from 'echarts/renderers';

echarts.use([
  LegendComponent,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  PolarComponent,
  AriaComponent,
  ParallelComponent,
  BarChart,
  LineChart,
  PieChart,
  MapChart,
  RadarChart,
  SVGRenderer,
  PictorialBarChart,
  RadarComponent,
  ToolboxComponent,
  DataZoomComponent,
  VisualMapComponent,
  TimelineComponent,
  CalendarComponent,
  GraphicComponent,
  MarkPointComponent,
]);

export default echarts;

写在最后

使用Echarts时，发现配置都正常，但是图表没有按配置预期显示，可以看看项目是不是按需引入的，是不是缺少相关配置项组件。

像图表的title、tooltip等，如果是按需引入，都要明确引进来，否则，图表无法正常显示对应配置项。

这是一个很低级的问题，也是一个很容易忽略的问题。如果不是自己封装的Echarts，很难想到问题出在引入上。

写篇文章，长个记性。