ECharts 标题组件
之前在 《ECharts 图表组成》 小节中我们已经对 图表的各个组件有了基本的认识,从本小节开始我们将逐个介绍这几个组件,本节我们就来看看这至关重要的一环,没有他你甚至连这个图表表示的是什么都不清楚,他的存在就像是网站的那样,但是 “虽好可不要贪长” 哦,尽量简洁明了。
title 即组件,包含主与副,ECharts 3.0 版本后多个组件。
解释:
组件对应下图红色框部分:
title 组件使用频率比较高,也比较完备,除了可以样式、位置等基础外,还超模式,主、副等,下面展开讨论。
完整配置项:
其中, textStyle 及副 subtextStyle 可参阅 一节。
定义 title 组件,只需通过传入 title 对象即可完成配置,示例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
< charset="utf-8" />
< http-equiv="X-UA-Compatible" content="IE=edge" />
< name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Echarts Example</title>
</head>
<body>
<div id="main" style="width: px;height: px"></div>
<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.common.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
tool@R_766_2@: {
feature: {
saveAsImage: {},
},
},
title: {
text: 'title 样例',
left: '30%',
top: '30%',
},
};
myChart.setOption(option);
</script>
</body>
</html>
示例:
可通过 borderColor、borderWidth、borderRadius 配置边框,示例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
< charset="utf-8" />
< http-equiv="X-UA-Compatible" content="IE=edge" />
< name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Echarts Example</title>
</head>
<body>
<div id="main" style="width: px;height: px"></div>
<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.common.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
tool@R_766_2@: {
feature: {
saveAsImage: {},
},
},
title: {
text: 'title 样例',
left: '30%',
top: '30%',
borderColor: '#ddd',
borderWidth: ,
borderRadius: ,
},
};
myChart.setOption(option);
</script>
</body>
</html>
示例:
可通过 shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY 配置外框的阴影:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
< charset="utf-8" />
< http-equiv="X-UA-Compatible" content="IE=edge" />
< name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Echarts Example</title>
</head>
<body>
<div id="main" style="width: px;height: px"></div>
<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.common.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
left: '30%',
top: '30%',
text: 'title 样例',
borderWidth: ,
backgroundColor: '#ccc',
shadowBlur: ,
shadowColor: '#ddd',
shadowOffsetX: ,
shadowOffsetY: ,
},
};
myChart.setOption(option);
</script>
</body>
</html>
示例:
需注意,此处配置的是整个组件块的引用,必须设置 borderWidth > 0。也可以单独设置的阴影,详情可查阅 。
ECharts 3 之后在实例上配置多个组件,是在 title 配置项入数组,数组项与单个 title 配置相同,示例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
< charset="utf-8" />
< http-equiv="X-UA-Compatible" content="IE=edge" />
< name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Echarts Example</title>
</head>
<body>
<div id="main" style="width: px;height: px"></div>
<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.common.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: [
{ text: 'title 1', top: , left: '30%' },
{ text: 'title 2', top: , left: '30%' },
{ text: 'title 3', top: , left: '30%' },
{ text: 'title 4', top: , left: '30%' },
],
};
myChart.setOption(option);
</script>
</body>
</html>
示例:
ECharts 的不同组件的配置风格的一致性是很高的,比如本文中的 title 组件,就有很多配置可以复用到其他组件当中,比如 left、top 等位置可以复用到其他几乎所有组件;textStyle 对象还可以复用到其他带文本的组件,如 yAxis 的 nameStyle; borderColor 等边框则可以复用到其他带边框的组件,如 grid。高一致使得学习曲线逐渐平滑,所以 ECharts 的学习,越到后面也就会越轻松。