【ECharts】2.ECharts基础知识

发表于 2025-03-03 更新于 2025-08-04 分类于前端， ECharts

1.ECharts 实例

一个网页可以创建多个ECharts实例，每个实例可以创建多个图表和坐标系等（且使用option来描述）。准备一个 DOM 节点作为实例的渲染容器，每个容器创建一个 ECharts 实例。每个实例独占一个 DOM 节点。

我们随便打开官网的一个实例代码就能发现都是类似的结构： 20250303212249

option相当于存放组件的容器，在option中的series、xAxis、yAxis都被叫做组件。

2.组件

==Echarts==中的内容都被抽象成了==组件==。比如，series是专门绘制“图”的组件。

类似的组件还有 xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、angleAxis（极坐标系角度轴）、radiusAxis（极坐标系半径轴）、polar（极坐标系底板）、geo（地理坐标系）、dataZoom（数据区缩放组件）、visualMap（视觉映射组件）、tooltip（提示框组件）、toolbox（工具栏组件）、series（系列）等。

请看概念图：

在option中申明了各个组件。

注意：因为系列是一种特殊的组件，所以有时候也会出现 “组件和系列” 这样的描述，这种语境下的 “组件” 是指：除了 “系列 series” 以外的其他组件。

那么下面就为大家介绍一下常见的组件，包括 series、dataset、xAxis、yAxis、grid、tooltip、title、legend。

不需要把这些组件都记下来，大致有个印象，知道它们的主要作用就好了，后续在代码练习中才不会完全懵逼。

3.series

==系列==（series）是很常见的名词。

它表示一组数据以及数据代表的图，所以不仅要有数据还需要用series.type表示图表类型。

其中，系列类型（series.type）至少有：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）等等。

这里只讲讲最常用的四个： - 折线图 - 柱状图 - 饼形图 - 散点图

比如，将代码中的series.type改为pie： :::: code-tabs @tab index.html

:collapsed-lines

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="echarts.js"></script>
    <title>ECharts 快速上手</title>
  </head>
  <body>
    <div id="main" style="width: 600px; height: 400px"></div>
    <script>
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "pie",
            smooth: true,
          },
        ],
      };

      option && myChart.setOption(option);
    </script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #main {
        margin: 20px;
      }
    </style>
  </body>
</html>

::::

效果： ::: demo-wrapper no-padding 20250303215556 :::

series中添加一个新的对象后：

series: [
                {
                    name: 'Sy_blog',
                    data: [1210, 230, 120],
                    type: 'line',
                    smooth: true
                },
                {
                    name: 'Sy_blog',
                    data: [152, 23, 69],
                    type: 'line',
                    smooth: true
                },
            ]

::: demo-wrapper no-padding 20250304145220 :::

常用的还有： - series.name 是系列的名字 - series.stack 是数据堆叠，后一个系列的值会在前一个系列的堆叠基础上增加

::: demo-wrapper no-padding 20250304145644 :::

4.dataset

虽然每个系列可以用series.data设置数据，将数据一条一条放在series中。但在 ECharts4 之后开始支持数据集了，可以用其来管理数据。

这是两者在写法上的区别： 20250304150715

5.用option描述图表

上面已经提到了option的概念，使用option能对图表做大部分的配置。

6.title

在option中添加option.title.text:

var option = {
    title: {  // [!code focus:3]
        text: "Hello World"
    },
    xAxis: {
        type: "category",
        data: ["1", "2", "3"]
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Sy_blog',
            data: [1210, 230, 120],
            type: 'line',
            smooth: true,
        },
        {
            name: 'Hello',
            data: [152, 23, 698],
            type: 'line',
            smooth: true,
        },
    ]
}

更多option.title见文档。

在option中添加:

1
2
3

tooltip: {
    trigger: 'axis'
},

鼠标悬浮时会产生提示信息。

::: demo-wrapper no-padding 20250304204525 :::

这里的的trigger指触发类型，包括：

item：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
axis：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
none：什么都不触发。

8.legend 图例组件

legend.data是图例的数据数组，也就是红框框起来的值。 ::: demo-wrapper no-padding 20250304204743 :::

9.toolbox 工具栏

toolbox 工具栏，内置有导出图片（saveAsImage）、数据视图（dataView）、动态类型切换（magicType）、数据区域缩放（dataZoom）、重置（restore）等五个工具。

例如：

toolbox: {
    feature: {
        saveAsImage: {}
    }
},

toolbox.feature.saveAsImage 是保存为图片，也就是这个： ::: demo-wrapper no-padding 20250304205956 :::

继续增加一个dataView：

toolbox: {
    feature: {
        saveAsImage: {},
        dataView: {}
    }
},

右上角将产生一个可以预览数据的文档图表。

10.坐标轴

很多系列，例如 line（折线图）、bar（柱状图）、scatter（散点图）、heatmap（热力图）等等，需要运行在 “坐标系” 上。坐标系用于布局这些图，以及显示数据的刻度等等。例如 ECharts 中至少支持这些坐标系：直角坐标系、极坐标系、地理坐标系（GEO）、单轴坐标系、日历坐标系等。

一个坐标系，由多个组件组成，就拿最常用的直角坐标系来举个例子：

在 ECharts 的直角坐标系中，有三个重要的组件，分别为：

xAxis：直角坐标系 X 轴。
yAxis：直角坐标系 Y 轴。
grid：直角坐标系网格。

前两者都好理解，那么网格是干什么的呢？

网格（grid）是定义网格布局、大小和颜色的组件，用于定义直角坐标系整体的布局。

例如：

20250304211204 :::steps 1. 在绘制图表之前，我们肯定需要一个坐标区域：

option = {
  xAxis: {
    type: "category",
    data: ["周一", "周二", "周三", "周四", "周五", "周六", "周天"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [0, 0, 0, 0, 0, 0, 0],
      type: "line",
    },
  ],
  grid: {
    show: true,
  },
};

20250304211323 2. 然后，在系列（series）中写入一些非 0 值，这样折线就绘制出来了。

series: [
    {
      data: [3,3,4,2,5,4,5],
      type: 'line'
    }
],

:::

10.1 grid

网格（gird）有几个常用的属性： - show 是否显示直角坐标系网格。 - left 是 grid 组件离容器左侧的距离。 - top 是 grid 组件离容器上侧的距离。 - right 是 grid 组件离容器右侧的距离。 - bottom 是 grid 组件离容器下侧的距离。

在option中加入观察其变化：

 grid: {
    show: true,
    left: 200,
    top: 100,
    right: 200,
    bottom: 100
}

10.2 xAxis 和 yAxis

我们来看看上面例子中的xAxis和yAxis属性吧。

type是坐标轴的类型，分为：

value 是数值轴，适用于连续数据。
category 是类目轴，适用于离散的类目数据。
time 是时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所- 不同。
log 是对数轴。适用于对数数据。

xAxis.data 是类目数据。

需要注意的是，它只在类目轴（type: 'category'）中有效。如果没有设置 type，但是设置了 axis.data，则认为 type 是 'category'。如果设置了 type 是 'category'，但没有设置 axis.data，则 axis.data 的内容会自动从 series.data 中获取。

一个思维导图来总结本文内容

20250304213014 ：

如果记不住这些配置项和属性都没关系，因为 ECharts 的使用方法就是去查官方文档，在它给出的代码上进行修改，从而定制出我们想要的图表。