1. 标签引入

  1. <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>

2. 项目中使用npm命令行引入

  1. ## 安装echarts插件
  2. npm install echarts --save
  1. ## 全局引入echart
  2. import * as echarts from 'echarts';
  3. ## 局部按需引入
  4. // 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。
  5. import * as echarts from 'echarts/core';
  6. // 引入柱状图图表,图表后缀都为 Chart
  7. import { BarChart } from 'echarts/charts';
  8. // 引入提示框,标题,直角坐标系,数据集,内置数据转换器组件,组件后缀都为 Component
  9. import {
  10. TitleComponent,
  11. TooltipComponent,
  12. GridComponent,
  13. DatasetComponent,
  14. DatasetComponentOption,
  15. TransformComponent
  16. } from 'echarts/components';
  17. // 标签自动布局,全局过渡动画等特性
  18. import { LabelLayout, UniversalTransition } from 'echarts/features';
  19. // 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
  20. import { CanvasRenderer } from 'echarts/renderers';
  21. // 注册必须的组件
  22. echarts.use([
  23. TitleComponent,
  24. TooltipComponent,
  25. GridComponent,
  26. DatasetComponent,
  27. TransformComponent,
  28. BarChart,
  29. LabelLayout,
  30. UniversalTransition,
  31. CanvasRenderer
  32. ]);