配置项setOption -- title
标题组件,包含主标题和副标题。在 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的更多相关文章
- ECharts配置项之title(标题)
1.标题居中 //left的值为'left', 'center', 'right' title:{ left:'center' } 2.主副标题之间的间距 title:{ //默认为10 itemGa ...
- echarts的最外层配置项
每次查echarts的官网上边的配置项不知道分别代表什么,必须点开才知道,所以在这做下Echarts配置项的简单记录 最外层的配置项: title:进行标题与副标题的显示隐藏,位置,字体颜色,字体大小 ...
- flask+sqlite3+echarts3+ajax 异步数据加载
结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...
- Echars详解
简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9 /1 ...
- echarts3.0使用总结
echarts的使用和例子传送门 1.安装echarts npm install echarts --save 这里配置好了,直接输入 npm install //下载插件 npm start //运 ...
- echarts 专题
todo:缩放 5 分钟上手 ECharts 获取 ECharts 你可以通过以下几种方式获取 ECharts. 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的 ...
- Echarts 数据视图 生成Excel的方法
一.生成Excel,两大方向:1后台生成Excel 查询数据库,使用NOPI生成Excel.2前台js生成Excel三种方式1)jquery.table2excel.js --采用,优势:兼容IE和C ...
- 手机响应式echarts
// 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 使用刚指定的配置项和数据 ...
- ECharts教程
ECharts 特性 兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等) 底层依赖轻量级的矢量图形库 ZRender 丰富的可视化类型 常规的折线图.柱状图 ...
随机推荐
- 数据绑定控件之Repeater
引言 前几篇的文章在说AJAX的内容,利用AJAX技术能够开发出高效运行的网站应用程序,不过在进行B/S项目开发时只拥有AJAX技术是远远不够的,踏入到B/S要学的东西会更多,但相较C/S的复杂逻辑结 ...
- PHP基础班初学心得:脑洞实验-JS变量存储函数与return的一些问题
本人刚参加PHP基础班培训第一天,由于之前毫无基础,分享的心得可能不规范,方法也许也"旁门左道",不能保证质量,只作自己总结学习,也希望能帮助到同样是初学者的朋友们,共同进步. 在 ...
- java第二次作业
这次通过学习,我掌握了下拉菜单和单选按钮的使用下拉菜单构造方法:JComboBox() 创建具有默认数据模型的 JComboBox.JComboBox(ComboBoxModel aModel) 创建 ...
- BlogEngine2.9模仿yahoo滚动新闻Widget
widget.ascx <%@ Control Language="C#" AutoEventWireup="true" CodeFile="w ...
- U-Boot移植
基于天翔的老师的课程, 他的博客在这儿: http://blog.csdn.net/johnmcu/article/details/6561311 注明不能转载, 就重新写一下吧: 1. 安装韦东山的 ...
- Linux-4.4-x86_64 内核配置选项简介【转】
转自:http://fx114.net/qa-188-150553.aspx 本篇文章主要介绍了"Linux-4.4-x86_64 内核配置选项简介",主要涉及到Linux-4.4 ...
- Hello Spring Framework——依赖注入(DI)与控制翻转(IoC)
又到年关了,还有几天就是春节.趁最后还有些时间,复习一下Spring的官方文档. 写在前面的话: Spring是我首次开始尝试通过官方文档来学习的框架(以前学习Struts和Hibernate都大多是 ...
- JSON总结
JSON: 关于JSON,最重要的是要理解它是一种数据格式,不是一种编程语言.虽然JSON与JavaScript具有相同的语法形式与JSON具有相同的语法形式,但JSON并不从属于JavaScrip ...
- [linux系统]--crontab定时任务
基本格式 : * * * * * command 分 时 日 月 周 命令 第1列表示分钟1-59 每分钟用*或者 */1表示 第2列表示小时1-23(0表示0点) 第3列表示日期1-31 第4列表示 ...
- java中的泛型和sql中的索引
sql中的索引 索引:好处查询的速度快,被删除,修改,不会对表产生影响,作用是加速查询: 一种典型的数据库对象 作用:提交数据的查询效率,尤其对一些数据量很大的表 索引是用来为表服务的 索引是orac ...