标题组件,包含主标题和副标题。在 ECharts 3 中可以存在任意多个标题组件,这在需要标题进行排版,或者单个实例中的多个图表都需要标题时会比较有用。

title.show boolean
[ default: true ]
是否显示标题组件。
title.text string
[ default: '' ]
主标题文本,支持使用 \n 换行。
title.link string
[ default: '' ]
主标题文本超链接。
title.target string
[ default: 'blank' ]
指定窗口打开主标题超链接。
可选:
'self' 当前窗口打开
'blank' 新窗口打开
title.textAlign string
标题文本水平对齐,支持 'left', 'center', 'right',默认根据标题位置决定。
title.textBaseline string
标题文本垂直对齐,支持 'top', 'middle', 'bottom',默认根据标题位置决定。
title.subtext string
[ default: '' ]
副标题文本,支持使用 \n 换行。
title.sublink string
[ default: '' ]
副标题文本超链接。
title.subtarget string
[ default: 'blank' ]
指定窗口打开副标题超链接,可选:
'self' 当前窗口打开
'blank' 新窗口打开
title.padding number
[ default: 5 ]
标题内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。
使用示例:
// 设置内边距为 5
padding: 5
// 设置上下的内边距为 5,左右的内边距为 10
padding: [5, 10]
// 分别设置四个方向的内边距
padding: [
5, // 上
10, // 右
5, // 下
10, // 左
]
title.itemGap number
[ default: 10 ]
主副标题之间的间距。
title.zlevel number
[ default: 0 ]
所有图形的 zlevel 值。
zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。
我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。
title.z number
[ default: 2 ]
组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
z相比zlevel优先级更低,而且不会创建新的 Canvas。
title.left string, number
[ default: 'auto' ]
grid 组件离容器左侧的距离。
left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left', 'center', 'right'。
如果 left 的值为'left', 'center', 'right',组件会根据相应的位置自动对齐。
title.top string, number
[ default: 'auto' ]
grid 组件离容器上侧的距离。
top 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'top', 'middle', 'bottom'。
如果 top 的值为'top', 'middle', 'bottom',组件会根据相应的位置自动对齐。
title.right string, number
[ default: 'auto' ]
grid 组件离容器右侧的距离。
right 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。
默认自适应。
title.bottom string, number
[ default: 'auto' ]
grid 组件离容器下侧的距离。
bottom 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。
默认自适应。
title.backgroundColor Color
[ default: 'transparent' ]
标题背景色,默认透明。
颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)' ,如果想要加上 alpha 通道,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)',也可以使用十六进制格式,比如 '#ccc'
title.borderColor Color
[ default: '#ccc' ]
标题的边框颜色。支持的颜色格式同 backgroundColor。
title.borderWidth number
[ default: 0 ]
标题的边框线宽。
title.shadowBlur number
图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
注意:此配置项生效的前提是,设置了 show: true 以及值不为 tranparent 的背景色 backgroundColor
title.shadowColor Color
阴影颜色。支持的格式同color。
注意:此配置项生效的前提是,设置了 show: true。
title.shadowOffsetX number
[ default: 0 ]
阴影水平方向上的偏移距离。
注意:此配置项生效的前提是,设置了 show: true。
title.shadowOffsetY number
[ default: 0 ]
阴影垂直方向上的偏移距离。
注意:此配置项生效的前提是,设置了 show: true。

配置项setOption -- title的更多相关文章

  1. ECharts配置项之title(标题)

    1.标题居中 //left的值为'left', 'center', 'right' title:{ left:'center' } 2.主副标题之间的间距 title:{ //默认为10 itemGa ...

  2. echarts的最外层配置项

    每次查echarts的官网上边的配置项不知道分别代表什么,必须点开才知道,所以在这做下Echarts配置项的简单记录 最外层的配置项: title:进行标题与副标题的显示隐藏,位置,字体颜色,字体大小 ...

  3. flask+sqlite3+echarts3+ajax 异步数据加载

    结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...

  4. Echars详解

    简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9 /1 ...

  5. echarts3.0使用总结

    echarts的使用和例子传送门 1.安装echarts npm install echarts --save 这里配置好了,直接输入 npm install //下载插件 npm start //运 ...

  6. echarts 专题

    todo:缩放 5 分钟上手 ECharts 获取 ECharts 你可以通过以下几种方式获取 ECharts. 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的 ...

  7. Echarts 数据视图 生成Excel的方法

    一.生成Excel,两大方向:1后台生成Excel 查询数据库,使用NOPI生成Excel.2前台js生成Excel三种方式1)jquery.table2excel.js --采用,优势:兼容IE和C ...

  8. 手机响应式echarts

    // 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 使用刚指定的配置项和数据 ...

  9. ECharts教程

    ECharts 特性 兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等) 底层依赖轻量级的矢量图形库 ZRender 丰富的可视化类型 常规的折线图.柱状图 ...

随机推荐

  1. linux下JsonServer启动

    1:进入到JsonServer run.sh目录下; 2:执行"export PATH=.:$PATH"; 3:执行"run.sh start"; 这样便把Js ...

  2. 常见UI布局之1-2-1单列变宽布局

    扩展前一篇“上中下三栏布局”,中间栏划分成两列,一列宽度固定,一列宽度随浏览器窗口宽度的变化而变化.固定宽度列定义为#side,可分为左侧布局和右侧布局,分别实现如下: 1-2-1左侧固定宽度布局 & ...

  3. MySQL时间段查询

    现实中我们会遇到统计报表.比如查询当月每一天的数据数量...等等之类的.以下内容就是有关这方面的咯. 首先要知道几个函数 mysql> select now(); //这个是显示的当前时间 +- ...

  4. JavaScript中正则表达式test()、exec()、match() 方法

    转自http://www.cnblogs.com/jane-y/articles/5183859.html 1.test test 返回 Boolean,查找对应的字符串中是否存在模式.var str ...

  5. SuiteScript > Apply script to Assembly and Kit

    Path: Customization > Scripting > Scripts > New Limitation: Client script can't apply to As ...

  6. Excel 2007 批量删除隐藏的文本框

    该方法取自百度知道,该朋友给出函数,我详细写一下方法. 打开有文本框的excel文件. 按 Alt+F11 打开编辑器. 将下面的函数复制进去: Sub deltxbox()Dim s As Shap ...

  7. '"千"第一周学习情况记录

    一周过去了,今天将我这一周的学习内容和主要感想记录与此和大家共同分享,一起进步.我将自己的学习计划命名为"千",因为我喜欢这个字,希望能用此来鼓舞自己不断前进.时间总是很快的,这一 ...

  8. 读《编写可维护的JavaScript》第九、十章总结

    第九章 将配置数据从代码中分离出来 9.2 抽离配置数据 这章比较好理解,也非常常见,作者给的俩个例子就能说明一切: // 将配置数据藏在代码中 function validate(value) { ...

  9. c++实现简单的链表

    注:我是一个编程菜鸟,哪个大神看出来缺陷提点一下,感激不尽. 链表由一个个的节点串联而成,同一由first头指针管理,属于线性表中相比于数组,添加删除方便,但访问又有点慢的数据结构. 第一步:节点 N ...

  10. socket.io中emit和on的用法

    socket.emit('action');表示发送了一个action命令,命令是字符串的,在另一端接收时,可以这么写: socket.on('action',function(){...});soc ...