【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、endendLabel：折现端点的标签
distance：距离图形元素的距离valueAnimation：是否开启标签的数字动画show、rotate、offset、formatter、textStyle属性 labelLine：标签的视觉引导线配置
showAbove：是否显示在图形上方length2：视觉引导线第二段的长度smooth：平滑视觉引导线minTurnAngle：通过调整第二段线的长度，限制引导线两端之间最小的夹角，以防止过小的夹角导致显示不美观。show、lineStyle labelLayout：标签的统一布局配置
hideOverlap：是否隐藏重叠的标签moveOverlap：在标签重叠时是否挪动标签位置以防止重叠。可选参数 shifyX、shiftYx：标签的x位置y：同上dx：标签在x方向上的像素偏移，可以和x一起使用dy：同上rotate、width、height、align、verticalAlign、fontSize、draggable、labelLinePoints smoothMonotone：折现平滑后是否在一个维度上保持单调性，通常在双数值轴上使用sampling：折线图在数据量远大于像素点时的降采样策略，参选参数 lttb（最大程度保证采样后线条的趋势、形状和极值）、average（取过滤点的平均值）、max（去过滤点的最大值）、min、sumdimensions：定义系列数据中每个维度的信息，没用过encode：定义data的哪个维度被编码成什么，没用过seriesLayoutBy：指定数据用行还是列对应到系列上，可取值 column、rowdatasetIndex：指定使用哪个datasetdataGroupId：该系列所有数据共有的组IDdata：系列中数据内容数组
name：数据项名称value：单个数据项的数值groupId：该数据像的组IDsymbolXXX、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：barroundCap：是否在环形柱条两侧使用圆弧效果，仅对极坐标系柱状图有效realtimeSort：是否开启实时排序showBackground：是否显示柱条的背景色backgroundStyle：柱条背景样式
itemStyle相关 stack：数据堆叠stackStrategy：数据堆叠策略barWidth：柱条的宽度，不设时自适应，数值、百分比字符串barMaxWidth、barMinWidth、barMaxHeight、barMinHeightbarGap：不同系列的柱间距离，百分比字符串barCategoryGap：同系列的柱间距离large：是否开启大数据量优化largeThreshold：开启绘制优化的阈值，数值型progressive：渐进式渲染时每一帧绘制图形数量，设为0时不启用渐进式渲染，支持每个系列单独配置，数值型progressiveThreshold：启用渐进式渲染的图形数量阈值，在单个系列的图形数量超过该阈值时启用渐进式渲染。数值型progressiveChunkMode：分片的方式，可选值 sequential（按照数据的顺序分片）、mod（取模分片），没用过data
name：数据项名value：数据项数值groupId：数据项的组IDlabel、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：piegeoIndex：使用的地理坐标系的index，但单个图表实例中存在多个地理坐标系时有用calendarIndex：日历坐标系的indexselectedOffset：选中扇区的偏移距离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：scatterdata
name、value、groupId、symbolXXX、label、labelLine、itemStyle、emphasis、blur、select、tooltip 其余同上
五、effectScatter
带有涟漪特效动画的散点图，利用动画特效可以将某些想要突出的数据进行视觉突出
type：effectScattereffectType：特效类型，只有 ripple（涟漪）showEffectOn：配置何时显示特效。可选参数 render（绘制完成后）、emphasis（高亮时）rippleEffect：涟漪特效相关配置
color：涟漪的颜色，默认散点颜色number：波纹数量，数值型period：动画周期，单位秒，数值型scale：波纹最大缩放比例，数值型brushType：波纹绘制方式，可选 stroke、fill 其余同上
六、radar
雷达图，主要用于表现多变量的数据，例如属性分析。
type：radarsymboXXXdata：
name、value、groupId、symbolXXX、label、labelLine、itemStyle、emphasis、blur、select、tooltip 其余同上
七、tree
数图、主要用来可视化树形数据结构，是一种特殊的层次类型，具有唯一的根节点，左子树和右子树
type：treezoom：当前视角的缩放比例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：treemapsquareRatio：期望矩形长宽比率，数值型leafDepth：设置后，下钻功能开启，数值型drillDownIcon：节点可以下钻时的提示符，只能是字符roam：是否开启拖拽漫游（移动和缩放）nodeClick：点击节点后的行为，可取值为 false（无反应）、zoomToNode（缩放到节点）、link（超链接跳转）ZoomToNodeRatio：点击某个节点，会自动放大那个节点到合适的比例，数值型visualDimension：对数据其他维度进行映射，没用过visualMin：当前层级的最小value值，如果不设置则自动统计visualMax：同上colorAlpha：本系列默认的颜色透明度选取范围，数值型 0~1colorSaturation：本系列默认的节点颜色饱和度选取范围，数值型 0~1colorMappingBy：在同一层级节点，在颜色列表中选择时，按照什么来选择。没用过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：sunburstdata
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：boxplothoverAnimation：是否开启hover在box上的动画效果layout：布局方式，可选 horizontal、verticalboxWidth：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：candlesticklarge：是否开启大数据量优化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：heatmappointSize：每个点的大小，在地理坐标系上有效blurSize：每个点模糊的大小，在地理坐标系上有效minOpacity：最小透明度，在地理坐标系上有效maxOpacity：同上seriesLayoutBy：指定 dataset 中用行还是用列对应到系列上。可取值 column、rowdata
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：mapmap：使用 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、maxshowLegendSymbol：在图例相应区域显示图例的颜色标识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：parallelinactiveOpacity：框选时，未被选中的线条透明度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：linespolyLine：是否是多线段effect：线特效的配置
show：是否显示特效period：特效动画的时间，单位是秒delay：特效动画的延时constantSpeed：配置特效图形的移动动画是否是固定速度，单位 px/ssymbol：特效图形标记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：graphcircular：环形布局相关配置
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：别名，同 datalinks：节点间的关系数据
source：边的源节点名称的字符串，也支持使用数字表示源节点的索引。target：边的目标节点名称的字符串，也支持使用数字表示源节点的索引。value：边的数值，可以在力引导布局中用于映射到边的长度。ignoreForceLayout：使此边不进行力导图布局的计算。lineStyle、lineStyle、label、emphasis、blur、select、symbol、symbolSize edges：别名，同 linksid、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：sankeynodeWidth：桑基图中每个矩形节点的宽度。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：同 dataid、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：funnelmin：指定的数据最小值。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：gaugetitle：仪表盘标题。
与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：themeRiverdata：
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属性和其余类似
文章链接
发表评论