首页 前端知识 【Echarts】配置项归纳

【Echarts】配置项归纳

2024-01-26 10:01:29 前端知识 前端哥 528 346 我要收藏

【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:只对 valuelog 类型的轴有效,多个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。
    • lineStyleitemStyle 直接写,不加前缀
    • textStyle 需要加 text 前缀
  • width、height
    • textStylelineStyle
    • itemStyle 没有

2. textStyle

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

3. itemStyle

  • 每一项的样式
    • opacity
    • decal

4. lineStyle

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

5. areaStyle

  • 分隔区域样式,在 坐标系 中存在
    • color
    • shadowXXX
    • opacity
转载请注明出处或者链接地址:https://www.qianduange.cn//article/460.html
标签
echarts
评论
发布的文章

CSS3新增样式

2024-02-05 11:02:24

jQuery的介绍

2024-02-05 11:02:21

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!