旧项目ECharts 4 升级到 V5的注意事项

1. 引用 ECharts

v5里面去除了去除 default exports 的支持

我们在v4中引用echarts：

import echarts from 'echarts';

// 或者按需引入



import echarts from 'echarts/lib/echarts';

这两种方式，v5 中不再支持了,我们需要更改代码解决这个问题：

import * as echarts from 'echarts';

// 按需引入

import * as echarts  from 'echarts/lib/echarts';

2. 按需引入

在 5.0.1 中，引入了新的 按需引入接口

import * as echarts from 'echarts/core';

import { BarChart } from 'echarts/charts';

import { GridComponent } from 'echarts/components';

// 注意，新的接口中默认不再包含 Canvas 渲染器，需要显示引入，如果需要使用 SVG 渲染模式则使用 SVGRenderer

import { CanvasRenderer } from 'echarts/renderers';



echarts.use([BarChart, GridComponent, CanvasRenderer]);

如果之前是使用 import 'echarts/lib/chart/bar' 引入，新的接口对应的是 import {BarChart} from 'echarts/charts';

之前部分项目中v4版本，有些使用了CommonJS 的模块写法，之前的方式v5也依旧是支持的：

const echarts = require('echarts/lib/echarts');

require('echarts/lib/chart/bar');

require('echarts/lib/component/grid');

因为v5的源代码已使用 TypeScript 重写，v5 将不再支持从 echarts/src 引用文件，需要改为从echarts/lib 引入.

3. 依赖调整

该部分只针对为了保证较小的打包体积而使用按需引入接口的开发者，如果是全量引入的不需要关注

为了保证 tree-shaking 后的体积足够小，v5 去除了一些之前会默认被打包进来的依赖。比如前面提到的在使用新的按需引入接口的时候，CanvasRenderer 将不再被默认引入，这样可以保证只需要使用 SVG 渲染模式的时候不会把不需要的 Canvas 渲染代码也一起打包进来，除此之外，还有下面这些依赖的改动：

在使用折线图，柱状图中不再默认引入直角坐标系组件，因此之前使用下面的引入方式

const echarts = require('echarts/lib/echarts');

require('echarts/lib/chart/bar');

require('echarts/lib/chart/line');

需要再单独引入 grid 组件

require('echarts/lib/component/grid');

默认不再引入aria组件，如果需要的话可以手动引入。

import { AriaComponent } from 'echarts/components';

echarts.use(AriaComponent);

//或者

require('echarts/lib/component/aria');