【Echarts】配置项归纳

【Echarts】配置项归纳

• 一、title
• 二、legend
• 三、grid
• 四、xAxis/yAxis
• 五、polar
• 六、radiusAxis
• 七、angleAxis
• 八、radar
• 九、dataZoom
• • 1. 内置型数据区域缩放组件
  • 2. 滑动条型数据区域缩放组件
  • 3. 框选型数据区域缩放组件
• 十、tooltip
• 十一、axisPointer
• 十二、toolbox
• 十三、brush
• 十四、geo
• 十五、parallel
• 十六、parallelAxis
• 十七、singleAxis
• 十八、timeline
• 十九、graphic
• • 1. group
  • 2. image
  • 3. text
  • 4. rect
  • 5. circle
  • 6. ring
  • 7. sector
  • 8. arc
  • 9. polygon
  • 10. polyline
  • 11. line
  • 12. bezierCurve
• 二十、calendar
• 二十一、dataset
• 二十二、series
• 二十三、darkMode
• 二十四、color
• 二十五、backgroundColor
• 二十六、stateAnimation
• 二十七、blendMode
• 二十八、hoverLayerThreshold
• 二十九、useUTC
• 三十、media
• 附一、rich
• 附二、各种style
• • 1. 相同的属性
  • 2. textStyle
  • 3. itemStyle
  • 4. lineStyle
  • 5. areaStyle

一、title

标题组件，有主标题、副标题。

• id：组件ID，字符串
• show：显示标题，布尔型
• text：标题文本
• link：文本超链接
• target：配置 link 才有效，参数有 self、black
• textStyle：文本样式，对象
  • color：颜色
  • fontStyle：字体风格，参数有 normal、italic、oblique，后两个都是斜体
  • fontWeight：粗细
  • fontFamily：字体系列
  • fontSize：字体大小，数值型
  • LineHeight：行高，数值型
  • width：宽度，数值型
  • height：高度，数值型
  • textBorderColor：文字描边颜色
  • textBorderWidth：文字描边宽度，数值型
  • textBorderType：文字描边类型，参数有 solid、dashed、dotted
  • textBorderDashOffset：描边类型为虚线时，设置偏移量
  • textShadowColor：文字阴影颜色
  • textShadowBlur：文字阴影长度，数值型
  • textShadowOffsetX：文字阴影X轴偏移量，数值型
  • textShadowOffsetY：文字阴影Y轴偏移量，数值型
  • overflow：配置 width后，文字超出宽度的配置，参数有 truncate（截断，配合ellipsis使用）、break（换行）、breakAll（单词过长也换行）
  • ellipsis：文本超出时显示什么，搭配 overflow: truncate，默认是 …
  • rich：富文本样式，可以做出丰富的效果。见 目录 附一、rich。
• subtext：副标题文本
• sublink：副标题链接
• subtarget：同上
• subtextStyle：
  • 同上
  • align：水平对齐，要设置 width，rich 中有效
  • verticalAlign：垂直对齐，同 align
• textAlign：整体（text和subtext）的水平对齐
• textVerticalAlign：整体垂直对齐
• triggerEvent：是否触发事件
• padding：内边距，数组、数值型
• itemGap：主副标题之间的间距，数值型
• zlevel：分层值，会创建不同的canvas，数值型
• z：优先级比 zlevel低，不会创建 canvas
• left：左侧距离，数值型、字符串
• top、right、bottom：同上
• backgroundColor：标题背景色
• borderColor：标题边框颜色（上面的是字体边框）
• borderWidth：标题边框线宽
• borderRadius：圆角半径
• shadowBlur：图像阴影的模糊大小。配合 shadowColor、shadowOffsetX、shadowOffsetY。
• shadowColor、shadowOffsetX、shadowOffsetY：同上

二、legend

图例组件。

• type：图例类型。参数有 plain（普通）、scroll（滚动）
• 当类型为 scroll 时：
  • scrollDataIndex：图例当前最顶部的 dataIndex。可决定当前图例滚动到哪里。没用过
  • pageButtonItemGap：图例控制块中，按钮和页信息之间的间隔。没用过
  • pageButtonGap：图例控制块和图例项之间的间隔。没用过
  • pageFormatter：图例控制块中，页信息的显示格式。没用过
  • pageIcons：图片控制块的图标
  • pageIconColor：翻页按钮的颜色
  • pageIconInactiveColor：翻页按钮不激活时（翻页到头）的颜色
  • pageIconSize：翻页按钮的大小，数值型，数值数组
  • pageTextStyle：同 textStyle
