legend
图例组件。
图例组件展现了不同系列的标记(symbol),颜色和名字。可以通过点击图例控制哪些系列不显示。
- legend.show:[ default: true ]
- legend.zlevel: 组件的所有图形的 zlevel 值。
- legend.z: 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
- legend.left: 组件离容器左侧的距离。
- legend.top: 组件离容器上侧的距离。
- legend.right: 组件离容器右侧的距离。
- legend.bottom: 组件离容器下侧的距离。
- legend.orient: [ default: 'horizontal' ] 图例列表的布局朝向。
可选: 'horizontal' 'vertical'
- legend.align: 图例标记和文本的对齐。默认自动,根据组件的位置和 orient 决定,当组件的 left 值为 'right' 以及纵向布局(orient 为 'vertical')的时候为右对齐,及为 'right'。
可选: 'auto' 'left' 'right'
- legend.padding: 图例内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。
// 设置内边距为 5 padding: 5 // 设置上下的内边距为 5,左右的内边距为 10 padding: [5, 10] // 分别设置四个方向的内边距 padding: [ 5, // 上 10, // 右 5, // 下 10, // 左 ]
- legend.itemGap: 图例每项之间的间隔。横向布局时为水平间隔,纵向布局时为纵向间隔。
- legend.itemWidth: 图例标记的图形宽度。
- legend.itemHeight: 图例标记的图形高度。
- legend.formatter: 图例文本的内容格式器,支持字符串模板和回调函数两种形式。
// 使用字符串模板,模板变量为图例名称 {name} formatter: 'Legend {name}' // 使用回调函数 formatter: function (name) { return 'Legend ' + name; }
- legend.selectedMode: [ default: true ] 图例选择的模式,默认开启图例选择,可以设成 false 关闭。 除此之外也可以设成 'single' 或者 'multiple' 使用单选或者多选模式。
- legend.selected: 图例选中状态表。
selected: { // 选中'系列1' '系列1': true, // 不选中'系列2' '系列2': false }
- legend.textStyle: 图例的公用文本样式。
legend.textStyle.color, legend.textStyle.fontStyle, legend.textStyle.fontWeight, legend.textStyle.fontFamily, legend.textStyle.fontSize
- legend.data[i]: 图例的数据数组。数组项通常为一个字符串,每一项代表一个系列的 name(如果是饼图,也可以是饼图单个数据的 name)。图例组件会自动获取对应系列的颜色,图形标记(symbol)作为自己绘制的颜色和标记,特殊字符串 ''(空字符串)或者 '\n' (换行字符串)用于图例的换行。
如果要设置单独一项的样式,也可以把该项写成配置项对象。此时必须使用 name 属性对应表示系列的 name。
- legend.data[i].name: 图例项的名称,对应系列的 name(如果是饼图,也可以是饼图单个数据的 name)。
- legend.data[i].icon:
图例项的 icon。 可选自带的标记类型, 有 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。 在 ECharts 3 里可以通过 'path://' 设置为任意的矢量路径,这种方式相比于图片来说不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适(如果是 symbol 的话就是 symbolSize)的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
- legend.data[i].textStyle: 图例项的文本样式。
- legend.backgroundColor: 图例背景色,默认透明。
- legend.borderColor: 图例的边框颜色。支持的颜色格式同 backgroundColor。
- legend.borderWidth: 图例的边框线宽。
- legend.shadowBlur: 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
- legend.shadowColor: 阴影颜色。支持的格式同color。
- legend.shadowOffsetX: 阴影水平方向上的偏移距离。
- legend.shadowOffsetY: 阴影垂直方向上的偏移距离。