echarts 提供了丰富的文本标签配置项,包括:
字体基本样式设置:fontStyle、fontWeight、fontSize、fontFamily。
可以在各处的 rich 属性中定义文本片段样式。例如 series-bar.label.rich
例如:
label: {
// 在文本中,可以对部分文本采用 rich 中定义样式。
// 这里需要在文本中使用标记符号:
// `{styleName|text content text content}` 标记样式名。
// 注意,换行仍是使用 '\n'。
formatter: [
'{a|这段文本采用样式a}',
'{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
].join('\n'),
// 这里是文本块的样式设置:
color: '#333',
fontSize: 5,
fontFamily: 'Arial',
borderWidth: 3,
backgroundColor: '#984455',
padding: [3, 10, 10, 5],
lineHeight: 20,
// rich 里是文本片段的样式设置:
rich: {
a: {
color: 'red',
lineHeight: 10
},
b: {
backgroundColor: {
image: 'xxx/xxx.jpg'
},
height: 40
},
x: {
fontSize: 18,
fontFamily: 'Microsoft YaHei',
borderColor: '#449933',
borderRadius: 4
},
...
}
}
注意:如果不定义 rich,不能指定文字块的 width 和 height。
例如:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 1000px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
series: [
{
type: 'scatter',
symbolSize: 1,
data: [{
value: [0, 0],
label: {
normal: {
show: true,
formatter: [
'Plain text',
'{textBorder|textBorderColor + textBorderWidth}',
'{textShadow|textShadowColor + textShadowBlur + textShadowOffsetX + textShadowOffsetY}',
'{bg|backgroundColor + borderRadius + padding}',
'{border|borderColor + borderWidth + borderRadius + padding}',
'{shadow|shadowColor + shadowBlur + shadowOffsetX + shadowOffsetY}'
].join('\n'),
backgroundColor: '#eee',
borderColor: '#333',
borderWidth: 2,
borderRadius: 5,
padding: 10,
color: '#000',
fontSize: 14,
shadowBlur: 3,
shadowColor: '#888',
shadowOffsetX: 0,
shadowOffsetY: 3,
lineHeight: 30,
rich: {
textBorder: {
fontSize: 20,
textBorderColor: '#000',
textBorderWidth: 3,
color: '#fff'
},
textShadow: {
fontSize: 16,
textShadowBlur: 5,
textShadowColor: '#000',
textShadowOffsetX: 3,
textShadowOffsetY: 3,
color: '#fff'
},
bg: {
backgroundColor: '#339911',
color: '#fff',
borderRadius: 15,
padding: 5
},
border: {
color: '#000',
borderColor: '#449911',
borderWidth: 1,
borderRadius: 3,
padding: 5
},
shadow: {
backgroundColor: '#992233',
padding: 5,
color: '#fff',
shadowBlur: 5,
shadowColor: '#336699',
shadowOffsetX: 6,
shadowOffsetY: 6
}
}
}
}
}]
}
],
xAxis: {
axisLabel: {show: false},
axisLine: {show: false},
splitLine: {show: false},
axisTick: {show: false},
min: -1,
max: 1
},
yAxis: {
axisLabel: {show: false},
axisLine: {show: false},
splitLine: {show: false},
axisTick: {show: false},
min: -1,
max: 1
}
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
在一行的 lineHeight 被决定后,一行内,文本片段的竖直位置,由文本片段的 verticalAlign 来指定(这里和 CSS 中的规则稍有不同):
文本块的宽度,可以直接由文本块的 width 指定,否则,由最长的行决定。宽度决定后,在一行中进行文本片段的放置。文本片段的 align 决定了文本片段在行中的水平位置:
关于文字在文本片段盒中的位置:
实例效果图:
完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 1000px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var weatherIcons = {
'Sunny': 'sunny.png',
'Cloudy': 'cloudy.png',
'Showers': 'raining.png'
};
var option = {
series: [
{
type: 'scatter',
data: [
{
value: [0,0],
label: {
normal: {
formatter: [
'{tc|Center Title}{titleBg|}',
' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} ',
'{hr|}',
' xxxxx {showers|} xxxxxxxx xxxxxxxxx '
].join('\n'),
rich: {
titleBg: {
align: 'right'
}
}
}
}
},
{
value: [0, 1],
label: {
normal: {
formatter: [
'{titleBg|Left Title}',
' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} ',
'{hr|}',
' xxxxx {showers|} xxxxxxxx xxxxxxxxx '
].join('\n')
}
}
},
{
value: [0, 2],
label: {
normal: {
formatter: [
'{titleBg|Right Title}',
' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} ',
'{hr|}',
' xxxxx {showers|} xxxxxxxx xxxxxxxxx '
].join('\n'),
rich: {
titleBg: {
align: 'right'
}
}
}
}
}
],
symbolSize: 1,
label: {
normal: {
show: true,
backgroundColor: '#ddd',
borderColor: '#555',
borderWidth: 1,
borderRadius: 5,
color: '#000',
fontSize: 14,
rich: {
titleBg: {
backgroundColor: '#000',
height: 30,
borderRadius: [5, 5, 0, 0],
padding: [0, 10, 0, 10],
width: '100%',
color: '#eee'
},
tc: {
align: 'center',
color: '#eee'
},
hr: {
borderColor: '#777',
width: '100%',
borderWidth: 0.5,
height: 0
},
sunny: {
height: 30,
align: 'left',
backgroundColor: {
image: weatherIcons.Sunny
}
},
cloudy: {
height: 30,
align: 'left',
backgroundColor: {
image: weatherIcons.Cloudy
}
},
showers: {
height: 30,
align: 'left',
backgroundColor: {
image: weatherIcons.Showers
}
}
}
}
}
}
],
xAxis: {
axisLabel: {show: false},
axisLine: {show: false},
splitLine: {show: false},
axisTick: {show: false},
min: -1,
max: 1
},
yAxis: {
axisLabel: {show: false},
axisLine: {show: false},
splitLine: {show: false},
axisTick: {show: false},
min: 0,
max: 2,
inverse: true
}
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
评论区(0)