• orient：图例列表的布局朝向。参数有 horizontal、vertical。
• align：图例标记和文本的对齐方式。
• itemGap：图例每项之间的间隔。
• itemWidth：图例标记的图形宽度。
• itemHeight：图例标记的图像高度。
• itemStyle：图例样式
  • borderCap：线段末端的绘制方式，参数有 butt、round、square。
  • borderJoin：边框链接部分的属性，参数有 bevel（矩形拐角）、round（扇形拐角）、miter（菱形拐角）。
  • borderMiterLimit：设置斜接面限制比例。
  • opacity：透明度，数值型，0~1
  • decal：图形的贴花图案
  • color、borderColor、borderWidth、borderType、borderDashOffset、shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY 同 textStyle
• lineStyle：图例图形中线的样式
  • color：线的颜色
  • width：线宽
  • type：线的类型。
  • dashOffset、cap、join、miterLimit、shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY、opacity 同 itemStyle
• symbolRotate：图形旋转角度，数值型、或继承 inherit
• formatter：格式化文本，回调函数、字符串
• selectedMode：图例选择的模式，控制是否可以通过点击图例改变系列的显示状态，默认开启，布尔型
• inactiveColor：图例关闭时的颜色
• inactiveBorderColor：图例关闭时的描边颜色
• inactiveBorderWidth：图例关闭时的描边粗细
• selected：图例选中状态表，对象，键为系列名，值为布尔值
• textStyle
• tooltip：提示框，默认不显示，对象
• icon：图例图标
• data：图例的数据数组，对象数组
  • name、icon、itemStyle、textStyle、lineStyle、symbolRotate
• backgroundColor：背景色
• border、shadow
• animation：动画，布尔型
• animationDurationUpdate：翻页时的动画时长，数值型
• emphasis：没看出来什么效果
• selector：图例组件的选择器按钮，目前包括全选和反选，默认不显示。布尔型、字符串数组、对象数组
• selectorLabel：选择器按钮的文本标签样式，与 textStyle 相似。
• selectorPosition：选择器位置，参数有 end、start、auto
• selectorItemGap：选择器按钮之间的间隔，数值型
• selectorButtonGap：选择器按钮与图例组件之间的间隔，数值型
• id、show、zlevel、z、left、top、right、bottom、width、height、padding、 同上。

三、grid

直角坐标系内绘制网格，单个grid内最多防止上下2个X轴、2个Y轴。

• containLabel：grid区域是否包含坐标轴的刻度标签。布尔值
• id、show、zlevel、z、left、top、right、bottom、width、height、backgroundColor、borderXXX、shadowXXX、tooltip 同上

四、xAxis/yAxis

指标坐标系 grid 中的X轴。

• gridIndex：x 轴所在的 grid 索引，默认位于第一个 grid，数值型
• alignTicks：只对 value 和 log 类型的轴有效，多个x轴为数值轴的时候，配置自动对齐刻度。布尔型
• position：x轴的位置，参数有 top、bottom。字符串
• offset：x轴相对于默认位置的偏移。数值型
• type：坐标轴类型，参数有 value（数值轴，适用于连续数据）、category（类目轴，适用于离散数据）、time（时间轴，适用于连续的时序数据）、log（对数轴）
• name：坐标轴名字
• nameLocation：坐标轴名字显示位置，参数有 start、middle、end
• nameTextStyle：textStyle
• nameGap：坐标轴名字和轴线之间的间距，数值型
• nameRotate：坐标轴名字旋转角度，数值型
• inverse：是否是反向坐标轴，布尔型
• boundaryGap：坐标轴两边留白策略，没用过
• min：刻度轴最小值，数值型、字符串、回调函数
• max：同上
• scale：只在数值轴中有效，配置min和max后无效。没用过。布尔型
• splitNumber：坐标轴分割段数，类目轴中无效。数值型
• minInterval：坐标轴最小间隔大小，只在数值轴和时间轴中有效。数值型
• maxInterval：同上
• interval：强制设置坐标轴分隔间距
• logBase：对数轴的底数
• silent：坐标轴是否时静态无法交互，布尔值
• triggerEvent：坐标轴的标签是否响应或出发鼠标事件。布尔值
• axisLine：坐标轴轴线相关设置
  • show：显示
  • onZero：X轴或Y轴的轴线是否再另一个轴的0刻度上。布尔值
  • onZeroAxisIndex：当有双轴时，可以用这个属性手动指定再哪个轴的0刻度上。
  • symbol：轴线两端的箭头，默认不显示。字符串、字符串数组
  • symbolSize：箭头大小，数值数组
  • symbolOffset：箭头偏移，数值数组
  • lineStyle
