（一）标题title

文档地址
https://echarts.apache.org/zh/option.html#title

常用属性
text：主标题文本，支持用\n换行。
subtext：副标题文本，支持用\n换行。
left：与容器左侧的距离，其取值可以是具体像素值，例如
10；也可以是相对于容器的百分比值，例如10%；还可以是更常
用的left、center、right，可以理解为左对齐、居中、右对
齐。
show：是否显示标题组件，取值为布尔型数据，默认为true。

（二）提示框tooltip

（1）介绍
官方文档：https://echarts.apache.org/zh/option.html#tooltip

在ECharts中，提示框组件称为tooltip，它的作用是在合适的时机向用户提供相关信息。下面列举一些常用的参数，具体说明如下。

trigger：触发类型，可选的参数有item（图形触发）、 axis（坐标轴触发）、none（不触发）。

formatter：提示框浮层内容格式器，一般使用字符串模板

axisPointer：坐标轴指示器配置项，type是该参数的子参数，
作用为设置指示器类型，取值可选line（直线指示器），

shadow（阴影指示器），cross（十字准星指示器），none（无指示器）。

（三）工具栏toolbox

官方文档：
https://echarts.apache.org/zh/option.html#toolbox
在ECharts中，工具栏组件称为toolbox。通过设置工具栏，我们 可以将可视化下载到本地，或者查看可视化的底层数据等。

show：是否显示工具栏组件，取值为布尔型数据，默认为
true。

feature：各工具配置项，其中包含很多常用的子参数，例如
saveAsImage、restore、dataView、magicType等。其中，
saveAsImage是将可视化结果保存在本地，restore是将可视化
还原到初始的设置，dataView可以看到可视化的底层数据视
图，magicType则可以将一种可视化转为另一种可视化。

功能案例

动态类型切换
toolbox.feature. magicType可实现动态类型切换

feature: {
    magicType: {
        type: ['line', 'bar', 'stack', 'tiled']
    }
}

启用的动态类型，包括’line’（切换为折线图）, ‘bar’（切换为柱状图）, ‘stack’（切换为堆叠模式）, ‘tiled’（切换为平铺模式

（四）图例legend

在ECharts中，图例组件称为legend，其作用是区分不同的数据展示。图例，展现了不同系列的标记、颜色和名字。
官方文档：https://echarts.apache.org/zh/option.html#legend

show：是否显示图例组件，取值为布尔型数据，默认为true。
left：与容器左侧的距离，其取值可以是具体像素值，例如
10；也可以是相对于容器的百分比值，例如10%；还可以是更常
用的left、center、right，可以理解为左对齐、居中、右对
齐。
top：与容器顶部的距离，其取值可以是具体像素值，例如10；
也可以是相对于容器的百分比值，例如10%；还可以是更常用的
top、middle、bottom，可以理解为处于顶部、处于中部、处于
底部。
orient：图例列表的布局朝向，默认是horizontal（水平
的），也可以是vertical（竖直的）。
data：图例中的数据数组，通常与数据展示的系列series一一对应。

（五）时间轴timeline

官方文档：https://echarts.apache.org/zh/option.html#timeline

timeline 组件，提供了在多个 ECharts option 间进行切换、播放等操作的功能。在使用方法上，timeline和之前介绍的组件略有差异，使用时会存在多个option，可以将ECharts传统的option称为原子option，将使用timeline时用到的option称为包含多个原子option的复合option

（六）数据区域缩放dataZoom

官方文档：https://echarts.apache.org/zh/option.html#dataZoom

在ECharts中，数据区域缩放组件称为dataZoom，它的作用是向用户提供区域缩放的功能，使用户可以通过区域缩放概览数据的整体情况，也能关注数据的细节。
目前ECharts支持的区域缩放组件有如下几种：
滑动条型数据区域缩放组件（dataZoomSlider）
内置型数据区域缩放组件（dataZoomInside）
框选型数据区域缩放组件（dataZoomSelect）

（2）滑动条型数据区域缩放组件

xAxisIndex：指定控制的x轴
yAxisIndex：指定控制的y轴
filterMode：过滤模式，dataZoom数据窗口缩放的实质是数据过滤，即过滤掉窗口外的内容。

（3）内置型数据区域缩放组件
所谓内置，是指该区域缩放组件是内置在坐标系中的，其参数和上面提到的滑动条型数据区域缩放组件的参数基本一致。当前缩放是通过鼠标滚轮滑动进行放大或者缩小的。

（4）框选型数据区域缩放组件
框选型，是通过选框来进行数据区域缩放，该组件在之前提到的toolbox中

（七）网格grid

（1）介绍
参考文档：https://echarts.apache.org/zh/option.html#grid

可以通过grid在可视化坐标系中控制可视化展示时的网格大小， 常用的参数除了之前提到的位置参数，如left、top、right、bottom等，还有width（grid组件的宽度）、height（组件的高度），两者默认的参数都是auto，即自适应，当然也可以指定具体数值

（八）坐标轴

（1）介绍
一般来说，我们最常用的坐标轴是直角坐标系，尤其是二维的直 角坐标系，所以横轴（xAxis）和纵轴（yAxis）最常被使用。

（九）数据系列series

一个图表可能包含多个系列，每一个系列可能包含多个数据，所以数据系列（series）主要作为数据的容器。对于每种可视化图表，series的形式并不完全相同。下面来看一个饼图（pie）的series结构。series是一个数组结构，使用中括号，中括号内的每个部分用大 括号包含，每个大括号类似一个字典结构，包含键（key）和值（value）。例如代码中的name为键，“访问来源”为值；type指定了图为pie（饼图）；radius指定了饼图的半径大小，以图在图框中的占比表示大小；data中包含了饼图中每块饼的数据内容

每个系列通过 type 决定自己的图表类型

（十）全局字体样式textStyle

在制作可视化时，常常会用到文字展示，此时选择一种合适字体的样式与可视化搭配显得尤为重要。在全局字体样式（textStyle）中，我们可以定义全局的字体样式显示，常用的参数及其说明如下所示。
color：文字的颜色，例如textStyle.color =“#fff”。
fontStyle：文字字体的风格，可选值有normal、italic、
oblique。
fontWeight：文字字体的粗细，可选值有normal、bold、
bolder、lighter、100、200等数值。
fontFamily：文字的字体系列，可选值有sans-serif、serif、
monospace、Arial、Courier New、Microsoft YaHei等。
fontSize：文字的字体大小，取值为数值，例如12。