模板变量有 {a}, {b},{c},{d},{e},分别表示系列名,数据名,数据值等。 在 trigger 为 'axis' 的时候,会有多个系列的数据,此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a},{b},{c},{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为:
折线(区域)图、柱状(条形)图、K线图 : {a}(系列名称),{b}(类目值),{c}(数值), {d}(无)
散点图(气泡)图 : {a}(系列名称),{b}(数据名称),{c}(数值数组), {d}(无)
地图 : {a}(系列名称),{b}(区域名称),{c}(合并数值), {d}(无)
饼图、仪表盘、漏斗图: {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)
1、使用
只能使用\n来进行换行
方式1:
formatter:'{a}..{b}...\n'
方式2:
formatter:[
'...',
'...',
...
].join('\n')
方式3:
function (params) {
var arr = [
'{name|' + params.name + '}',
'{hr|}',
'{budget|$ ' + echarts.format.addCommas(params.value[0]) + '} {label|budget}'
];
mode !== 1 && arr.push(
'{household|$ ' + echarts.format.addCommas((+params.value[3].toFixed(4)) * 1000) + '} {label|per household}'
);
return arr.join('\n');
}
文本块的宽度,可以直接由文本块的width指定,否则,由最长的行决定,宽度决定后,在一行中进行文本片段的放置。
文本片段的 align 决定了文本片段在行中的水平位置:
首先,从左向右连续紧靠放置align为'left'的文本片段盒。
然后,从右向左连续紧靠放置align为'right'的文本片段盒。
最后,剩余的没处理的文本片段盒,紧贴着,在中间剩余的区域中居中放置。
及,当align相同时才会挨着布局,当align不相同时,会重叠但不会覆盖
关于文字在文本片段盒中的位置:
如果align为'center',则文字在文本片段盒中是居中的。
如果align为'left',则文字在文本片段盒中是居左的。
如果align为'right',则文字在文本片段盒中是居右的。
2、配合富文本rich使用
formatter:[
'{名称|...}',
'...',
...
].join('\n'),
rich:{
名称:{
对该名称|后的文本进行添加样式,且可以看成inline-block
lineHeight: 10
width:10,
align:'left|center|right',
verticalAlign:'top|middle|bottom' 在lineHeight被决定后,竖直位置由verticalAlign来指定
backgroundColor: { 使用图片
image: './data/asset/img/weather/sunny_128.png'
},
}
}
3、实现具有背景色的居中文字
'{tc|Center Title}',
方式一:
rich:{
tc: {
height:30,
backgroundColor:'red',
width:200, 只能是数值,不能是%号,否则是整个inline-block进行定位
align: 'center',
color: '#eee'
},
}
方式二:
'{tc|Center Title}{titleBg|}',
rich:{
titleBg: { 背景
backgroundColor: '#000',
height: 30,
width: '100%',
color: '#eee',
align: 'right'
},
tc: { 文字
align: 'center',
color: '#eee'
},
}
代码示例:
label: {
formatter: [
'{titleBg|Right Title}',
' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} ',
'{hr|}',
' xxxxx {showers|} xxxxxxxx xxxxxxxxx '
].join('\n'),
rich: {
titleBg: {
backgroundColor: '#000',
height: 30,
borderRadius: [5, 5, 0, 0],
padding: [0, 10, 0, 10],
width: '100%',
color: '#eee',
align: 'right'
},
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
}
}
}