Echarts学习计之组件—标题（title）
下面是-- title文本– 的基本配置项
| 配置项 | 注释 |
|---|---|
| show:true | 默认值true,可选为：true（显示） / false（隐藏） |
| text: ‘主标题’ | 主标题文本，’\n’指定换行 |
| link:’ ’ | 主标题文本超链接,默认值true |
| target: null | 指定窗口打开主标题超链接，支持’self’ /‘blank’，不指定等同为’blank’（新窗口） |
| subtext: ‘副标题’ | 副标题文本，’\n’指定换行 |
| sublink: ’ ’ | 副标题文本超链接 |
| subtarget: null | 指定窗口打开副标题超链接，支持’self’ / ‘blank’，不指定等同为’blank’（新窗口） |
下面是 –title样式– 的基本配置项
| 配置项 | 注释 |
|---|---|
| textAlign | 整体（包括 text 和 subtext）的水平对齐。可选值：‘auto’、‘left’、‘right’、‘center’。 |
| textVerticalAlign | 整体（包括 text 和 subtext）的垂直对齐。可选值：‘auto’、‘top’、‘bottom’、‘middle’。 |
| triggerEvent | 是否触发事件。 |
| padding = 5 | 标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。 |
| itemGap = 10 | 主副标题之间的间距。 |
| zlevel：0 | 所有图形的 zlevel 值。 |
| z = 2 | 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。z相比zlevel优先级更低，而且不会创建新的 Canvas。 |
| left = ‘auto’ | title 组件离容器左侧的距离，left 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’, ‘center’, ‘right’。如果 left 的值为’left’, ‘center’, ‘right’，组件会根据相应的位置自动对齐 |
| top = ‘auto’ | title 组件离容器上侧的距离。top 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘top’, ‘middle’, ‘bottom’。如果 top 的值为’top’, ‘middle’, ‘bottom’，组件会根据相应的位置自动对齐。 |
| right = ‘auto’ | title 组件离容器右侧的距离。right 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比。默认自适应。 |
| backgroundColor = ‘transparent’ | 标题背景色，默认透明。颜色可以使用 RGB 表示，比如 ‘rgb(128, 128, 128)’ ，如果想要加上 alpha 通道，可以使用 RGBA，比如 ‘rgba(128, 128, 128, 0.5)’，也可以使用十六进制格式，比如 ‘#ccc’ |
| borderColor： ‘#ccc’ | 标题的边框颜色。支持的颜色格式同 backgroundColor。 |
| borderWidth：0 | 标题的边框线宽。 |
| borderRadius： 0 | 圆角半径，单位px，支持传入数组分别指定 4 个圆角半径。 如:borderRadius: 5, // 统一设置四个角的圆角大小borderRadius: [5, 5, 0, 0] //（顺时针左上，右上，右下，左下） |
| shadowBlur | 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。示例：{shadowColor: ‘rgba(0, 0, 0, 0.5)’,shadowBlur: 10}注意：此配置项生效的前提是，设置了 show: true 以及值不为 tranparent 的背景色 backgroundColor。 |
| shadowColor | 阴影颜色。支持的格式同color。注意：此配置项生效的前提是，设置了 show: true。 |
| shadowOffsetX:0 | 阴影水平方向上的偏移距离。注意：此配置项生效的前提是，设置了 show: true |
| shadowOffsetY：0 | 阴影水平方向上的偏移距离。注意：此配置项生效的前提是，设置了 show: true。 |
注：
zlevel用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。
zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。
下面展示一些 在html中的实体举例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title_示例</title>
<script src="../static/js/echarts/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1500px;height:1000px;border: 10px solid #79dd2a"
"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
option = {
title: {
// 下面为基本配置项
text: 'Title示例', //主标题文本，'\n'指定换行
link: 'https://www.baidu.com/',//主标题文本超链接,默认值true
target: 'self', //当前页面打开链接
subtext: '苏格拉底的石墩',//副标题文本，'\n'指定换行
sublink: 'https://www.baidu.com/',//副标题文本超链接,默认值true
subtarget: 'blank', //新窗口页面打开链接
left: 'center', //title 组件离容器左侧的距离。
// 下面为样式配置
textAlign: 'auto', //水平对齐-自动对齐----可选值：‘auto’、‘left’、‘right’、‘center’。
textVerticalAlign: 'auto', //垂直对齐-自动对齐----可选值：‘auto’、‘top’、‘bottom’、‘middle’。
borderWidth: 5, //边框线宽
borderColor: '#9bff2e', // 边框颜色
backgroundColor: '#2faa97', // 背景色
padding: 50,//标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
itemGap: 20,//主副标题纵向间隔，单位px，默认为10
// 下面为字体样式配置
textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
fontSize: 50, // 字体尺寸
color: "#aa4539",
fontStyle: 'italic', // 斜体
fontWeight: 'lighter', // 减细 normal--正常
},
subtextStyle: {//副标题文本样式{"color": "#aaa"}
fontSize: 20,
color: "#6836aa",
fontStyle: 'normal', // 正常
fontWeight: 'bolder', // 加粗
},
zlevel: 0,//一级层叠控制。默认0,每一个不同的zlevel将产生一个独立的canvas，相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层，canvas对象增多会消耗更多的内存和性能，并不建议设置过多的zlevel，大部分情况可以通过二级层叠控制z实现层叠控制。
z: 6,//二级层叠控制，默认6,同一个canvas（相同zlevel）上z越高约靠顶层。
}
};
myChart.setOption(option)
</script>
</body>
</html>
8820
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
