炫意html5
最早CSS3和HTML5移动技术网站之一

ECharts – 富文本标签—概述

概述

在许多地方(如图、轴的标签等)都可以使用富文本标签。例如:

原先 Apache ECharts (incubating)TM 中的文本标签,只能对整块统一进行样式设置,并且仅仅支持颜色和字体的设置,从而导致不易于制作表达能力更强的文字描述信息。

echarts v3.7 以后,支持了富文本标签,能够:

  • 定制文本块整体的样式(如背景、边框、阴影等)、位置、旋转等。
  • 对文本块中个别片段定义样式(如颜色、字体、高宽、背景、阴影等)、对齐方式等。
  • 在文本中使用图片做小图标或者背景。
  • 特定组合以上的规则,可以做出简单表格、分割线等效果。

开始下面的介绍之前,先说明一下下面会使用的两个名词的含义:

  • 文本块(Text Block):文本标签块整体。
  • 文本片段(Text fragment):文本标签块中的部分文本。

如下图示例:

完整代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="https://www.shulanxt.com/visualization/echarts/rich-text-tag-overview/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
series: [
{
type: 'scatter',
data: [[0,0]],
symbolSize: 1,
label: {
normal: {
show: true,
formatter: [
'The whole box is a {term|Text Block}, with',
'red border and grey background.',
'{fragment1|A Text Fragment} {fragment2|Another Text Fragment}',
'Text fragments can be customized.'
].join('\n'),
backgroundColor: '#eee',
// borderColor: '#333',
borderColor: 'rgb(199,86,83)',
borderWidth: 2,
borderRadius: 5,
padding: 10,
color: '#000',
fontSize: 14,
shadowBlur: 3,
shadowColor: '#888',
shadowOffsetX: 0,
shadowOffsetY: 3,
lineHeight: 30,
rich: {
term: {
fontSize: 18,
color: 'rgb(199,86,83)'
},
fragment1: {
backgroundColor: '#000',
color: 'yellow',
padding: 5
},
fragment2: {
backgroundColor: '#339911',
color: '#fff',
borderRadius: 15,
padding: 5
}
}
}
}
}
],
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>

rich

  • 我们可以看到例子中的不同样式的变化与rich及其主属性相关
  • 在 rich 里面,我们可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。

例如:

label: {
// 在文本中,可以对部分文本采用 rich 中定义样式。
// 这里需要在文本中使用标记符号:
// `{styleName|text content text content}` 标记样式名。
// 注意,换行仍是使用 '\n'。
formatter: [
'{a|这段文本采用样式a}',
'{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
].join('\n'),
rich: {
a: {
color: 'red',
lineHeight: 10
},
b: {
backgroundColor: {
image: 'xxx/xxx.jpg'
},
height: 40
},
x: {
fontSize: 18,
fontFamily: 'Microsoft YaHei',
borderColor: '#449933',
borderRadius: 4
},
...
}
}

在上述代码中我们就定义了a,b,x三种对应了不同样式的富文本标签

Rich的属性我们这里不展开叙述,大家可以去官网查看详细的配置项说明

网址附上: https://echarts.apache.org/zh/option.html#title.textStyle.rich.%3Cstyle_name%3E

炫意HTML5 » ECharts – 富文本标签—概述

Java基础教程Android基础教程