【Echarts】配置项 之 series

【Echarts】配置项 之 series

• 一、line
• 二、bar
• 三、pie
• 四、scatter
• 五、effectScatter
• 六、radar
• 七、tree
• 八、treemap
• 九、sunburst
• 十、boxplot
• 十一、candlestick
• 十二、heatmap
• 十三、map
• 十四、parallel
• 十五、lines
• 十六、graph
• 十七、sankey
• 十八、funnel
• 十九、gauge
• 二十、pictorialBar
• 二十二、themeRiver
• 二十三、custom

一、line

折线图、面积图，可用于直角坐标系和极坐标系。设置 areaStyle 后可以绘制面积图。

• type：line，必写
• colorBy：从color中取色的策略，可取值 series（按照系列分配颜色）、data（按照数据项分配颜色），一般不写
• coordinateSystem：使用的坐标系，可取值 cartesian2d（直角坐标系）、polar（极坐标系）
• xAxisIndex、yAxisIndex、polarIndex：选择轴
• showSymbol：是否显示标记，一般是小圆点
• showAllSymbol：只在主轴为类目轴时有效，布尔值
• symbolXXX：标记的属性
• legendHoverLink：是否启用图例 hover时的联动高亮。
• stack：数据堆叠，同个类目轴上系列配置相同的 stack 值可以堆叠防止。只支持堆叠于数值轴和对数轴。
• stackStrategy：堆叠数值的策略，stack必须已被设置。可选参数 samesign（只在要堆叠的值与当前累积的堆叠值具有相同的正负符号时才堆叠）、all（堆叠所有的值）、positive（只堆叠正值）、negative（只堆叠负值）
• cursor：鼠标悬浮时显示的鼠标样式
• connectNulls：是否连接空数据
• clip：是否裁剪超出坐标系部分的图形
• step：是否是阶梯线图，布尔值，字符串：start、middle、end
• endLabel：折现端点的标签
  • distance：距离图形元素的距离
  • valueAnimation：是否开启标签的数字动画
  • show、rotate、offset、formatter、textStyle属性
• labelLine：标签的视觉引导线配置
  • showAbove：是否显示在图形上方
  • length2：视觉引导线第二段的长度
  • smooth：平滑视觉引导线
  • minTurnAngle：通过调整第二段线的长度，限制引导线两端之间最小的夹角，以防止过小的夹角导致显示不美观。
  • show、lineStyle
• labelLayout：标签的统一布局配置
  • hideOverlap：是否隐藏重叠的标签
  • moveOverlap：在标签重叠时是否挪动标签位置以防止重叠。可选参数 shifyX、shiftY
  • x：标签的x位置
  • y：同上
  • dx：标签在x方向上的像素偏移，可以和x一起使用
  • dy：同上
  • rotate、width、height、align、verticalAlign、fontSize、draggable、labelLinePoints
• smoothMonotone：折现平滑后是否在一个维度上保持单调性，通常在双数值轴上使用
• sampling：折线图在数据量远大于像素点时的降采样策略，参选参数 lttb（最大程度保证采样后线条的趋势、形状和极值）、average（取过滤点的平均值）、max（去过滤点的最大值）、min、sum
• dimensions：定义系列数据中每个维度的信息，没用过
• encode：定义data的哪个维度被编码成什么，没用过
• seriesLayoutBy：指定数据用行还是列对应到系列上，可取值 column、row
• datasetIndex：指定使用哪个dataset
• dataGroupId：该系列所有数据共有的组ID
• data：系列中数据内容数组
  • name：数据项名称
  • value：单个数据项的数值
  • groupId：该数据像的组ID
  • symbolXXX、label、labelLine、itemStyle、emphasis、blur、select、tooltip
• markPoint：图表标注
  • symbolXXX、silent、label、itemStyle、emphasis、blur、data、animationXXX
• markLine：图表标线
  • 同上
• markArea：图表标域，常用于标记图表中某个范围的数据
  • 同上
• universalTransition：全局过渡动画相关配置
• id、triggerEvent、label、itemStyle、lineStyle、areaStyle、emphasis、blur、select、selectedMode、smooth、zlevel、z、silent、animationXXX、tooltip

二、bar

柱状图、条形图