• axisTick：坐标轴刻度相关设置
  • show：显示
  • alignWidthLabel：刻度线与标签对齐，布尔值
  • interval：刻度线显示间隔，数值、回调函数
  • inside：刻度是否朝内，默认朝外
  • length：刻度长度
  • lineStyle
• minorTick：次刻度线设置，类目轴无效
  • show：显示
  • splitNumber：次刻度线分割数，默认是 5
  • length：次刻度线长度
  • lineStyle
• axisLabel：刻度标签
  • showMinLabel：是否显示最小tick的lavel，可取值 true、false、null
  • showMaxLabel：同上
  • hideOverlap：隐藏重叠的标签
  • textStyle 的属性都适用。
  • show、interval、inside、rotate、margin、formatter
• splitLine：坐标轴在 grid 区域中的分割线
  • show、interval、lineStyle
• splitArea：坐标轴在 grid 区域中的分隔区域
  • interval、show、areaStyle
• data：类目数据，在类目轴中有效，对象数组、字符串数组
• axisPointer：坐标轴指示器配置项
  • show：显示
  • type：指示器类型。参数有 line、shadow、none
  • snap：坐标轴指示器是否自动吸附到点上，布尔值
  • z：层次
  • label：文本标签
    • precision：小数点精度
    • show、formatter、其他和 textStyle 类似
  • lineStyle：对象
  • shadowStyle：对象
  • triggerTooltip：是否触发tooltip。
  • value：当前的value，没用过
  • status：当前的状态，参数有 show、hide。没用过
  • handle：拖拽手柄，适用于触屏
• animation：是否开启动画
• animationThreshold：开启动画的阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画，数值型
• animationDuration：动画时长，数值、回调函数
• animationEasing：初始动画的缓动效果，字符串
• animationDelay：初始动画的延迟，数值、回调函数
• animationDurationUpdate：数据更新动画的时长
• animationEasingUpdate：数据更新动画的缓动效果
• animationDelayUpdate：数据更新的动画延迟
• id、show、z、zlevel

五、polar

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

• center：极坐标系的中心坐标，数值数组，百分比字符串数组
• radius：极坐标系半径
• id、zlevel、z、tooltip

六、radiusAxis

极坐标系的径向轴

• polarIndex：径向轴所在的极坐标系的索引，默认使用第一个极坐标系。
• type：坐标轴类型。参数有 value（数值轴）、category（类目轴）、time（时间轴）、log（对数轴）
• id、name、nameLocation、nameTextStyle、nameGap、nameRotate、inverse、boundaryGap、min、max、scale、splitNumber、minInterval、maxInterval、interval、logBase、silent、triggerEvent、axisLine、axisTick、minorTick、axisLabel、splitLine、minorSplitLine、splitArea、data、axisPointer、animationXXX、zlevel、z 同上。

七、angleAxis

极坐标系的角度轴

• startAngle：起始刻度的角度，默认90度，即圆心的正上方，0度为圆心的正右方。数值
• clockwise：默认顺时针，布尔值
• id、polarIndex、type、…同上

八、radar

雷达图坐标系组件，只适用于雷达图

• axisName：雷达图每个指示器名称的配置项
  • show、formatter、与 textStyle 类似
• shape：雷达图绘制类型，参数有 polygon（有角度）、circle（圆形）。
• indicator：雷达图的指示器，用来指定雷达图中的多个变量（维度），对象数组
  • name、max、min、color
• id、zlevel、z、center、radius、startAngle、nameGap、splitNumber、scale、silent、triggerEvent、axisLine、axisTick、axisLabel、splitLine、splitArea 同上。

九、dataZoom

dataZoom 组件用于区域缩放，从而能自由关注细节的数据信息，或概览数据整体，或去除离群点的影响

