淘先锋技术网

首页 1 2 3 4 5 6 7

 一、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]