ECharts 标题组件
1.标题组件的基本使用
图标组件使用title节点进行配置。
标题分为主标题和副标题，
主标题的文本内容使用 'text' 属性进行设置
副标题使用 'subtext' 属性进行设置
var option = {
title:{
text:"我是标题",
subtext:"我是副标题"
}
}
2.标题组件的位置
标题组件默认在左上角，可以像css一样为其设置位置
left/right/top/bottom：分别设置标题组件位于4个方向的距离，值可以是数字(代表具体的像素)，百分比，关键字（水平居中使用center，垂直居中使用middle）
水平垂直居中
var option = {
title: {
text: "我是标题",
subtext: "我是副标题",
top:'middle',
left:'center'
}
}
使用百分比
var option = {
title: {
text: "我是标题",
subtext: "我是副标题",
top:'50%',
left:'50%'
}
}
使用数字（容器宽高600*300）
var option = {
title: {
text: "我是标题",
subtext: "我是副标题",
left:300,//按照当前容器宽高 相当于 50%
top:150
}
}
3.多个标题组件
一个图表可以有一个或多个标题组件，每个标题组件对应一个配置对象，当有多个标题组件时，使用数组将其包裹起来，例如：
配置多个标题组件
var option = {
title: [//含有多个标题组件时，使用数组进行包裹
{//每个组件就是一个对象
text: "我是标题1",
subtext: "我是副标题1",
left: 150,
top: 100
},
{//每个组件就是一个对象
text: "我是标题2",
subtext: "我是副标题2",
left: 300,
top: 150
}
]
}
4.显示/隐藏标题组件
如果没有配置标题组件，则该组件没有显示/隐藏的说法（都不存在，何来隐藏/显示）
如果配置了标题组件，则该组件默认显示。
如果配置了组件，但是某些情况下需要动态切换显示/隐藏，就需要用到 'show' 属性。
'show' 属性的值是布尔值，通过他来切换标题的组件的显示/隐藏
var option = {
title: [//含有多个标题组件时，使用数组进行包裹
{//每个组件就是一个对象
text: "我是标题1",
subtext: "我是副标题1",
left: 150,
top: 100,
show:true,//默认展示
},
{//每个组件就是一个对象
text: "我是标题2",
subtext: "我是副标题2",
left: 300,
top: 150,
show:false,//默认隐藏
}
]
}
使用js动态切换标题组件的显示/隐藏
<div class="btn_box">
<button type="button" class="btn btn-primary" onclick="showTitle(0)">标题1切换显示/隐藏</button>
<button type="button" class="btn btn-primary" onclick="showTitle(1)">标题2切换显示/隐藏</button>
</div>
function showTitle(index){
//取反
option.title[index].show = !option.title[index].show
//更新图表
charts.setOption(option)
}
5.标题组件的盒模型？
标题组件和html的元素一样，有背景色，内边距，边框，阴影等样式可以设置，具体如下：
(1)背景色
backgroundColor:'red'
(2)内边距
padding：10
(3)边框系列
边框大小：borderWidth
边框颜色：borderColor
边框圆角:borderRadius
(4)阴影系列
阴影的模糊大小：shadowBlur
阴影颜色：shadowColor
阴影偏移：shadowOffsetX/shadowOffsetY
var option = {
title: [//含有多个标题组件时，使用数组进行包裹
{//每个组件就是一个对象
text: "我是标题1",
subtext: "我是副标题1",
left: 150,
top: 100,
show:true,//默认展示
backgroundColor:'red',//红色背景
padding:5,//内边距
borderWidth:5,//边框宽度
borderColor:'yellow',//边框颜色
borderRadius:1,//边框圆角
shadowBlur:1,//阴影大小
shadowColor:'#666',//阴影颜色
shadowOffsetX:1,//阴影偏移
shadowOffsetY:1,//阴影偏移
},
{//每个组件就是一个对象
text: "我是标题2",
subtext: "我是副标题2",
left: 300,
top: 150,
show:true,
backgroundColor:'lightblue',//浅蓝背景
padding:20,//内边距
borderWidth:20,//边框宽度
borderColor:'orange',//边框颜色
borderRadius:5,//边框圆角
shadowBlur:20,//阴影大小
shadowBlur:10,//阴影大小
shadowColor:'#666',//阴影颜色
shadowOffsetX:5,//阴影偏移
shadowOffsetY:5,//阴影偏移
}
]
}
6.文字样式
主标题的文字样式（颜色，斜体，加粗，字体大小）都统一配置到textStyle这个对象中。
而副标题的文字样式（颜色，斜体，加粗，字体大小）则统一配置到subtextStyle这个对象中。
PS:其实textStyle是一个通用的配置项，只要有文本的地方就可以对他进行配置，不仅仅局限在某个组件或者某个节点中。
var option = {
title: [//含有多个标题组件时，使用数组进行包裹
{//每个组件就是一个对象
text: "我是标题1",
subtext: "我是副标题1",
left: 150,
top: 100,
textStyle:{//主标题文字样式
color:'red',//字体颜色
fontSize:20,//字体大小
fontStyle:'italic',//斜体
fontWeight:500,//加粗
},
subtextStyle:{//副标题文字样式
color:'blue',//字体颜色
fontSize:20,//字体大小
fontStyle:'italic',//斜体
fontWeight:500,//加粗
}
},
]
}
7.组件层级
当多个标题叠加在一起时，默认情况下后面的组件会覆盖前面的组件，如果想改变这种设置，可以配置 'z' 属性（相当于css里面的z-index），来改变图形的前后顺序
定位的位置一致时，默认的效果（蓝色在后面，所以蓝色盖住了红色）
var option = {
title: [//含有多个标题组件时，使用数组进行包裹
{//每个组件就是一个对象
text: "我是标题1",
left: 150,//定位一致
top: 100,//定位一致
subtext: '我是副标题1',
backgroundColor:'red',//红
},
{//每个组件就是一个对象
text: "我是标题2",
left: 150,//定位一致
top: 100,//定位一致
subtext: '我是副标题2',
backgroundColor:'blue',//蓝
},
]
}
改变 'z' 属性（默认是2 建议设置时10起步）
var option = {
title: [//含有多个标题组件时，使用数组进行包裹
{//每个组件就是一个对象
text: "我是标题1",
left: 150,//定位一致
top: 100,//定位一致
subtext: '我是副标题1',
backgroundColor:'red',
z:10,//设置层级
},
{//每个组件就是一个对象
text: "我是标题2",
left: 150,//定位一致
top: 100,//定位一致
subtext: '我是副标题2',
backgroundColor:'blue',
},
]
}
8.文本的排列顺序
这里主要是两个属性：textAlign / textVerticalAlign 可选值：'left'、'right'、'center'。
但是他们并不是指文本的对齐方式，因为本身组件大小就是由内容撑开的，所以没有文本对齐一说。他们值的是文本的排序方向
默认情况下，文字从定位原点从左往右依次排列,例如：
var option = {
title: [//含有多个标题组件时，使用数组进行包裹
{//每个组件就是一个对象
text: "我是标题1",
left: '50%',
top: '50%',
subtext: '我是副标题1',
},
]
}
对比：
var option = {
title: [//含有多个标题组件时，使用数组进行包裹
{//每个组件就是一个对象
text: "默认",
left: '50%',
top: '20%',
},
{//每个组件就是一个对象
text: "center",
left: '50%',
top: '50%',
textAlign:'center'
},
{//每个组件就是一个对象
text: "right",
left: '50%',
top: '70%',
textAlign:'right'
},
]
}
这种模式下，排序方式一般使用left即可
除非定位时使用50%,又想居中，可以尝试使用center
9.标题的点击事件
默认情况下，title组件不支持点击事件，需要在option中开启
title:{
triggerEvent: true
}
通过图表实例调用on方法来进行事件监听
some_chart.on('click', 'title', function (e) {
console.log(e)
})
PS:成功的话，鼠标移动到title上面时指针会变成pointer形状，表示已经可以点击