1. 内置型数据区域缩放组件

dataZoomInside，内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、滚轮、手指滑动在缩放或漫游坐标系。

• type：inside
• disabled：是否停止组件功能
• xAxisIndex：设置dataZoom控制的x轴
• yAxisIndex：设置dataZoom控制的y轴
• radiusAxisIndex：设置dataZoom控制的radius轴
• angleAxisIndex：设置dataZoom控制的角度轴
• filterMode：数据过滤模式。参数有 filter（只要有一个维度在数据窗口外，整个数据项就会被过滤掉）、weakFilter（所有维度都在数据窗口同侧外部，整个数据项就会被过滤掉）、empty（当前数据窗口外的数据被设置为空）、none（不过滤数据，只改变数轴范围）
• start：数据窗口范围的起始百分比。范围是 0~100
• end：结束百分比，同上
• startValue：数据窗口范围的起始数值，不能和 start 一起使用
• endValue：同上
• minSpan：用于限制窗口大小的最小值（百分比），范围是 0~100
• maxSpan：同上
• minValueSpan：用于限制窗口大小的最小值（实际数值）
• maxValueSpan：同上
• orient：布局方式，参数有 horizontal、vertical
• zoomLock：是否锁定选择区域（数据窗口）的大小
• throttle：出发视图刷新的频率，单位是毫秒。
• rangeMode：形式为数组，开始值和结束值。[start, end]
• zoomOnMouseWheel：如何触发缩放，参数有 true（鼠标滚轮）、false（关闭缩放）、shift（按住shift+鼠标滚轮）、ctrl、alt
• moveOnMouseMove：如何触发数据窗口平移
• moveOnMouseWheel：同上，但是是用鼠标滚轮平移
• preventDefaultMouseMove：是否组织 mousemove 事件的默认行为
• id

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

dataZoomSlider，有单独的滑动条，用户在滑动条上进行缩放或漫游。

• type：slider
• dataBackground：数据阴影的样式
  • lineStyle、areaStyle
• selectedDataBackground：选中部分数据阴影的样式
  • lineStyle、areaStyle
• fillerColor：选中范围填充色
• borderColor：边框颜色
• handleIcon：两侧缩放手柄的icon形状
• handleSize：控制手柄的尺寸，数值型、字符串
• handleStyle：手柄样式
  • color、borderXXX、shadowXXX、opacity
• moveHandleIcon：移动手柄中间的icon
• moveHandleSize、moveHandleStyle
• labelPrecision：显示label的小数精度，数值
• labelFormatter：显示的label格式化器，字符串、回调函数
• showDataShadow：是否在 组件中显示数据阴影
• realtime：拖动时，是否实时更新系列的视图
• brushSelect：是否开启刷选功能。
• brushStyle：刷选框样式设置。
  • color、borderXXX、shadowXXX、opacity
• emphasis：高亮样式设置。
  • handleStyle、moveHandleStyle
• id、show、backgroundColor、textStyle、xAxisIndex、yAxisIndex、radiusAxisIndex、angleAxisIndex、filterMode、start、end、startValue、endValue、minSpan、maxSpan、minValueSpan、maxValueSpan、orient、zoomLock、throttle、rangeMode、zlevel、z、left、top、right、bottom、width、height 同上

3. 框选型数据区域缩放组件

dataZoomSelect，提供一个选框进行数据区域缩放，配置项在 toolbox 中。

十、tooltip

提示框组件，可以在多个地方设置。全局、坐标系中、系列中、系列的每个数据项中。

• trigger：触发类型，参数有 item（图形触发）、axis（坐标系触发）、none（不触发）
• axisPointer：坐标轴指示器配置项。
  • type：指示器类型。参数有 line（直线指示器）、shadow（阴影指示器）、none（无指示器）、cross（十字准星指示器）
  • axis：指示器的坐标轴，可以是 x、y、radius、angle
  • snap：坐标轴指示器是否自动吸附到点上。
  • z、label、lineStyle、shadowStyle、crossStyle、animationXXX
