echarts文档记录

echarts配置项

init

(dom标签，项目的模块环境配置，显示的范围大小，显示的两种模式.)

setOption

对象配置：title/legend/grid/xAxis/yAxis/polar…

---

title标题，可以实现多个标题组件。

1. text为标题文本
2. subtext为标题子文本
3. show显示效果
4. target打开的页面显示方式
5. left/top/right/bottom等设置文本内容位置
6. link需要链接的地址
7. border…shadow…设置背景颜色和文本效果

---

legend图例组件，可以实现多个

1. data数组，设置图例组件的标题，需要和对应的坐标轴数据对应上。
2. left/top/right/bottom等设置图例组件的位置
3. type设置图例组件的类型
   • 两种状态，默认状态为plain
   • scroll，状态为可滚动翻页的图例，当使用这个模式的时候，可以进行更细节的配置
4. show显示状态
5. item…设置图例的样式
6. orient设置图例组件的布局朝向
   • 可选值为horizontal
   • vertical
7. textStyle设置文本的风格

---

grid直角坐标系内绘图网格

​ 单个grid最多只能放置两个x轴和两个y轴

​ grid组件可以在单个echarts实例中存在多个

1. show显示和隐藏网格
2. left/top/right/bottom等设置坐标系的位置
3. shadow…等设置样式
4. tooltip为对象设置，设置提示框组件，提示框 组件可以用在多个地方，如全局，坐标系，系列，系列的每个数据项中
   • show
   • trigger 触发类型
   • position位置设置，默认不设置时位置会跟随鼠标的位置。

---

xAxis以及yAxis两个坐标系

多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠

1. show
2. position配置轴的位置
3. offset默认位置的偏移
4. type坐标轴类型
   • 'value' 数值轴，适用于连续数据。
   • 'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
   • 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
   • 'log' 对数轴。适用于对数数据
5. name坐标轴的名称
6. nameTextStyle坐标轴名称的文本样式
7. inverse是否是反向坐标轴
8. min和max坐标轴刻度也可以设置成特殊值dataMin，取数据上的最小值为最小刻度
9. minInterval 设置为1，可以保证坐标轴分割刻度显示为整数
10. triggerEvent坐标轴的标签是否响应和触发鼠标事件，默认不响应

---

polar极坐标系，可以用于散点图和折线图

1. center极坐标系的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
2. radius极坐标系的半径，可设置为number/string/Array
3. tooltip提示框组件

---

dataZoom组件用于区域缩放

目前提供三种dataZoom组件

1. 内置型：内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系
2. 滑动条：有单独的滑动条，用户在滑动条上进行缩放或漫游
3. 框选型：提供一个选框进行数据区域缩放

---

tooltip坐标轴指示器配置

1. show
2. trigger触发类型
   • item数据项图形触发
   • axis坐标轴触发
   • none什么都不触发
3. axisPointer配置项
   • type配置项类型
     • line直线指示器
     • shadow阴影指示器
     • cross十字准星指示器
     • none
   • label配置项标题样式
     • backgroundColor
     • show
     • color…
   • axis配置项的显示轴
     • x/y/radius/angle
   • lineStyle/shadowStyle/crossStyle/animation等
4. showContent是否显示提示框内容，默认显示
5. triggerOn提示框触发的条件
6. textStyle提示框浮层的文本样式等

---

toolbox工具栏

1. show
2. orient布局朝向/horizontal/vertical
3. itemSize/itemGap/showTitle设置工具栏icon大小，间隔，Hover是否显示icon标题
4. showTitle标题是否显示(hover状态)
5. feature各个工具的配置项

---

brush刷子

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

1. toolbox用在 toolbox 中的按钮
   • 'rect'：开启矩形选框选择功能。
   • 'polygon'：开启任意形状选框选择功能。
   • 'lineX'：开启横向选择功能。
   • 'lineY'：开启纵向选择功能。
   • 'keep'：切换『单选』和『多选』模式。后者可支持同时画多个选框。前者支持单击清除所有选框。
   • 'clear'：清空所有选框。
2. brushType: ‘rect’, //设置默认的刷子类型
3. brushMode: ‘single’, //设置默认的刷子模式，可以为single以及multiple
4. xAxisIndex指定哪些xAxisIndex可以被刷选，配置项的值为
   • all，表示所有
   • number，表示所对应的坐标系
   • Array，表示对应的坐标系的数组
   • none，null，undefined表示不指定

---

geo地理坐标系组件

---

parallel平行坐标系是一种常用的可视化高维数据的图表。

---

parallelAxis这个组件是平行坐标系中的坐标轴

---

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

---

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

---

graphic 是原生图形元素组件。

可以支持的图形元素包括：

image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group

---

calendar日历坐标系组件。

---

dataset

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

1. source原始数据可以为2维数组，其中数组内的第一个数组数据为维度名，也可以不给出，直接就是数据
2. 可以按行的 key-value 形式（对象数组），其中键（key）表明了维度名
3. 可以按列的 key-value 形式，每一项表示二维表的 “一列”