echarts 通用配置文本模板formatter+rich富文本_echarts formatter rich

模板变量有 {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'
           },
		}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

代码示例：

 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
			}
		}
	 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49