• showContent：是否显示提示框浮层
• alwaysShowContent：是否永久显示提示框内容
• triggerOn：提示框触发条件，参数有 mousemove、click、mousemove|click、none
• showDelay：浮层显示的延迟，数值
• hideDelay：浮层隐藏的延迟，数值
• enterable：鼠标是否课进入提示框浮层中
• renderMode：浮层的渲染模式
• confine：是否将 tooltip 框限制在图表区域内
• appendToBody：是否将 tooltip 的DOM 节点添加到 body 的子节点
• className：DOM节点的类名
• transitionDuration：浮层的移动动画过渡时间，数值
• position：浮层的位置，默认跟随鼠标的位置，数组、回调函数
• formatter：内容格式化器，字符串模板、回调函数
  • 一般来说 {a} 表示系列名、 {b} 表示数据名、 {c} 表示数据值。
  • 折线、柱状、K线： {a} 系列名、 {b} 类目名、 {c} 数值。
  • 散点：{a} 系列名、 {b} 数据名、 {c} 数值数组。
  • 地图：{a} 系列名、 {b} 区域名、 {c} 合并数值。
  • 饼图、仪表盘、漏斗图：{a} 系列名、 {b} 数据项名、 {c} 数值，{d}百分比。
• valueFormatter：tooltip中数值显示部分的格式化回调函数
• extraCssText：额外附加到浮层的css样式，字符串
• order：多系列提示框浮层排列顺序，默认是 seriesAsc（系列声明升序）、seriesDesc（系列声明降序）、valueAsc（数值升序）、valueDesc（数值降序）
• show、backgroundColor、borderXXX、padding、textStyle

十一、axisPointer

坐标轴指示器的全局公用设置，同 tooltip 的 axisPointer

• triggerTooltip：是否触发 tooltip
• value：当前的value，可以决定指示器初始位置
• status：状态，show、hide
• link：不同轴的 axisPointer 可以联动，同步一起活动。
• triggerOn：触发提示框条件

十二、toolbox

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

• itemSize：工具栏icon的大小
• itemGap：工具栏 icon 每项之间的间隔
• showTitle：鼠标hover时显示标题
• feature：自定义工具按钮
  • saveAsImage：保存为图片
    • type：图片格式
    • name：文件名
    • backgroundColor：图片背景色
    • connectedBackgroundColor：如果使用了联动，到处时图表之间间隙处的填充色
    • excludeComponents：保存为图片时忽略的组件列表，默认忽略工具栏
    • show：是否显示该工具
    • title：工具名
    • pixelRatio：图片的分辨率比例。1x、2x，数值型
    • icon、iconStyle、emphasis
  • restore：还原
    • show、title、icon、iconStyle、emphasis
  • detaView：数据视图工具，展示当前图表所用的数据
    • readOnly：不可编辑
    • optionToContent：自定义 dataView 展示函数
    • contentToOption：没用过
    • lang：数据视图上有三个话术，默认是 ['数据视图', '关闭', '刷新'] 没用过
    • show、title、icon、iconStyle、emphasis，backgroundColor、textareaColor、textareaBorderColor、textColor、buttonColor、buttonTextColor
  • dataZoom：数据区域缩放
    • show、title、icon、iconStyle、emphasis、filterMode、xAxisIndex、yAxisIndex、brushStyle
  • magicType：动态类型却换
    • type：动态类型，包括 line（折线图）、bar（柱状图）、stack（堆叠模式）
    • option：各个类型的专有配置项，在切换到某类型时会合并相应的配置项
      • line、bar、stack
    • show、title、icon、iconStyle、emphasis、seriesIndex
  • brush：选框工具的控制按钮
    • type：使用的按钮，参数有 rect（开启矩形选框选择功能）、polygon（开启任意形状选矿选择功能）、lineX（开启横向选择功能）、lineY（开启纵向选择功能）、keep（切换单选和多选模式）、clear（清理选框）
    • icon、title
• id、show、orient、iconStyle、emphasis、zlevel、z、left、top、right、bottom、width、height、tooptip

十三、brush

区域选择组件，可以选择图中一部分数据，从而便于向用户展示被选中数据、或他们的一些统计计算结果。
支持的图表类型有 scatter、bar、candlestick

• brushLick：不同系列间，选中项可以联动
• brushType：刷子类型，参数有 rect（矩形）、polygon（任意形状）、lineX（横向）、lineY（纵向）
• brushMode：刷子模式，参数有 single（单选）、multiple（多选）
• transformable：已经选好的选框是否可以被调整形状或平移。
• brushStyle：选框的样式，对象，borderWidth、color、borderColor
• throttleType：没用过
• throttleDelay：没用过
• removeOnClick：单选时，是否支持单击清除所有选框
• inBrush：选中范围中视觉元素。没用过
• outOfBrush：选中范围外的视觉元素，没用过
• id、toolbox、seriesIndex、geoIndex、xAxisIndex、yAxisIndex、z

