|
图例组件。
图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
ECharts 3 中单个 echarts 实例中可以存在多个图例组件，会方便多个图例的布局。
当图例数量过多时，可以使用 滚动图例（垂直） 或 滚动图例（水平），参见：legend.type
legend: {
type: "scroll", // 图例的类型。可选值： plain 普通图例 scroll 可滚动翻页的图例。当图例数量较多时可以使用。
id: "1", // 组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件
show: true, // 是否展示图例
left: "auto", // 图例组件离容器左侧的距离。 left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。
top: "auto", // 图例组件离容器上侧的距离。 top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。
right: "auto", // 同上
bottom: "auto", // 同上
width: "auto", // string number 图例组件的宽度。默认自适应。
height: "50%", // string number 图例组件的高度。默认自适应。
orient: "vertical", // 图例列表的布局朝向。 horizontal 水平 vertical 垂直
align: "left", // 图例标记和文本的对齐。默认自动，根据组件的位置和 orient 决定，当组件的 left 值为 'right' 以及纵向布局（orient 为 'vertical'）的时候为右对齐，即为 'right'
/* auto left right */
padding: 5, // 图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。
itemGap: 10, // 图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。
itemWidth: 30, // 图例标记的图形宽度。
/* 图例的图形样式。其属性的取值为 'inherit' 时，表示继承系列中的属性值。 */
itemStyle: {
// color: "yellow",
},
// 图例图形中线的样式，用于诸如折线图图例横线的样式设置。其属性的取值为 'inherit' 时，表示继承系列中的属性值。
lineStyle: {},
symbolRotate: 100, // 图形旋转角度，类型为 number | 'inherit'。如果为 'inherit'，表示取系列的 symbolRotate。
formatter: "Legend {name}", // string Function 用来格式化图例文本，支持字符串模板和回调函数两种形式。
selectedMode: "true",
inactiveColor: "#ccc", // 图例关闭时的颜色。
inactiveBorderColor: "red", // 图例关闭时的描边颜色。
inactiveBorderWidth: 2, // 图例关闭时的描边粗细。如果为 'auto' 表示：如果系列存在描边，则取 2，如果系列不存在描边，则取 0。如果为 'inherit' 则表示：始终取系列的描边粗细。
/* 图例的公用文本样式。 具体的看文档 */
textStyle: {},
/* 图例的 tooltip 配置，配置项同 tooltip。默认不显示，可以在 legend 文字很多的时候对文字做裁剪并且开启 tooltip */
tooltip: {
show: false,
},
icon: "circle", // 图例项的 icon。'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
/*
可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。
'image://http://xxx.xxx.xxx/a/b.png'
dataURI:
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'
可以通过 'path://' 将图标设置为任意的矢量路径
*/
/*
图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。
除此之外也可以设成 'single' 或者 'multiple' 使用单选或者多选模式。
*/
data: [
// 图例的数据数组 如果 data 没有被指定，会自动从当前系列中获取。
{
name: "销量",
// 强制设置图形为圆。
icon: "circle",
// 设置文本为红色
textStyle: {
color: "red",
},
},
{
name: "快乐",
// 强制设置图形为圆。
icon: "circle",
// 设置文本为红色
textStyle: {
color: "red",
},
},
],
backgroundColor: "transparent", // 图例背景色，默认透明。
borderColor: "#ccc", // 图例的边框颜色。支持的颜色格式同 backgroundColor
borderWidth: 1, // 图例的边框线宽
borderRadius: 5, // 圆角半径，单位px，支持传入数组分别指定 4 个圆角半径。 如:
shadowBlur: 10, // 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
shadowColor: "rgba(0, 0, 0, 0.5)", // 阴影颜色。支持的格式同color。
shadowOffsetX: 5, // 阴影水平方向上的偏移距离。
shadowOffsetY: 3, // 阴影垂直方向上的偏移距离。
scrollDataIndex: 2, // legend.type 为 'scroll' 时有效。
/* 一系列page 在滚动时使用 */
animation: false, // 图例翻页是否使用动画。
animationDurationUpdate: 800, // 图例翻页时的动画时长。
selectorItemGap: 20,
},
复制代码
|