Apache Echarts 自学笔记 4. 入门篇 - 【在项目中引入Apache Echarts】

た入场券 2024-03-27 16:46 78阅读 0赞

#### Apache Echarts 自学笔记 ####

> 学习资料：【Echarts官网：https://echarts.apache.org/】
> 
> ![在这里插入图片描述][5d4ea996422a4d2a9c02f1e66fe96e83.png_pic_center]
> 
> 如侵立删

##### 4. 入门篇 - 【在项目中引入Apache Echarts】 #####

假如我们的开发环境使用了 `npm` 或者 `yarn` 等包管理工具，并且使用 `webpack` 等打包工具进行构建，

下面将会介绍如何引入  A p a c h e E C h a r t s T M Apache ECharts^\{TM\} ApacheEChartsTM 并通过 tree-shaking 特性只打包需要的模块以减少包体积。

###### 4.1 NPM安装ECharts ######

![在这里插入图片描述][1d4a04647103493197a53e03443334c6.png_pic_center]

使用如下命令通过 npm 安装 ECharts

npm install echarts --save

![在这里插入图片描述][54e151958dc043b596c64fbb403baa6e.png_pic_center]

###### 4.2 引入Echarts ######

import * as echarts from 'echarts';
    
    // 基于准备好的dom,初始化
    var myChart = echarts.init(document.getElementById('app'))
    // 绘制图表
    myChart.setOption({
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    });

运行效果

![在这里插入图片描述][054ef5c7ccc74dc98120324dec94718e.png_pic_center]

###### 4.3 按需引入ECharts图表和组件 ######

之前我们的引入写法：import \* as echarts from ‘echarts’;

这样会引入ECharts中所有的图表和组件，我们也可以按照实际需要打包必须的组件。

运行效果不变

![在这里插入图片描述][0acf900791534425aab64e25e3fcc3ff.png_pic_center]

这样做的目的是为了打包的体积是最小的，ECharts 按需引入的时候不再提供任何渲染器，所以需要选择引入 `CanvasRenderer` 或者 `SVGRenderer` 作为渲染器。这样的好处是假如你只需要使用 svg 渲染模式，打包的结果中就不会再包含无需使用的 `CanvasRenderer` 模块。

###### 4.4 在 TypeScript 中按需引入 ######

对于使用了 TypeScript 来开发 ECharts 的开发者，官方团队提供了类型接口来组合出最小的 `EChartsOption` 类型。

这个更严格的类型可以有效帮助检查出是否少加载了组件或者图表。

import * as echarts from 'echarts/core';
    import {
        
      BarChart,
      // 系列类型的定义后缀都为 SeriesOption
      BarSeriesOption,
      LineChart,
      LineSeriesOption
    } from 'echarts/charts';
    import {
        
      TitleComponent,
      // 组件类型的定义后缀都为 ComponentOption
      TitleComponentOption,
      TooltipComponent,
      TooltipComponentOption,
      GridComponent,
      GridComponentOption,
      // 数据集组件
      DatasetComponent,
      DatasetComponentOption,
      // 内置数据转换器组件 (filter, sort)
      TransformComponent
    } from 'echarts/components';
    import {
         LabelLayout, UniversalTransition } from 'echarts/features';
    import {
         CanvasRenderer } from 'echarts/renderers';
    
    // 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
    type ECOption = echarts.ComposeOption<
      | BarSeriesOption
      | LineSeriesOption
      | TitleComponentOption
      | TooltipComponentOption
      | GridComponentOption
      | DatasetComponentOption
    >;
    
    // 注册必须的组件
    echarts.use([
      TitleComponent,
      TooltipComponent,
      GridComponent,
      DatasetComponent,
      TransformComponent,
      BarChart,
      LineChart,
      LabelLayout,
      UniversalTransition,
      CanvasRenderer
    ]);
    
    const option: ECOption = {
        
      // ...
    };

> 尬了，没学过TS… 【看看就行】

[5d4ea996422a4d2a9c02f1e66fe96e83.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/4ad7fb931d614182b0af835e444d89a4.png
[1d4a04647103493197a53e03443334c6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/e8024d28b7e14c12a0fb00fed63a80c4.png
[54e151958dc043b596c64fbb403baa6e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/1bcdb49025544223b58c3ab52477352a.png
[054ef5c7ccc74dc98120324dec94718e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/4bc728dd22454df597e2d8201b691cb5.png
[0acf900791534425aab64e25e3fcc3ff.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/fb0256c7ae73474db57eb969f50df955.png