十四、geo

地理坐标系组件

• map：使用 registerMap 注册的地图名称
• roam：是否开启鼠标缩放和平移漫游
• projection：自定义地图投影，没用过
• center：视角的中心点，默认使用原始坐标（经纬度）
• aspectScale：用于 scale 地图的长宽比，不能和 projection 同时使用，数值型
• boundingCoords：二维数组，定义定位的左上角以及右下角分别所对应的经纬度。
• zoom：缩放比例，数值型
• scaleLimit：滚轮缩放的极限控制，数值对象，min、max
• nameMap：自定义地区的名称映射
• nameProperty：默认是 'name'，针对 GeoJSON要素的自定义属性名称，作为主键用于关联数据点和GeoJSON地理要素
• selectedMode：选中模式，单选或多选
• label：图形上的文本标签
  • show、position、distance、rotate、offset、formatter、color、textStyle相关
• itemStyle：图形样式
• select：选中状态下的多边形和标签样式
  • disabled：是否可以被选中
  • label、itemStyle
• blur：淡出状态下的多边形和标签样式
  • label、itemStyle
• layoutCenter：让地图不超过盒子范围，数组
• layoutSize：搭配layoutCenter使用，地图的大小，数值，字符串
• regions：对特定的区域配置样式
  • name：区域的名称
  • selected：是否被选中
  • itemStyle、label、emphasis、select、blur、tooltip
• silent：图形是否不响应和触发鼠标事件
• id、show、emphasis（和其他的好像不一样）、zlevel、z、left、top、right、bottom、tooltip

十五、parallel

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

• layout：和 orient 类似，布局方式，参数有 horizontal（水平排布各个坐标轴）、vertical（数值排布各个坐标轴）
• axisExpandable：是否允许点击折叠axis
• axisExpandCenter：初始时，以哪个轴为中心展开，这里给出轴的index
• axisExpandCount：初始时，有多少个轴会处于展开状态。
• axisExpandWidth：展开状态轴的间距是多少
• axisExpandTriggerOn：触发折叠，参数有 click、mousemove
• parallelAxisDefault：配置多个 parallelAxis时，有些值一样的属性，如果书写多遍则比较繁琐，可以放在这里面。
• id、zlevel、z、left、top、right、bottom、width、height

十六、parallelAxis

平行坐标系的坐标轴

• dim：坐标轴的维度序号
• parallelIndex：坐标轴对应哪个坐标系
• realtime：坐标轴刷选时，是否实时更新视图
• type：坐标轴类型，参数有 value、category、time、log
• id、areaSelectStyle、name、nameLocation、nameTextStyle、nameGap、nameRorate、inverse、boundaryGap、min、max、scale、splitNumber、minInterval、maxInterval、interval、logBase、silent、triggerEvent、axisLine、axisTick、minorTick、axisLabel、data、animationXXX

十七、singleAxis

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

• 属性和 Axis 类似

十八、timeline

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

• type：只支持 slider
• axisType：轴的类型。参数有 value（数值轴）、category、time
• currentIndex：当前选中项是哪项
• autoPlay：是否自动播放
• rewind：是否反向播放
• loop：是否循环播放
• playInterval：播放速度，单位毫秒
• realtime：拖动圆点时，是否实时更新视图
• replaceMerge：合并策略，没用过
• controlPosition：播放按钮的位置
• symbol：timeline标记的图形。包括 circle、rect、roundRect、none等
• symbolSize：标记大小
• symbolRotate：标记旋转角度， 数值型
• symbolKeepAspect：在缩放时保持图形的长宽比
• symbolOffset：标记相对于原本位置的偏移
• checkpointStyle：当前项（checkpoint）的图形样式
  • symbolXXX、borderXXX、shadowXXX
• controlStyle：控制按钮 的样式，包括 播放按钮、前进、后退
  • show
  • showPlayBtn、showPrevBtn、showNextBtn
  • itemGap、itemSize
  • position
  • playIcon、stopIcon、prevIcon、nextIcon
  • borderXXX、shadowXXX、opacity