• type：bar
• roundCap：是否在环形柱条两侧使用圆弧效果，仅对极坐标系柱状图有效
• realtimeSort：是否开启实时排序
• showBackground：是否显示柱条的背景色
• backgroundStyle：柱条背景样式
  • itemStyle相关
• stack：数据堆叠
• stackStrategy：数据堆叠策略
• barWidth：柱条的宽度，不设时自适应，数值、百分比字符串
• barMaxWidth、barMinWidth、barMaxHeight、barMinHeight
• barGap：不同系列的柱间距离，百分比字符串
• barCategoryGap：同系列的柱间距离
• large：是否开启大数据量优化
• largeThreshold：开启绘制优化的阈值，数值型
• progressive：渐进式渲染时每一帧绘制图形数量，设为0时不启用渐进式渲染，支持每个系列单独配置，数值型
• progressiveThreshold：启用渐进式渲染的图形数量阈值，在单个系列的图形数量超过该阈值时启用渐进式渲染。数值型
• progressiveChunkMode：分片的方式，可选值 sequential（按照数据的顺序分片）、mod（取模分片），没用过
• data
  • name：数据项名
  • value：数据项数值
  • groupId：数据项的组ID
  • label、labelLine、itemStyle、emphasis、blur、select
• clip：是否裁剪超出坐标系部分的图形
• id、name、colorBy、legendHoverLink、coordinateSystem、xAxisIndex、yAxisIndex、polarIndex、label、labelLine、itemStyle、labelLayout、emphasis、blur、select、selectedMode、sampling、cursor、dimensions、encode、seriesLayoutBy、datasetIndex、dataGroupId、markPoint、markLine、markArea、zlevel、z、silent、animationXXX、universalTransition、tooltip

三、pie

饼图，主要用于表现不同类目的数据在总和中的占比。也可以通过配置 roseType 显示成南丁格尔图。

• type：pie
• geoIndex：使用的地理坐标系的index，但单个图表实例中存在多个地理坐标系时有用
• calendarIndex：日历坐标系的index
• selectedOffset：选中扇区的偏移距离
• clockwise：是否顺时针
• startAngle：起始角度
• minAngle：最小山区角度，防止值过小导致扇区太小影响交互
• minShowLabelAngle：小于这个角度的扇区，不显示标签
• roseType：显示成南丁格尔图，可选两种模式 radius（扇区圆心角展现数据的百分比，半径展示数据的大小）、area（所有扇区圆心角相同，仅通过半径展现数据大小）
• avoidLabelOverlap：是否启用防止标签重叠策略
• stillShowZeroSum：是否在数据为0时仍显示扇区
• percentPrecision：饼图百分比数值的精度，默认保留小数点后两位，数值型
• showEmptyCircle：是否在无数据时显示一个占位圆.
• emptyCircleStyle：占位圆样式
  • itemStyle的属性
• center：饼图的中心坐标，数值数组、百分比数组
• radius：饼图的半径，数值、数组
• data
  • name、value、groupId、selected、label、labelLine、itemStyle、emphasis、blur、select、tooltip
• 其余同上

四、scatter

散点图、气泡图。可用于直角坐标系、极坐标希、地理坐标系
直角坐标系上的散点图可以用来展示数据的 x、y 之间的关系

• type：scatter
• data
  • name、value、groupId、symbolXXX、label、labelLine、itemStyle、emphasis、blur、select、tooltip
• 其余同上

五、effectScatter

带有涟漪特效动画的散点图，利用动画特效可以将某些想要突出的数据进行视觉突出

• type：effectScatter
• effectType：特效类型，只有 ripple（涟漪）
• showEffectOn：配置何时显示特效。可选参数 render（绘制完成后）、emphasis（高亮时）
• rippleEffect：涟漪特效相关配置
  • color：涟漪的颜色，默认散点颜色
  • number：波纹数量，数值型
  • period：动画周期，单位秒，数值型
  • scale：波纹最大缩放比例，数值型
  • brushType：波纹绘制方式，可选 stroke、fill
• 其余同上

六、radar

雷达图，主要用于表现多变量的数据，例如属性分析。

• type：radar
• symboXXX
• data：
  • name、value、groupId、symbolXXX、label、labelLine、itemStyle、emphasis、blur、select、tooltip
