Echarts各个常见配置项详解
即.setoption{....}中各项内容的解释
title:标题组件,包含主标题和副标题。
title{
id:string,组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。
show:Boolean,是否显示标题组件。
text:string,主标题文本,支持使用 \n 换行。
link:string,主标题文本超链接。
target:string,指定窗口打开主标题超链接。“self”当前窗口打开;“blank”新窗口打开。
textStyle:{}//主标题的字体等样式。
zlevel:number,default:0。所有图形的 zlevel 值。zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的
Canvas 中, Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置
成一个单独的zlevel。
zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。
z:number,default:2。组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。z相比zlevel优先 级更低,而且不会创建新的 Canvas。
legend:组件图例组件展现了不同系列的标记(symbol),颜色和名字。可以通过点击图例控制哪些系列不显示。
legend:{
type:string,图例的类型。"plain" 普通图例。缺省就是普通图例;"scroll" 可滚动翻页的图例。当图例数量较多时可以使用。
id:string,组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。
show:Boolean, default:true。所有图形的 zlevel 值。
zlevel:number,default:0。
z:number,default:2。组件的所有图形的z值。控制图形的前后顺序。
left:string/number,图例组件离容器左侧的距离。left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高 宽的百分比,也可以是 'left', 'center', 'right'。
right:string/number,
top:string/number,
bottom:string/number,
width/height:string/number,图例组件的宽/高度。默认自适应。
orient:string,default: 'horizontal',图例列表的布局朝向。
}
grid:直角坐标系内绘图网格,单个 grid 内最多可以放置上下两个 X 轴,左右两个 Y 轴。可以在网格上绘制折线图,柱状图, 散点图(气泡图)。
grid:{
id:string,组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。
show:
zlevel:
z:
left/right/top/bottom:
width/height:
containLabel:Boolean, default: false。grid 区域是否包含坐标轴的刻度标签。
containLabel 为 false 的时候:
grid.left, grid.right ,grid.top ,grid.bottom, grid.width ,grid.height 决定的是由坐标轴形成的矩形的尺寸和 位置。
这比较适用于多个 grid 进行对齐的场景,因为往往多个 grid 对齐的时候,是依据坐标轴来对齐的。
containLabel 为 true 的时候:
grid.left, grid.right, grid.top ,grid.bottom, grid.width, grid.height ,决定的是包括了坐标轴标签在内的所 有内容所形成的矩形的位置。
这常用于『防止标签溢出』的场景,标签溢出指的是,标签长度动态变化时,可能会溢出容器或者覆盖其他组 件。
backgroundColor:Color,default: 'transparent' 。网格背景色,默认透明。此配置项生效的前提是,设置了 show: true。
颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)' ,如果想要加上 alpha 通道,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)',也可以使用十六进制格式,比如 '#ccc'
borderColor:
borderWidth:这两项生效的前提是show: true。
}
xAxis:直角坐标系 grid 中的 x 轴,一般情况下单个 grid 组件最多只能放上下两个 x 轴,多于两个 x 轴需要通过配置 offset 属性 防止同个位置多个 x 轴的重叠。
xAxis:{
id:
show:Boolean,是否显示 x 轴。
gridIndex:number,default: 0 。x 轴所在的 grid 的索引,默认位于第一个 grid。
position:string,x 轴的位置。
offset:number,default: 0 。X 轴相对于默认位置的偏移,在相同的 position 上有多个 X 轴的时候有用。
type:string,default: 'category'。坐标轴类型。
'value' 数值轴,适用于连续数据。
'category' 类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。
'time' 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨 度的范围来决定使用月,星期,日还是小时范围的刻度。
'log' 对数轴。适用于对数数据。
name:string,坐标轴名称。
nameLocation:string,default: 'end'。坐标轴名称显示位置。可选值'start','middle' 或者 'center','end'。
data[i]:Object,类目数据,在类目轴(type: 'category')中有效。
}