• progress：进度条中的线条，拐点，标签的样式
  • lineStyle、itemStyle、label
• data：timeline数据
• show、zlevel、z、left、top、right、bottom、padding、orient、inverse、lineStyle、label、itemStyle、emphasis

十九、graphic

原生图形元素自建，支持的图形元素包括 image、text、circle、sector、ring、polygon、polyline、rect、line、bezierCurve、arc、group

• id
• elements：里面是所有图形元素的集合。对象数组

graphic:{
	elements: [
		{type: 'rect', ...},
		{type: 'circle', ...}
	]
}

1. group

group 是唯一的可以有子节点的容器，可以用来整体定位一组图形元素

• type：group
• $action：指定本次对图形元素的操作行为，可取值 merge、replace、remove
• x：元素的x像素位置
• y：同上
• rotation：元素的旋转
• scaleX：元素在x方向上的缩放
• scaleY：同上
• originX：元素旋转和缩放原点的 x 像素位置
• originY：同上
• transition：过渡动画，没用过
• enterForm：入场动画
• leaveTo：退场动画
• enterAnimation：入场动画配置
  • duration、easing、delay
• updateAnimation：更新属性动画配置
  • duration、easing、delay
• leaveAnimation：退场动画配置
  • duration、easing、delay
• keyframeAnimation：关键帧动画配置
  • duration、easing、delay
• left：怎么更具父元素定位
• right、top、bottom
• bounding：决定此图形元素在定位时，对自身的包围盒计算方式
• info：用户定义的任意数据，可以在 event listener 中访问
• silent：是否不响应鼠标以及触摸事件
• ignore：节点是否完全被忽略（既不渲染，也不响应事件）
• textContent：这是一个文本定义，附着在一个节点上，会依据textconfig配置，相对于节点布局。没用过
• textConfig：没用过
• during：没用过
• draggable：可以被拖拽
• diffChildrenByName：没用过
• id、z、zlevel、width、height

2. image

• type：image
• progressive：是否渐进式渲染
• style
  • image：图片内容
  • x、y、width、height、fill、stroke、lineWidth、shadowXXX、opacity
• focus：高亮图形时，是否淡出其他数据的图形以达到聚焦的效果，可选参数 none（默认值，不淡出其他图形）、self（只聚焦当前高亮的数据图形）、series（聚焦当前高亮的数据所在的系列的所有图形）
• blurScopr：在开启 focus 时，可通过 blurScope 配置淡出的范围。可选参数 coordinateSystem（淡出范围为坐标系）、series（淡出范围为系列）、global（淡出范围为全局）
• 其余同上

3. text

• type：text
• style
  • text：文本块文字
• 其余同上

4. rect

矩形

• type：rect
• shape
  • x：图形元素的左上角在父节点坐标系中的横坐标值
  • y：同上
  • width、height
  • r：设置圆角矩形，数值、数值数组
  • transition：没用过
• style
  • fill：填充色
  • stroke：笔画颜色
  • lineWidth：笔画宽度
  • shadowXXX、opacity、transition
• 其余同上

5. circle

圆

• type：circle
• shape
  • cx：圆形元素的中心在父节点坐标系中的横坐标值
  • cy：同上
  • r：外半径
  • transition
• 其余同上

6. ring

圆环

• type：ring
• shape
  • cx：圆形元素的中心在父节点坐标系中的横坐标值
  • cy：同上
  • r：外半径
  • r0：内半径
  • transition
• 其余同上

7. sector

扇形

• type：sector
• shape
  • cx：圆形元素的中心在父节点坐标系中的横坐标值
  • cy：同上
  • r：外半径
  • r0：内半径
  • startAngle：开始弧度
  • endAngle：结束弧度
  • clockwise：是否顺时针
  • transition
• 其余同上

8. arc

圆弧

• type：arc
• 同扇形

9. polygon

多边形

• type：polygon
• shape
  • points：点列表，用于定义形状。二维数组
  • smooth：是否平滑曲线，数值、spline
  • smoothConstraint：是否将平滑曲线约束在包围盒中
  • transition
• 其余同上

10. polyline

折线

• type：polygon
• 同多边形

11. line

直线

• type：line
• shape
  • x1：开始点的x值
  • y1：开始点的y值
  • x2：结束点的x值
  • y2：结束点的y值
  • percent：线画到百分之多少就不画了，0~1
  • transition