• 其余同上

七、tree

数图、主要用来可视化树形数据结构，是一种特殊的层次类型，具有唯一的根节点，左子树和右子树

• type：tree
• zoom：当前视角的缩放比例
• layout：数图的布局，有正交（orthogonal）和径向（radial）两种。
• edgeShape：只在正交布局下有效，边的形状，分别由曲线（curve）和折线（polyline）
• edgeForkPosition：只在折线形状下有效，子树中折线段分叉的位置。
• roam：是否开启鼠标缩放和平移漫游
• expandAndCollapse：子树折叠和展开的交互，默认打开。
• initialTreeDepth：树图初始展开的层级
• leaves：叶子节点的特殊配置
  • label、itemStyle、emphasis、blur、select
• data
  • collapsed：节点初始化是否折叠
  • name、value、itemStyle、lineStyle、label、emphasis、blur、select、tooltip、animationXXX
• id、name、zlevel、z、left、top、right、bottom、width、height、center、orient、symboXXX、itemStyle、label、labelLayout、lineStyle、emphasis、blur、select、selectedMode、tooltip

八、treemap

是一种常见的表达层级数据、树状数据的可视化形式

• type：treemap
• squareRatio：期望矩形长宽比率，数值型
• leafDepth：设置后，下钻功能开启，数值型
• drillDownIcon：节点可以下钻时的提示符，只能是字符
• roam：是否开启拖拽漫游（移动和缩放）
• nodeClick：点击节点后的行为，可取值为 false（无反应）、zoomToNode（缩放到节点）、link（超链接跳转）
• ZoomToNodeRatio：点击某个节点，会自动放大那个节点到合适的比例，数值型
• visualDimension：对数据其他维度进行映射，没用过
• visualMin：当前层级的最小value值，如果不设置则自动统计
• visualMax：同上
• colorAlpha：本系列默认的颜色透明度选取范围，数值型 0~1
• colorSaturation：本系列默认的节点颜色饱和度选取范围，数值型 0~1
• colorMappingBy：在同一层级节点，在颜色列表中选择时，按照什么来选择。没用过
• visibleMin：如果某个节点的矩形的面积，小于这个数，就不显示，数值型
• childrenVisibleMin：如果某个节点的面积小于这个数，则不显示这个节点的子节点，数值型
• upperLabel：显示矩形的父节点标签，和label一样
• breadcrumb：面包屑，能够显示当前节点的路径
  • emptyItemWidth：当面包屑没有内容时，设个最小宽度
  • show、left、top、right、bottom、height 、itemStyle、emphasis
• levels：多层配置
  • visualDimension、visualMin、visualMax、color、colorAlpha、colorSaturation、colorMappingBy、visibleMin、childrenVisibleMin、label、upperLabel、itemStyle、emphasis、blur、select
• data
  • link：点击此节点可跳转的超链接
  • target：跳转方式
  • children：子节点
  • value、id、name、visualXXX、colorXXX、visibleMin、childrenVisibleMin、label、upperLabel、itemStyle、emphasis、blur、select、tooltip
• id、name、zlevel、z、left、top、right、bottom、width、height、label、itemStyle、emphasis、blur、select、selectedMode、labelLine、labelLayout、silent、animationXXX、tooltip

九、sunburst

旭日图，由多层的环形图组成，在数据结构上，内圈是外圈的父节点。

• type：sunburst
• data
  • children：子节点
  • value、name、link、target、label、labelLine、itemStyle、emphasis、blur、select、tooltip
• nodeClick：点击节点后的行为，false（无反应）、rootToNode（点击节点后以该节点为根结点）、link（超链接）
• sort：默认根据value排序，参数有 desc、asc、null、回调函数.
• renderLabelForZeroData：如果数据没有name，是否需要渲染名字
• id、name、zlevel、z、center、radius、clockwise、startAngle、label、labelLine、labelLayout、itemStyle、emphasis、blur、select、selectedMode、levels、tooltip、animationXXX

十、boxplot

箱型图、箱线图，是一种用作显示一组数据分散情况资料的统计图。能够显示出一组数据的最大值、最小值、中位数、下四分位数、上四分位数

