ECharts 配置项 title

633 阅读4分钟

标题组件,包含主标题和副标题

      title: {
        // id: "bar01",
        show: true, // 是否显示标题组件
        text: "柱状图", // 主标题文本,支持使用 \n 换行
        link: "http://www.baidu.com", // 主标题文本超链接。
        target: "self", // 'self' 当前窗口打开  默认:'blank' 新窗口打开
        // 主标题文字样式设置
        textStyle: {
          color: "pink", // 主标题文字的颜色
          fontStyle: "italic", // 主标题文字字体的风格 1 normal 标准的 2 italic 斜体的 3 oblique 倾斜的
          fontWeight: "bolder", // 主标题文字字体的粗细。1 normal 标准的 2 bold 粗体 3 bolder 4 lighter 细体 5 100 | 200 | 300 | 400...
          fontSize: 20, //主标题文字的字体大小。 number
          // lineHeight: 30, // 行高。number
          // width: 30, // 文本显示宽度。 number
          // height: 30, // 文本显示高度。 number
          textBorderColor: "red", // 文字本身的描边颜色。Color
          textBorderWidth: 3, // 文字本身的描边宽度 number
          textBorderType: "solid", // 文字本身的描边类型 1 solid 实线 2 dashed 虚线 3 dotted 斑点
          textBorderDashOffset: 5, // 用于设置虚线的偏移量 参考文档
          textShadowColor: "black", // 文字本身的阴影颜色。 color
          textShadowBlur: 5, //文字本身的阴影长度。
          textShadowOffsetX: 5, // 文字本身的阴影 X 偏移
          textShadowOffsetY: 3, // 文字本身的阴影 Y 偏移
          overflow: "none", // 默认 none 1 'truncate' 截断,并在末尾显示ellipsis配置的文本,默认为... 2 'break' 换行 3 breakAll 强制单词内换行
          ellipsis: "更多", //  在overflow配置为'truncate'的时候,可以通过该属性配置末尾显示的文本。
        },
        // 副标题
        subtext: "副标题", // 副标题文本,支持使用 \n 换行。
        sublink: "http://www.baidu.com", // 副标题文本超链接。
        subtarget: "self", // 指定窗口打开副标题超链接 默认:'blank' 新窗口打开 2 self
        subtextStyle: {
          color: "red", // 副标题文字的颜色。
          fontStyle: "italic", // 副标题文字字体的风格 1 normal 标准的 2 italic 斜体的 3 oblique 倾斜的
          fontWeight: "bolder", // 主标题文字字体的粗细。1 normal 标准的 2 bold 粗体 3 bolder 4 lighter 细体 5 100 | 200 | 300 | 400...
          fontSize: 14, //主标题文字的字体大小。 number
          // lineHeight: 30, // 行高。number
          // width: 30, // 文本显示宽度。 number
          // height: 30, // 文本显示高度。 number
          textBorderColor: "red", // 文字本身的描边颜色。Color
          textBorderWidth: 3, // 文字本身的描边宽度 number
          textBorderType: "solid", // 文字本身的描边类型 1 solid 实线 2 dashed 虚线 3 dotted 斑点
          textBorderDashOffset: 5, // 用于设置虚线的偏移量 参考文档
          textShadowColor: "black", // 文字本身的阴影颜色。 color
          textShadowBlur: 5, //文字本身的阴影长度。
          textShadowOffsetX: 5, // 文字本身的阴影 X 偏移
          textShadowOffsetY: 3, // 文字本身的阴影 Y 偏移
          overflow: "none", // 默认 none 1 'truncate' 截断,并在末尾显示ellipsis配置的文本,默认为... 2 'break' 换行 3 breakAll 强制单词内换行
          ellipsis: "更多", //  在overflow配置为'truncate'的时候,可以通过该属性配置末尾显示的文本。
        },
        textAlign: "auto", // 整体(包括 text 和 subtext)的水平对齐。可选值 'auto'、'left'、'right'、'center'。
        // textVerticalAlign: "bottom", //  整体(包括 text 和 subtext)的垂直对齐。 'auto'、'top'、'bottom'、'middle'
        triggerEvent: false, // 是否触发事件。
        padding: 10, // 标题内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。
        /* 
          // 设置内边距为 5
          padding: 5
          // 设置上下的内边距为 5,左右的内边距为 10
          padding: [5, 10]
          // 分别设置四个方向的内边距
          padding: [
              5,  // 上
              10, // 右
              5,  // 下
              10, // 左
          ]
        */
        itemGap: 10, // 主副标题之间的间距。
        left: "30%", // title 组件离容器左侧的距离。 left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left', 'center', 'right'。
        top: "auto", // top 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'top', 'middle', 'bottom'。
        right: "auto", // right 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。
        bottom: "auto", //bottom 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。
        backgroundColor: "rgba(0,0,0,.1)", // 标题背景色,默认透明。
        borderColor: "black", // 标题的边框颜色。支持的颜色格式同 backgroundColor。
        borderWidth: 1, // 标题的边框线宽。
        borderRadius: 20, // 圆角半径,单位px,支持传入数组分别指定 4 个圆角半径。 如: borderRadius: [5, 5, 0, 0] //(顺时针左上,右上,右下,左下)
        //  borderRadius: 5  统一设置四个角的圆角大小
        shadowBlur: 10, // 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
        shadowColor: "red", // 阴影颜色。支持的格式同color。
        shadowOffsetX: 10, // 阴影水平方向上的偏移距离。
        shadowOffsetY: 3, // 阴影垂直方向上的偏移距离。
        // 注意:此配置项生效的前提是,设置了 show: true。
      },