• 其余同上

12. bezierCurve

二次或三次贝塞尔曲线

• type：bezierCurve
• shape
  • x1：开始点的x值
  • y1：同上
  • x2：结束点的x值
  • y2：同上
  • cpx1：控制点x值
  • cpy1：同上
  • cpx2：第二个控制点x值
  • cpy2：同上
  • percent：线画到百分之多少就不画了，0~1
  • transition
• 其余同上

二十、calendar

日历坐标系组件，可以在热力图、散点图、关系图中使用日历坐标系

• range：日历坐标的范围，支持 某一年（数值型）、某个月（2017-02）、某个区间（字符串数组）
• cellSize：日历每格框的大小，数值，数组
• dayLabel：日历坐标中星期轴的样式
  • firstDay：一周从周几开始，默认周日开始
  • margin：星期标签与轴线之间的距离
  • position：星期的位置，在星期轴的开始或结尾。start、end
  • nameMap：星期显示的效果，默认为 en
  • show、textStyle
• monthLabel
  • align：文字水平对齐方式
  • margin：月份标签与轴线之间的距离
  • show、position、nameMap、formatter、textStyle
• yearLabel
• id、zlevel、z、left、top、right、bottom、width、height、orient、splitLine、itemStyle、silent

二十一、dataset

数据集组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射。

• source：原始数据，一般是 二维数组、对象数组、数组对象
• dimensions：没用过
• sourceHeader：第一行、列是否是维度名信息
• transform：数据变换，没用过
  • transform-filter
  • transform-sort
  • transform-xxx
• fromDatasetIndex：指定 transform 以哪个dataset为输入。没用过
• fromDatasetId：指定 transform 以哪个dataset为输入。没用过
• fromTransformResult：如果transform产生多个结果data，可以利用这个获取特定的结果。

二十二、series

另外写一篇归纳

【Echarts】配置项 之 series

二十三、darkMode

是否是暗黑模式，默认根据背景色 backgroundColor 的亮度自动设置。通常被用于主题中。

二十四、color

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

二十五、backgroundColor

背景色，默认无背景

二十六、stateAnimation

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

• duration：状态切换的动画时长，设为0则关闭动画
• easing：状态切换的动画缓动

二十七、blendMode

图形的混合模式，默认是 source-over，支持每个系列单独设置。没用过

二十八、hoverLayerThreshold

图形数量阈值，决定是否开启单独的hover层，在整个图表的图形数量大于该阈值时开启单独的hover层。没用过

二十九、useUTC

是否使用 UTC 时间，默认为false。

三十、media

媒体查询，移动端自适应

• query
  • minWidth：数值型
  • maxHeight
  • minAspectRatio：长宽比
• option：数组的每一项是一个 echarts option，当此 query 被匹配时，会使用这个 option

附一、rich

• 在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。

• 设置的属性都与字体样式textStyle有关。

• 结构：

  rich:{
  	<name>:{
  		...
  	}
  }
  

• 示范：

  subtext: "{a|我是a}\n{b|我是b}",
  subtextStyle:{
    rich: {
      a: {
        width: 500,
        align: "center",
        color: 'red',
        lineHeight: 10
      },
      b: {
        color:"blue"
      }
    }
  }
  

  

附二、各种style

1. 相同的属性

• color
• border
  • borderColor、borderWidth、borderType、borderDashOffset、borderCap、borderJoin、borderMiterLimit。
  • lineStyle 没有 border 属性，因为 line 就是 border
  • itemStyle 直接写 borderColor、borderWidth…不用加前缀
  • textStyle 需要写加 text 前缀，textBorderColor、textBorderWidth…
• shadow
  • shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY。
  • lineStyle、itemStyle 直接写，不加前缀
  • textStyle 需要加 text 前缀
• width、height
  • textStyle、lineStyle 有
  • itemStyle 没有

2. textStyle

• 都是字体样式
  • fontStyle
  • fontWeight
  • fontFamily
  • fontSize
  • LineHeight
  • overflow、ellipsis
  • rich

3. itemStyle

• 每一项的样式
  • opacity
  • decal

4. lineStyle

• 线条样式，基本和 border 一样

5. areaStyle

• 分隔区域样式，在 坐标系 中存在
  • color
  • shadowXXX
  • opacity