• type：boxplot
• hoverAnimation：是否开启hover在box上的动画效果
• layout：布局方式，可选 horizontal、vertical
• boxWidth：box宽度的上下限，[min, max]
• data
  • name、value、groupId、itemStyle、emphasis、blur、select、tooltip
• id、coordinateSystem、yAxisIndex、xAxisIndex、name、colorBy、legendHoverLink、itemStyle、emphasis、blur、select、selectedMode、dimensions、encode、dataGroupId、markXXX、zlevel、z、silent、animationXXX、universalTransaction、tooltip

十一、candlestick

K线图

• type：candlestick
• large：是否开启大数据量优化
• largeThreshold：开启绘制优化的阈值
• data
  • name、value、groupId、itemStyle、emphasis、blur、select、tooltip
• id、coordinateSystem、yAxisIndex、xAxisIndex、name、colorBy、legendHoverLink、hoverAnimation、layout、barWidth、barMinWidth、barMaxWidth、itemStyle、emphasis、blur、select、selectedMode、progressive、progressiveThreshold、progressiveChunkMode、dimensions、encode、dataGroupId、markXXX、clip、zlevel、z、silent、animationXXX、universalTransaction、tooltip

十二、heatmap

热力图，主要通过颜色取表现数值的大小，必须配合visualMap组件使用

• type：heatmap
• pointSize：每个点的大小，在地理坐标系上有效
• blurSize：每个点模糊的大小，在地理坐标系上有效
• minOpacity：最小透明度，在地理坐标系上有效
• maxOpacity：同上
• seriesLayoutBy：指定 dataset 中用行还是用列对应到系列上。可取值 column、row
• data
  • name、value、groupId、label、itemStyle、emphasis
• id、name、coordinateSystem、yAxisIndex、xAxisIndex、geoIndex、calendarIndex、progressXXX、label、labelLayout、itemStyle、emphasis、universalTransaction、blur、select、selectedMode、encode、datasetIndex、dataGroupId、markXXX、zlevel、z、silent、tooltip

十三、map

地图

• type：map
• map：使用 registerMap 注册的地图名称
• projection：自定义地图投影
  • project：将经纬度坐标投影为其他坐标
  • unproject：根据投影后坐标计算投影前的经纬度坐标
  • stream：主要用于适配 d3-geo 中使用的 stream 接口
• center：当前视角的中心点
• aspectScale：用于scale地图的长宽比，如果设置了projection无效
• boundingCoords：二维数组，定义定位的左上角以及右下角分别对应的经纬度。
• zoom：当前视角的缩放比例
• scaleLimit：滚轮缩放的极限控制
  • min：最小缩放值
  • max：同上
• nameMap：自定义地区的名称映射
• nameProperty：默认是 'name'，针对 GeoJSON 要素的自定义属性名称，作为主键用于关联数据点和 GeoJSON 地理要素。
• layoutCenter：定义地图中心在屏幕中的位置
• layoutSize：地图大小
• geoIndex：指定一个 geo 组件
• mapValueCalculation：多个拥有相同地图类型的系列会使用同一个地图展现，如果多个系列都在同一个区域有值，ECharts 会对这些值统计得到一个数据。这个配置项就是用于配置统计的方式，可选参数 sum、average、min、max
• showLegendSymbol：在图例相应区域显示图例的颜色标识
• data
  • name、value、groupId、selected、label、labelLine、itemStyle、emphasis、select、tooltip
• id、name、colorBy、roam、selectedMode、label、labelLayout、labelLine、itemStyle、emphasis、select、zlevel、z、left、top、right、bottom、seriesLayoutBy、datasetIndex、dataGroupId、markXXX、silent、universalTransaction、tooltip

十四、parallel

平行坐标系的系列

• type：parallel
• inactiveOpacity：框选时，未被选中的线条透明度
• activeOpacity：框选时，选中的线条透明度
• realtime：是否实时刷新
• data
  • color：线条颜色
  • width：线宽
  • type：线的类型
  • dashOffset：虚线偏移量
  • name、value、lineStyle、cap、join、miterLimit、shadowXXX、opacity、emphasis
