ECharts常见配置项以及含义

现在面试很多要求要用echarts开发大数据可视化项目，所以掌握echarts常见配置项还是很重要的，一起来看看有哪些吧（更具体的请到官网查看 点击这里）

title

标题组件，包含主标题和副标题。
在 ECharts 2.x 中单个 ECharts 实例最多只能拥有一个标题组件。但是在 ECharts 3 中可以存在任意多个标题组件，这在需要标题进行排版，或者单个实例中的多个图表都需要标题时会比较有用。

legend

图例组件。
图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
ECharts 3 中单个 echarts 实例中可以存在多个图例组件，会方便多个图例的布局。
当图例数量过多时，可以使用 滚动图例（垂直） 或 滚动图例（水平）

grid

直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。
在 ECharts 2.x 里单个 echarts 实例中最多只能存在一个 grid 组件，在 ECharts 3 中可以存在任意个 grid 组件。

xAxis

直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。

yAxis

直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。

polar

极坐标系，可以用于散点图和折线图。每个极坐标系拥有一个角度轴和一个半径轴。

radiusAxis

极坐标系的径向轴。

angleAxis

极坐标系的角度轴。

radar

雷达图坐标系组件，只适用于雷达图。该组件等同 ECharts 2 中的 polar 组件。因为 3 中的 polar 被重构为标准的极坐标组件，为避免混淆，雷达图使用 radar 组件作为其坐标系。
雷达图坐标系与极坐标系不同的是它的每一个轴（indicator 指示器）都是一个单独的维度，可以通过 name、axisLine、axisTick、axisLabel、splitLine、 splitArea 几个配置项配置指示器坐标轴线的样式。

dataZoom

dataZoom 组件 用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。
现在支持这几种类型的 dataZoom 组件：

• 内置型数据区域缩放组件（dataZoomInside）：内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。
• 滑动条型数据区域缩放组件（dataZoomSlider）：有单独的滑动条，用户在滑动条上进行缩放或漫游。
• 框选型数据区域缩放组件（dataZoomSelect）：提供一个选框进行数据区域缩放。即 toolbox.feature.dataZoom，配置项在 toolbox 中。

visualMap

visualMap 是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。
视觉元素可以是：

• symbol: 图元的图形类别。
• symbolSize: 图元的大小。
• color: 图元的颜色。
• colorAlpha: 图元的颜色的透明度。
• opacity: 图元以及其附属物（如文字标签）的透明度。
• colorLightness: 颜色的明暗度，参见 HSL。
• colorSaturation: 颜色的饱和度，参见 HSL。
• colorHue: 颜色的色调，参见 HSL。

visualMap 组件可以定义多个，从而可以同时对数据中的多个维度进行视觉映射。
visualMap 组件可以定义为 分段型（visualMapPiecewise） 或 连续型（visualMapContinuous），通过 type 来区分。

tooltip

提示框组件。
提示框组件的通用介绍：
提示框组件可以设置在多种地方：
可以设置在全局，即 tooltip
可以设置在坐标系中，即 grid.tooltip、polar.tooltip、single.tooltip
可以设置在系列中，即 series.tooltip
可以设置在系列的每个数据项中，即 series.data.tooltip

axisPointer

这是坐标轴指示器（axisPointer）的全局公用设置。
坐标轴指示器是指示坐标轴当前刻度的工具。

toolbox

工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。

brush

brush 是区域选择组件，用户可以选择图中一部分数据，从而便于向用户展示被选中数据，或者他们的一些统计计算结果。

geo

地理坐标系组件。
地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。
3.1.10 开始 geo 组件也支持鼠标事件。事件参数为

