Echarts的配置解释(柱状图)legend

本文详细介绍了ECharts中图例组件(legend)的各项配置选项,包括类型、显示、位置控制、布局、对齐、内边距、间隔、图形样式、选择模式、关闭时颜色及文本样式等,帮助开发者更好地定制图表的视觉效果。
摘要由CSDN通过智能技术生成

 一、legend(图例组件)

1、type(图例组件的类型)

         'plain': 普通图例;

        'scroll':可滚动翻页的图例;

2、show(显示图例组件)

         true: 显示图例组件

        false: 不显示图例组件

3、Z(相当于css的z-index控制图形的前后顺序)

        用法: Z: 6      // 赋值为number类型

4、left、top、right、bottom(控制图例组件的上下左右的位置)

        值的类型可以是数字、百分百比、方向词

5、orient(图例列表的布局朝向)

        'vertical' : 垂直朝向

        'horizontal' : 水平朝向

6、align(图例标记和文本的对齐)

        'auto': 默认自动,根据组件的位置和 orient 决定

        'left': 图例标记在左,文本在右

        'right': 文本在左,图例标记在右

7、padding(图例内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。)

// 设置内边距为 5
padding: 5
// 设置上下的内边距为 5,左右的内边距为 10
padding: [5, 10]
// 分别设置四个方向的内边距
padding: [
    5,  // 上
    10, // 右
    5,  // 下
    10, // 左
]

8、itemGap(图例每项之间的间隔。横向布局时为水平间隔,纵向布局时为纵向间隔。)

        用法: itemGap: 10 

9、itemWidth(图例标记的图形宽度)

        用法: itemWidth: 10

10、itemHeight(图例标记的图形高度)

        用法: itemHeight: 10

11、itemStype(图例的图形样式)

itemStype: {}

(1)、color(图形的颜色。)

       用法:color: "rgba(210, 57, 57, 1)"

(2)、borderColor(图形的边框)

        用法:borderColor: "rgba(222, 29, 29, 1)"

(3)、borderWidth(图形边框的宽度)

        用法:  borderWidth: 1.5

(4)、borderType(边框的类型) 

        用法:borderType: "solid"

12、selecteMode(图例选择的模式)

        用法: selectedMode: true   // 点击图例图形可以在柱状图中取消或显示对象柱子 ,false反之

13、inactiveColor(图例关闭时的颜色)

        用法: inactiveColor: "rgba(225, 19, 19, 1)"

14、textStyle(图例的文本样式)

(1)、color(文字的颜色)

        用法:color: "rgba(241, 8, 8, 1)"

(2)、fontStyle(文字的风格)

        用法: fontStyle: "oblique" | "normal" | "normal"

(3)、fontWeight(文字的粗细)

        用法: fontWeight: 700

(4)、lineHeight(行高)

        用法: lineHeight: 13

(5)、padding(文字的内边距)

        用法: padding: [7, 7, 7, 7]

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值