• id、coordinateSystem、parallelIndex、name、colorBy、lineStyle、emphasis、smooth、progressive、progressiveThreshold、progressiveChunkMode、zlevel、z、silent、animationXXX

十五、lines

路径图，用于带有起点和终点信息的线数据的绘制，主要用于航线、路线可视化

• type：lines
• polyLine：是否是多线段
• effect：线特效的配置
  • show：是否显示特效
  • period：特效动画的时间，单位是秒
  • delay：特效动画的延时
  • constantSpeed：配置特效图形的移动动画是否是固定速度，单位 px/s
  • symbol：特效图形标记
  • symbolSize：特效图形标记大小
  • color：标记颜色
  • trailLength：特效尾迹的长度
  • loop：是否循环显示
  • roundTrip：动画到达终点时，是否原路返回
• data
  • coords：一个包含两个到多个二维坐标的数组
  • name、groupId、lineStyle、label、emphasis、blur、select、tooltip
• id、name、colorBy、coordinateSystem、xAxisIndex、yAxisIndex、geoIndex、large、largeThreshold、symbol、symbolSize、lineStyle、label、labelLayout、emphasis、blur、select、selectedMode、progressive、progressiveThreshold、dataGroupId、markXXX、clip、zlevel、z、silent、animationXXX、universalTransaction、tooltip

十六、graph

关系图，用于展现节点与节点之间的关系数据

• type：graph
• circular：环形布局相关配置
  • rotateLabel：是否旋转标签，默认不旋转
• force：力引导布局相关的配置项
  • initLayout：进行力引导布局前的初始化布局，初始化布局会影响到力引导的效果。
  • repulsion：节点之间的斥力因子。
  • gravity：节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
  • edgeLength：边的两个节点之间的距离
  • layoutAnimation：是否显示布局的迭代动画
  • friction：这个参数能减缓节点的移动速度。取值范围 0 到 1。
• nodeScaleRatio：鼠标漫游缩放时节点的响应缩放比例
• edgeSymbol：边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定
• edgeSymbolSize：边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。
• edgeLabel
  • show、position、formatter、与textStyle相似
• categories：节点分类的类目
  • name、symbolXXX、itemStyle、label、emphasis、blur、select
• autoCurveness：针对节点之间存在多边的情况，自动计算各边曲率，默认不开启。
• date
  • x：节点的初始x值
  • y：同上
  • fixed：节点在力引导布局中是否固定。
  • category：数据项所在类目的 index。
  • name、value、symbolXXX、itemStyle、label、emphasis、blur、select、tooltip
• nodes：别名，同 data
• links：节点间的关系数据
  • source：边的源节点名称的字符串，也支持使用数字表示源节点的索引。
  • target：边的目标节点名称的字符串，也支持使用数字表示源节点的索引。
  • value：边的数值，可以在力引导布局中用于映射到边的长度。
  • ignoreForceLayout：使此边不进行力导图布局的计算。
  • lineStyle、lineStyle、label、emphasis、blur、select、symbol、symbolSize
• edges：别名，同 links
• id、name、legendHoverLink、coordinateSystem、xAxisIndex、yAxisIndex、polarIndex、geoIndex、calendarIndex、center、zoom、layout、roam、scaleLimit、draggable、symbolXXX、cursor、itemStyle、lineStyle、label、emphasis、blur、select、selectedMode、markXXX、zlevel、z、left、top、right、bottom、width、height、silent、animationXXX、tooltip

十七、sankey

桑基图，是一种特殊的流图（可以看作是有向无环图）。 它主要用来表示原材料、能量等如何从最初形式经过中间过程的加工或转化达到最终状态。

• type：sankey
• nodeWidth：桑基图中每个矩形节点的宽度。
• nodeGap：桑基图中每一列任意两个矩形节点之间的间隔。
• nodeAlign：桑基图中节点的对齐方式，默认是双端对齐（justify），可以设置为左对齐（left）或右对齐（right）
• layoutIterations：布局的迭代次数，目的是不断迭代优化图中节点和边的位置，以减少节点和边之间的相互遮盖，默认值是 32。如果希望图中节点的顺序是按照原始 data 中的顺序排列的，可设该值为 0。
• levels：桑基图每一层的设置，可以逐层设置
  • depth：指定设置的是桑基图哪一层，取值从 0 开始。
  • label、edgeLabel、itemStyle、lineStyle、emphasis、blur、select
