echarts配置项说明

Posted 2021-03-25 consider

1、title

title: {
    // 用于在 option 或者 API 中引用组件
    id: "myTitle",
    // 是否显示标题组件、[ default: true ]
    show: true,
    // 主标题文本、[ default: '' ]
    text: "图的标题",
    // 主标题文本超链接、[ default: '' ]
    link: "http://www.baidu.com/",
    // 指定窗口打开主标题超链接 、[ default: 'blank' ]、('self','blank')
    target: 'blank',
    // 标题样式
    textStyle: {
        // 主标题文字的颜色、[ default: '#333' ]
        color: "#666",
        // 主标题字体的样式、[ default: 'normal' ]、('normal'、'italic'、'oblique')
        fontStyle: "normal",
        // 主标题文字的字体粗细、[ default: normal ]、('normal'、'bold'、'bolder'、'lighter'、100 | 200 | 300 | 400...)
        fontWeight: "normal",
        // 主标题文字的字体家族、[ default: 'sans-serif' ]、('serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...)
        fontFamily: "Microsoft YaHei",
        // 主标题文字的字体大小、[ default: 18 ]
        fontSize: "14",
        // 主标题文字的行高
        // lineHeight: "10",
        // 文字块的宽度，不指定则自动是文字的宽度。
        width: "",
        // 文字块的高度，不指定则自动是文字的高度。
        height: "",
        // 文字本身的描边颜色、[ default: 'transparent' ]
        textBorderColor: "red",
        // 文字本身的描边宽度、[ default: 0 ]
        textBorderWidth: "",
        // 文字本身的阴影颜色、[ default: 'transparent' ]
        textShadowColor: "",
        // 文字本身的阴影长度、[ default: 0 ]
        textShadowBlur: "",
        // 文字本身的阴影 X 偏移、[ default: 0 ]
        textShadowOffsetX: "",
        // 文字本身的阴影 Y 偏移、[ default: 0 ]
        textShadowOffsetY: ""
    },
    // 副标题文本，支持使用 
 换行、[ default: '' ]
    subtext: "图的副标题 副标题
副标题换行",
    // 副标题文本超链接、[ default: '' ]
    sublink: "https://www.echartsjs.com/zh/option.html",
    // 指定窗口打开副标题超链接、[ default: 'blank' ]
    subtarget: "",
    // 属性同主标题的文本样式
    subtextStyle: {},
    // 整体（包括 text 和 subtext）的水平对齐、[ default: 'auto' ]
    textAlign: "",
    // 整体（包括 text 和 subtext）的垂直对齐、[ default: 'auto' ]
    textVerticalAlign: "",
    // 是否触发事件、[ default: false ]
    triggerEvent: "",
    // 标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距、[ default: 5 ]
    padding: "",
    // 副标题之间的间距、[ default: 10 ]
    itemGap: 10,
    // 所有图形的 zlevel 值，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。
    zlevel: "",
    // 组件的所有图形的z值，z相比zlevel优先级更低，而且不会创建新的 Canvas。
    z: "",
    // grid 组件离容器左侧的距离，[ default: 'auto' ]
    left: "10",
    // grid 组件离容器上侧的距离，[ default: 'auto' ]
    top: "20",
    // grid 组件离容器右侧的距离
    right: "",
    // grid 组件离容器下侧的距离
    bottom: "",
    // 标题背景色，默认透明、[ default: 'transparent' ]
    backgroundColor: "#fff",
    // 标题的边框颜色，[ default: '#ccc' ]
    borderColor: "#f00",
    // 标题的边框线宽，[ default: 0 ]
    borderWidth: "1",
    // 边框圆角半径，单位px，支持传入数组分别指定 4 个圆角半径
    borderRadius: 5,
    // 图形阴影的模糊大小
    shadowBlur: 3,
    // 阴影颜色
    shadowColor: "rgba(0,0,0,.5)",
    // 阴影水平方向上的偏移距离
    shadowOffsetX: "2",
    // 阴影垂直方向上的偏移距离
    shadowOffsetY: "2"
}

2、legend

