这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战
title 标题相关配置
id: 组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。
show: 是否显示标题
text: 标题内容
link: 标题的超链接
textStyle: 标题样式
- color: 标题颜色，如：#ff0000, rgba(255, 0, 0, 0.5)
- fontStyle: 标题倾斜的设置，支持：normal，italic，oblique
- fontWeight：标题粗体设置，支持：normal，bold，bolder和数字
- fontFamily：标题字体集
- fontSize: 标题字体大小
- lineHeight：标题的行高 利用行高，可以很好的控制标题的间距和居中等处理
- width：宽度
- height: 高度
- textBorderColor：描边颜色
- textBorderWidth：描边宽度
- textBorderType： 描边类型 支持：solid、dashed、dotted
- textBorderDashOffset：描边的偏移量
- textShadowColor：标题阴影颜色，
- textShadowBlur: 标题阴影长度
- textShadowOffsetX: 标题阴影X轴偏移量
- textShadowOffsetY: 标题阴影Y轴偏移量
- overflow：溢出处理，配合width使用，支持：'truncate' 截断，并在末尾显示ellipsis配置的文本，默认为'none', 'break' 单词换行 'breakAll' 超过宽度就换行
- ellipsis: 配合overflow的truncate使用，自定义溢出显示的文字
- rich：标题内的文字配置不同的样式，比如：
rich: { style1: { color: 'blue', fontSize: 16, }, style2: { color: 'green', fontSize: 16, } }
subtext：副标题 sublink：副标题的超链接 subtextStyle： 副标题样式
- color: 标题颜色，如：#ff0000, rgba(255, 0, 0, 0.5)
- fontStyle: 标题倾斜的设置，支持：normal，italic，oblique
- fontWeight：标题粗体设置，支持：normal，bold，bolder和数字
- fontFamily：标题字体集
- fontSize: 标题字体大小
- align: 文字水平对齐方式
- verticalAlign：文字垂直对齐方式
- lineHeight：标题的行高 利用行高，可以很好的控制标题的间距和居中等处理
- width：宽度
- height: 高度
- textBorderColor：描边颜色
- textBorderWidth：描边宽度
- textBorderType： 描边类型 支持：solid、dashed、dotted
- textBorderDashOffset：描边的偏移量
- textShadowColor：标题阴影颜色，
- textShadowBlur: 标题阴影长度
- textShadowOffsetX: 标题阴影X轴偏移量
- textShadowOffsetY: 标题阴影Y轴偏移量
- overflow：溢出处理，配合width使用，支持：'truncate' 截断，并在末尾显示ellipsis配置的文本，默认为'none', 'break' 单词换行 'breakAll' 超过宽度就换行
- ellipsis: 配合overflow的truncate使用，自定义溢出显示的文字
- rich：标题内的文字配置不同的样式，比如：
rich: { style1: { color: 'blue', fontSize: 12, }, style2: { color: 'green', fontSize: 12, } }
完整代码：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Echarts实例</title>
<script src="./echarts.js"></script>
</head>
<body>
<div id="container" style="width: 500px;height:500px;">
</div>
<script src="./chart.js"></script>
</body>
</html>
var chart = echarts.init(document.getElementById("container"));
chart.setOption({
title: {
text: '{style1|这段文本采用样式style1}, {style2|这段文本采用样式style2}',
textStyle: {
color: 'rgba(255, 0, 0, 1)',
fontStyle: 'oblique', // normal，italic，oblique,
textBorderColor: 'black',
width: 250,
fontSize: 16,
// textBorderWidth: 2,
// textBorderType: 'dashed',
// textBorderDashOffset: 30,
// textShadowColor: 'red',
// textShadowBlur: 2,
overflow: 'truncate', // 'truncate' 截断，并在末尾显示ellipsis配置的文本，默认为...'break' 换行'breakAll',
ellipsis: '---',
formatter: [
'{style1|这段文本采用样式style1}',
'{style2|这段文本采用样式style2}这段用默认样式{x|这段用样式x}'
].join('\n'),
rich: {
style1: {
color: 'blue',
fontSize: 16,
},
style2: {
color: 'green',
fontSize: 16,
}
}
},
subtext: '副标题',
sublink: 'http://wwww.baidu.com',
subtarget: '_self',
subtextStyle: {
color: 'rgba(255, 0, 0, 0.5)',
fontStyle: 'oblique', // normal，italic，oblique,
textBorderColor: 'black',
width: 250,
fontSize: 12,
align: 'right',
verticalAlign: 'top',
// textBorderWidth: 2,
// textBorderType: 'dashed',
// textBorderDashOffset: 30,
// textShadowColor: 'red',
// textShadowBlur: 2,
overflow: 'truncate', // 'truncate' 截断，并在末尾显示ellipsis配置的文本，默认为...'break' 换行'breakAll',
ellipsis: '---',
formatter: [
'{style1|这段文本采用样式style1}',
'{style2|这段文本采用样式style2}这段用默认样式{x|这段用样式x}'
].join('\n'),
rich: {
style1: {
color: 'blue',
},
style2: {
color: 'green'
}
}
}
},
xAxis: {
type: 'category',
data: ['星期一', '星期二', '星期三']
},
yAxis: {
type: 'value'
},
series: [{
data: [3, 4, 5],
type: 'line'
}]
})