• data
  • name：节点名称
  • value：节点值
  • depth：节点所在的层，取值从 0 开始。
  • itemStyle、label、emphasis、blur、select、tooltip
• node：同 data
• id、name、zlevel、z、left、top、right、bottom、width、height、orient、draggable、edgeLabel、label、labelLayout、itemStyle、lineStyle、emphasis、blur、select、selectedMode、links、edges、silent、animationXXX、tooltip

十八、funnel

漏斗图

• type：funnel
• min：指定的数据最小值。
• max：指定的数据最大值。
• minSize：数据最小值 min 映射的宽度。
• maxSize：数据最大值 max 映射的宽度。
• sort：数据排序， 可以取 ‘ascending’，‘descending’，‘none’（表示按 data 顺序），或者一个函数
• funnelAlign：水平方向对齐布局类型，默认居中对齐，可用选项还有：‘left’ | ‘right’ | ‘center’
• gap：数据图形间距。
• data
  • name、value、itemStyle、label、labelLine、emphasis、blur、select、tooltip
• id、name、colorBy、orient、legendHoverLink、label、labelLine、itemStyle、labelLayout、emphasis、blur、select、selectedMode、zlevel、z、left、top、right、bottom、width、height、seriesLayoutBy、datasetIndex、dimensions、encode、dataGroupId、markPoint、markLine、markArea、silent、animationXXX、universalTransition、tooltip

十九、gauge

仪表盘

• type：gauge
• title：仪表盘标题。
  • 与textStyle类似
• detail：仪表盘详情，用于显示数据。
  • 与textStyle类似
• data
  • title：仪表盘标题
    • 与textStyle类似
  • detail：仪表盘详情，用于显示数据。
    • 与textStyle类似
  • name、value、itemStyle
• min：最小的数据值，映射到 minAngle。
• max：最大的数据值，映射到 maxAngle。
• splitNumber：仪表盘刻度的分割段数。
• progress：展示当前进度。
  • overlap：多组数据时进度条是否重叠。
  • width：进度条宽度。
  • roundCap：是否在两端显示成圆形。
  • clip：是否裁掉超出部分。
  • show、itemStyle
• splitLine：分隔线样式。
  • length：分隔线线长。支持相对半径的百分比
  • distance：分隔线与轴线的距离。
  • show、lineStyle
• axisTick：刻度样式。
  • splitNumber：分隔线之间分割的刻度数。
  • length：刻度线长。支持相对半径的百分比。
  • distance：刻度线与轴线的距离。
  • show、lineStyle
• pointer：仪表盘指针。
  • showAbove：指针是否显示在标题和仪表盘详情上方。
  • offsetCenter：相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
  • length：指针长度，可以是绝对数值，也可以是相对于半径的半分比。
  • width：指针宽度。
  • keepAspect：是否在缩放时保持该图形的长宽比。
  • show、icon、itemStyle
• anchor：表盘中指针的固定点
  • show、showAbove、size、icon、offsetCenter、keepAspect、itemStyle
• id、name、colorBy、zlevel、z、center、radius、legendHoverLink、startAngle、endAngle、clockwise、axisLine、axisLabel、itemStyle、emphasis、markXXX、silent、animationXXX、tooltip

二十、pictorialBar

象形柱图，象形柱图是可以设置各种具象图形元素（如图片、SVG PathData 等）的柱状图。往往用在信息图中。用于有至少一个类目轴或时间轴的直角坐标系上。

• type：pictorialBar
• 与bar类似

二十二、themeRiver

主题河流，是一种特殊的流图, 它主要用来表示事件或主题等在一段时间内的变化。

• type：themeRiver
• data：
  • date：时间或主题的时间属性。
  • value、name
• id、name、colorBy、zlevel、z、left、top、right、bottom、width、height、coordinateSystem、boundaryGap、singlAxisIndex、label、labelLine、labelLayout、itemStyle、emphasis、blur、select、selectMode、tooltip

二十三、custom

自定义系列，自定义系列可以自定义系列中的图形元素渲染。从而能扩展出不同的图表。

• type：custom
• 属性和其余类似