学习Echarts setOption()之title对象属性使用
Posted ITseahorseL
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学习Echarts setOption()之title对象属性使用相关的知识，希望对你有一定的参考价值。
1.各个属性使用
官网API：https://echarts.apache.org/zh/option.html#title.top
<!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>Document</title>
<script src="echarts.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px;"></div>
</body>
<script>
var myChart = echarts.init(document.getElementById("main"));
var option =
title:
//1.是否显示标题组件
//show:false,
//2.主标题文本text
text: "SHL Titlevzxvzxvzxcvxcv",
//3.副标题文本subtext，支持使用 \\n 换行
subtext: "SHL Title",
//4.title 组件离容器左侧的距离
left: "center",
//5.title 组件离容器上侧的距离
top: "center",
textStyle:
//宽度
width: 100,
//6.设置主标题文本样式
fontSize: 30,
//文字本身的描边宽度
textBorderWidth: 40,
//文字本身的描边颜色
textBorderColor: "red",
//文字本身的描边类型
textBorderType: "dotted",
//文字超出宽度是否截断或者换行
ellipsis: "...",
//文字超出宽度是否截断或者换行,配置width时有效
overflow: "truncate",
,
//整体（包括 text 和 subtext）的水平对齐
textAlgin: "center",
//整体（包括 text 和 subtext）的垂直对齐
textVertialAlign: "auto",
//是否触发事件 可绑定事件
triggerEvent: false,
//主副标题之间的间距
itemGap: 40,
subtextStyle:
//7.设置副标题文本subtext样式
fontSize: 20
,
//设置背景颜色
backgroundColor: 'rgba(400,300,200,1)',
//8.主标题文本超链接
link: "https://blog.csdn.net/ITseahorseL/article/details/124299316?spm=1001.2014.3001.5501",
//指定窗口打开主标题超链接 值为self时为当前窗口打开
//为blank值时在新窗口打开
target: "blank"
,
series: [
type: 'pie',
radius: '65%',
center: ['50%', '50%'],
selectedMode: 'single',
data: [
label:
// 在文本中，可以对部分文本采用 rich 中定义样式。
// 这里需要在文本中使用标记符号：
// `styleName|text content text content` 标记样式名。
// 注意，换行仍是使用 '\\n'。
formatter: [
'title|a',
//'b|这段文本采用样式b这段用默认样式x|这段用样式x'
].join('\\n'),
//在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果
rich:
verticalAlign: "bottom",
//style_name 比如a 可以通过标签名选择用哪个标签名下的样式
a:
verticalAlign: "bottom",
]
],
myChart.setOption(option);
</script>
</html>
以上是关于学习Echarts setOption()之title对象属性使用的主要内容，如果未能解决你的问题，请参考以下文章