{
    componentType: 'geo',
    // Geo 组件在 option 中的 index
    geoIndex: number,
    // 点击区域的名称，比如"上海"
    name: string,
    // 传入的点击区域的 region 对象，见 geo.regions
    region: Object

Tip: geo 区域的颜色也可以被 map series 所控制。

parallel

平行坐标系介绍
平行坐标系（Parallel Coordinates）是一种常用的可视化高维数据的图表。

parallelAxis

这个组件是平行坐标系中的坐标轴。
平行坐标系介绍
平行坐标系（Parallel Coordinates）是一种常用的可视化高维数据的图表。

singleAxis

单轴。可以被应用到散点图中展现一维数据

timeline

timeline 组件，提供了在多个 ECharts option 间进行切换、播放等操作的功能。

graphic

graphic 是原生图形元素组件。可以支持的图形元素包括：
image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group

calendar

日历坐标系组件。
在ECharts中，我们非常有创意地实现了日历图，是通过使用日历坐标系组件来达到日历图效果的，如下方的几个示例图所示，我们可以在热力图、散点图、关系图中使用日历坐标系。

dataset

ECharts 4 开始支持了 数据集（dataset）组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射。这在不少场景下能带来使用上的方便。

aria

W3C 制定了无障碍富互联网应用规范集（WAI-ARIA，the Accessible Rich Internet Applications Suite），致力于使得网页内容和网页应用能够被更多残障人士访问。Apache ECharts 4 遵从这一规范，支持自动根据图表配置项智能生成描述，使得盲人可以在朗读设备的帮助下了解图表内容，让图表可以被更多人群访问。除此之外，Apache ECharts 5 新增支持贴花纹理，作为颜色的辅助表达，进一步用以区分数据。
默认关闭，需要通过将aria.enabled设置为 true 开启。

series

一个系列至少包含的要素为：一组数值，图表类型（series.type），以及其他的关于这些数据如何映射成图的参数。

darkMode

是否是暗黑模式，默认会根据背景色backgroundColor的亮度自动设置。 如果是设置了容器的背景色而无法判断到，就可以使用该配置手动指定，echarts 会根据是否是暗黑模式调整文本等的颜色。
该配置通常会被用于主题中。

color

调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。 默认为：

['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']

支持的颜色格式：
使用 RGB 表示颜色，比如 ‘rgb(128, 128, 128)’，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 ‘rgba(128, 128, 128, 0.5)’，也可以使用十六进制格式，比如 ‘#ccc’。
backgroundColor
背景色，默认无背景。

支持使用rgb(255,255,255)，rgba(255,255,255,1)，#fff等方式设置为纯色，也支持设置为渐变色和纹理填充

textStyle

全局字体样式。

animation

是否开启动画。

animationThreshold

是否开启动画的阈值，当单个系列显示的图形数量大于这个阈值时候会自动关闭动画。

animationDuration

初始动画的时长，支持回调函数，可以通过每个数据返回不同时长实现更戏剧的初始动画效果。

animationDuration: function (idx) {
    // 越往后的数据时长越大
    return idx * 100;
}

animationEasing

初始动画的缓动效果。

animationDelay

初始动画的延迟，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如：

animationDelay: function (idx) {
    // 越往后的数据延迟越大return idx * 100;
}

animationDurationUpdate

数据更新动画的时长。
支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的更新动画效果：

animationDurationUpdate: function (idx) {
    // 越往后的数据时长越大return idx * 100;
}

animationEasingUpdate

数据更新动画的缓动效果。

animationDelayUpdate

数据更新动画的延迟，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如：

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大return idx * 100;
}

stateAnimation

状态切换的动态配置，支持在每个系列里设置单独针对该系列的配置。

blendMode

图形的混合模式
默认为 ‘source-over’。 支持每个系列单独设置。
‘lighter’ 也是比较常见的一种混合模式，该模式下图形数量集中的区域会颜色叠加成高亮度的颜色（白色）。常常能起到突出该区域的效果。

hoverLayerThreshold

图形数量阈值，决定是否开启单独的 hover 层，在整个图表的图形数量大于该阈值时开启单独的 hover 层。
单独的 hover 层主要是为了在高亮图形的时候不需要重绘整个图表，只需要把高亮的图形放入单独的一个 canvas 层进行绘制，防止在图形数量很多的时候因为高亮重绘所有图形导致卡顿。
ECharts 2 里是底层强制使用单独的层绘制高亮图形，但是会带来很多问题，比如高亮的图形可能会不正确的遮挡所有其它图形，还有图形有透明度因为高亮和正常图形叠加导致不正确的透明度显示，还有移动端上因为每个图表都要多一个 canvas 带来的额外内存开销。因此 3 里默认不会开启该优化，只有在图形数量特别多，有必要做该优化时才会自动开启。

useUTC

是否使用 UTC 时间。
true: 表示 axis.type 为 ‘time’ 时，依据 UTC 时间确定 tick 位置，并且 axisLabel 和 tooltip 默认展示的是 UTC 时间。
false: 表示 axis.type 为 ‘time’ 时，依据本地时间确定 tick 位置，并且 axisLabel 和 tooltip 默认展示的是本地时间。
默认取值为false，即使用本地时间。因为考虑到：
很多情况下，需要展示为本地时间（无论服务器存储的是否为 UTC 时间）。
如果 data 中的时间为 ‘2012-01-02’ 这样的没有指定时区的时间表达式，往往意为本地时间。默认情况下，时间被展示时需要和输入一致而非有时差。
注意，这个参数实际影响的是『展示』，而非用户输入的时间值的解析。

options

用于timeline的 option 数组。数组的每一项是一个 echarts option (ECUnitOption)。

media

自适应