legend: {
    // 图例的类型，['plain'、'scroll']
    // 'plain'：普通图例。缺省就是普通图例。
    // 'scroll'：可滚动翻页的图例。当图例数量较多时可以使用。
    type: "plain",
    // 组件 ID，用于在 option 或者 API 中引用组件
    id: "",
    // [ default: true ]
    show: "",
    // 所有图形的 zlevel 值，[ default: 0 ]
    zlevel: "",
    // 所有图形的z值，[ default: 2 ]
    z: "",
    // 图例组件离容器左侧的距离，[ default: 'auto' ]
    left: "",
    top: "",
    right: "",
    bottom: "",
    // 图例组件的宽度，[ default: 'auto' ]
    width: "",
    height: "",
    // 图例列表的布局朝向，[ default: 'horizontal' ]
    orient: "",
    // 图例标记和文本的对齐，根据组件的位置和 orient 决定
    align: "",
    // 图例内边距
    padding: "",
    // 图例每项之间的间隔
    itemGap: "",
    // 图例标记的图形宽度
    itemWidth: "",
    itemHeight: "",
    // 如果图标，是否在缩放时保持该图形的长宽比
    symbolKeepAspect: "",
    // 格式化图例文本，支持字符串模板和回调函数两种形式，[ default: null ]
    formatter: "",
    // 图例选择的模式，是否可以通过点击图例改变系列的显示状态，[ default: true ]
    selectedMode: "",
    // 图例关闭时的颜色
    inactiveColor: "",
    // 图例选中状态表
    selected: {},
    // 图例的公用文本样式
    textStyle: {
        color: "",
        fontStyle: "",
        fontWeight: "",
        fontFamily: "",
        fontSize: "",
        lineHeight: "",
        backgroundColor: "",
        borderColor: "",
        borderWidth: "",
        borderRadius: "",
        padding: "",
        shadowColor: "",
        shadowBlur: "",
        shadowOffsetX: "",
        shadowOffsetY: "",
        width: "",
        height: "",
        textBorderColor: "",
        textBorderWidth: "",
        textShadowColor: "",
        textShadowBlur: "",
        textShadowOffsetX: "",
        textShadowOffsetY: ""
    },
    // 图例的 tooltip 配置，配置项同 tooltip
    tooltip: "",
    // 图例项的 icon
    icon: "",
    // 图例的数据数组
    data: [
        {
            name: "",
            icon: "",
            textStyle: {}
        }
    ],
    // 图例背景色，默认透明，[ default: 'transparent' ]
    backgroundColor: "",
    borderColor: "",
    borderWidth: "",
    borderRadius: "",
    // 图形阴影的模糊大小
    shadowBlur: "",
    shadowColor: "",
    shadowOffsetX: "",
    shadowOffsetY: "",
    // 图例当前最左上显示项的 dataIndex，legend.type 为 'scroll' 时有效
    scrollDataIndex: "",
    // 图例控制块中，按钮和页信息之间的间隔，legend.type 为 'scroll' 时有效
    pageButtonItemGap: "",
    // 图例控制块和图例项之间的间隔，legend.type 为 'scroll' 时有效
    pageButtonGap: "",
    // 图例控制块的位置，legend.type 为 'scroll' 时有效
    pageButtonPosition: "",
    // 图例控制块中，页信息的显示格式，legend.type 为 'scroll' 时有效
    pageFormatter: "",
    // 图例控制块的图标，legend.type 为 'scroll' 时有效
    pageIcons: {
        horizontal: "",
        vertical: ""
    },
    // 翻页按钮的颜色
    pageIconColor: "",
    // 翻页按钮不激活时（即翻页到头时）的颜色
    pageIconInactiveColor: "",
    // 翻页按钮的大小
    pageIconSize: "",
    // 图例页信息的文字样式
    pageTextStyle: {
        color: "",
        fontStyle: "",
        fontWeight: "",
        fontFamily: "",
        fontSize: "",
        lineHeight: "",
        width: "",
        height: "",
        textBorderColor: "",
        textBorderWidth: "",
        textShadowColor: "",
        textShadowBlur: "",
        textShadowOffsetX: "",
        textShadowOffsetY: ""
    },
    // 图例翻页是否使用动画
    animation: "",
    // 图例翻页时的动画时长
    animationDurationUpdate: "",
    // 图例组件中的选择器按钮，目前包括全选和反选两种功能。默认不显示，用户可手动开启，也可以手动配置每个按钮的标题。
    selector: [],
    // 选择器按钮的文本标签样式
    selectorLabel: {
        show: "",
        distance: "",
        rotate: "",
        offset: [],
        color: "",
        fontStyle: "",
        fontWeight: "",
        fontFamily: "",
        fontSize: "",
        align: "",
        verticalAlign: "",
        lineHeight: "",
        backgroundColor: "",
        borderColor: "",
        borderWidth: "",
        borderRadius: "",
        padding: "",
        shadowColor: "",
        shadowBlur: "",
        shadowOffsetX: "",
        shadowOffsetY: "",
        width: "",
        height: "",
        textBorderColor: "",
        textBorderWidth: "",
        textShadowColor: "",
        textShadowBlur: "",
        textShadowOffsetX: "",
        textShadowOffsetY: ""
    },
    // 选择器的位置，[ default: 'auto' ]
    selectorPosition: "",
    // 选择器按钮之间的间隔，[ default: 7 ]
    selectorItemGap: "",
    // 选择器按钮与图例组件之间的间隔，[ default: 10 ]
    selectorButtonGap: ""
}