echarts图表叠加文字技巧详解如何在不同图表类型中添加标签注释和数据说明提升数据可视化效果与用户体验

威震华夏关云长

引言

在数据可视化领域，ECharts作为一款功能强大的图表库，被广泛应用于各类数据展示场景。然而，仅仅呈现图表本身往往不足以传达完整的信息，适当的文字标注、标签注释和数据说明能够极大地提升数据可视化的效果和用户体验。文字元素可以帮助观众更准确地理解数据含义、突出关键信息、提供额外上下文，从而使数据故事更加完整和有说服力。本文将详细介绍如何在ECharts的各种图表类型中巧妙地添加文字元素，以实现更高效、更美观的数据可视化。

ECharts文字标注基础

在深入探讨各种图表类型的文字标注技巧之前，我们需要了解ECharts中文字标注的基础知识和通用方法。

文字标注的基本配置

ECharts提供了多种方式来添加文字标注，其中最常用的是通过label和textStyle属性。以下是一个基本的文字标注配置示例：

2. option = {
3.   series: [{
4.     type: 'bar',
5.     data: [120, 200, 150, 80, 70, 110, 130],
6.     label: {
7.       show: true, // 显示标签
8.       position: 'top', // 标签位置
9.       formatter: '{c}', // 标签内容格式
10.       textStyle: {
11.         color: '#333', // 文字颜色
12.         fontSize: 12, // 文字大小
13.         fontWeight: 'bold' // 文字粗细
14.       }
15.     }
16.   }]
17. };

复制代码

标签位置控制

ECharts允许我们精确控制标签的位置，常用的位置选项包括：

• 'top'- 图形上方
• 'left'- 图形左侧
• 'right'- 图形右侧
• 'bottom'- 图形下方
• 'inside'- 图形内部
• 'insideLeft'- 图形内部左侧
• 'insideRight'- 图形内部右侧
• 'insideTop'- 图形内部上方
• 'insideBottom'- 图形内部下方
• [x, y]- 使用具体坐标定位

标签内容格式化

ECharts提供了强大的标签内容格式化功能，可以通过formatter属性实现。formatter可以是字符串模板或回调函数：

2. // 字符串模板
3. formatter: '{b}: {c}' // {b}表示数据名，{c}表示数据值
5. // 回调函数
6. formatter: function(params) {
7.   // params是数据项的参数
8.   return params.name + ': ' + params.value;
9. }

复制代码

柱状图和条形图中的文字标注

柱状图和条形图是最常用的图表类型之一，合理的文字标注可以极大地提升其可读性和信息量。

基础数据标签

在柱状图中添加数据标签是最基本的需求：

2. option = {
3.   xAxis: {
4.     type: 'category',
5.     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
6.   },
7.   yAxis: {
8.     type: 'value'
9.   },
10.   series: [{
11.     data: [120, 200, 150, 80, 70, 110, 130],
12.     type: 'bar',
13.     label: {
14.       show: true,
15.       position: 'top',
16.       formatter: '{c}'
17.     }
18.   }]
19. };

复制代码

条件格式化标签

有时我们需要根据数据值的不同显示不同的标签格式：

2. option = {
3.   xAxis: {
4.     type: 'category',
5.     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
6.   },
7.   yAxis: {
8.     type: 'value'
9.   },
10.   series: [{
11.     data: [120, 200, 150, 80, 70, 110, 130],
12.     type: 'bar',
13.     label: {
14.       show: true,
15.       position: 'top',
16.       formatter: function(params) {
17.         // 如果值大于150，显示警告样式
18.         if (params.value > 150) {
19.           return '{a|' + params.value + '}';
20.         }
21.         return params.value;
22.       },
23.       rich: {
24.         a: {
25.           color: 'red',
26.           fontWeight: 'bold'
27.         }
28.       }
29.     }
30.   }]
31. };

复制代码

添加单位说明

为数据添加单位说明可以使数据更加清晰：

2. option = {
3.   xAxis: {
4.     type: 'category',
5.     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
6.   },
7.   yAxis: {
8.     type: 'value',
9.     axisLabel: {
10.       formatter: '{value} °C' // 为Y轴添加单位
11.     }
12.   },
13.   series: [{
14.     data: [12, 20, 15, 8, 7, 11, 13],
15.     type: 'bar',
16.     label: {
17.       show: true,
18.       position: 'top',
19.       formatter: '{c} °C' // 为数据标签添加单位
20.     }
21.   }]
22. };

复制代码

堆叠柱状图的标签处理

堆叠柱状图的标签处理需要特别注意，通常我们需要显示总和或各部分的值：

2. option = {
3.   xAxis: {
4.     type: 'category',
5.     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
6.   },
7.   yAxis: {
8.     type: 'value'
9.   },
10.   series: [
11.     {
12.       name: 'Email',
13.       type: 'bar',
14.       stack: 'total',
15.       data: [120, 132, 101, 134, 90, 230, 210],
16.       label: {
17.         show: true,
18.         position: 'inside',
19.         formatter: '{c}'
20.       }
21.     },
22.     {
23.       name: 'Union Ads',
24.       type: 'bar',
25.       stack: 'total',
26.       data: [220, 182, 191, 234, 290, 330, 310],
27.       label: {
28.         show: true,
29.         position: 'inside',
30.         formatter: '{c}'
31.       }
32.     },
33.     {
34.       name: 'Video Ads',
35.       type: 'bar',
36.       stack: 'total',
37.       data: [150, 232, 201, 154, 190, 330, 410],
38.       label: {
39.         show: true,
40.         position: 'inside',
41.         formatter: '{c}'
42.       }
43.     },
44.     {
45.       name: 'Total',
46.       type: 'bar',
47.       stack: 'total',
48.       data: [0, 0, 0, 0, 0, 0, 0], // 不显示柱子，只用于显示总和
49.       label: {
50.         show: true,
51.         position: 'top',
52.         formatter: function(params) {
53.           // 计算总和
54.           const sum = params.dataIndex === 0 ? 490 :
55.                      params.dataIndex === 1 ? 546 :
56.                      params.dataIndex === 2 ? 493 :
57.                      params.dataIndex === 3 ? 522 :
58.                      params.dataIndex === 4 ? 570 :
59.                      params.dataIndex === 5 ? 890 :
60.                      930;
61.           return 'Total: ' + sum;
62.         }
63.       }
64.     }
65.   ]
66. };

复制代码

折线图中的文字标注

折线图通常用于展示趋势变化，文字标注可以帮助突出关键点和变化。

数据点标注

在折线图中标注关键数据点：

2. option = {
3.   xAxis: {
4.     type: 'category',
5.     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
6.   },
7.   yAxis: {
8.     type: 'value'
9.   },
10.   series: [{
11.     data: [150, 230, 224, 218, 135, 147, 260],
12.     type: 'line',
13.     label: {
14.       show: true,
15.       position: 'top',
16.       formatter: function(params) {
17.         // 只在最高点和最低点显示标签
18.         const data = [150, 230, 224, 218, 135, 147, 260];
19.         const max = Math.max(...data);
20.         const min = Math.min(...data);
21.         if (params.value === max) {
22.           return '{max|Max: ' + params.value + '}';
23.         } else if (params.value === min) {
24.           return '{min|Min: ' + params.value + '}';
25.         }
26.         return '';
27.       },
28.       rich: {
29.         max: {
30.           color: '#ff0000',
31.           fontWeight: 'bold'
32.         },
33.         min: {
34.           color: '#0000ff',
35.           fontWeight: 'bold'
36.         }
37.       }
38.     },
39.     markPoint: {
40.       data: [
41.         {type: 'max', name: '最大值'},
42.         {type: 'min', name: '最小值'}
43.       ]
44.     }
45.   }]
46. };

复制代码

趋势说明和预测

在折线图中添加趋势说明和预测：

2. option = {
3.   xAxis: {
4.     type: 'category',
5.     data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
6.   },
7.   yAxis: {
8.     type: 'value'
9.   },
10.   series: [{
11.     data: [820, 932, 901, 934, 1290, 1330, 1320],
12.     type: 'line',
13.     markLine: {
14.       silent: true,
15.       lineStyle: {
16.         color: '#5470C6'
17.       },
18.       data: [
19.         {
20.           type: 'average',
21.           name: '平均值'
22.         }
23.       ],
24.       label: {
25.         formatter: '平均值: {c}'
26.       }
27.     },
28.     markArea: {
29.       data: [
30.         [
31.           {
32.             name: '预测区间',
33.             xAxis: 'Jul',
34.             itemStyle: {
35.               color: 'rgba(255, 173, 177, 0.2)'
36.             }
37.           },
38.           {
39.             xAxis: 'Sep'
40.           }
41.         ]
42.       ]
43.     }
44.   }]
45. };

复制代码

多条折线的图例和标注

处理多条折线时的图例和标注：

2. option = {
3.   legend: {
4.     data: ['Email', 'Union Ads', 'Video Ads', 'Direct']
5.   },
6.   xAxis: {
7.     type: 'category',
8.     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
9.   },
10.   yAxis: {
11.     type: 'value'
12.   },
13.   series: [
14.     {
15.       name: 'Email',
16.       type: 'line',
17.       data: [120, 132, 101, 134, 90, 230, 210],
18.       label: {
19.         show: true,
20.         position: 'top',
21.         formatter: function(params) {
22.           // 只在最后一个数据点显示标签
23.           if (params.dataIndex === 6) {
24.             return params.seriesName + ': ' + params.value;
25.           }
26.           return '';
27.         }
28.       }
29.     },
30.     {
31.       name: 'Union Ads',
32.       type: 'line',
33.       data: [220, 182, 191, 234, 290, 330, 310],
34.       label: {
35.         show: true,
36.         position: 'top',
37.         formatter: function(params) {
38.           if (params.dataIndex === 6) {
39.             return params.seriesName + ': ' + params.value;
40.           }
41.           return '';
42.         }
43.       }
44.     },
45.     {
46.       name: 'Video Ads',
47.       type: 'line',
48.       data: [150, 232, 201, 154, 190, 330, 410],
49.       label: {
50.         show: true,
51.         position: 'top',
52.         formatter: function(params) {
53.           if (params.dataIndex === 6) {
54.             return params.seriesName + ': ' + params.value;
55.           }
56.           return '';
57.         }
58.       }
59.     },
60.     {
61.       name: 'Direct',
62.       type: 'line',
63.       data: [320, 332, 301, 334, 390, 330, 320],
64.       label: {
65.         show: true,
66.         position: 'top',
67.         formatter: function(params) {
68.           if (params.dataIndex === 6) {
69.             return params.seriesName + ': ' + params.value;
70.           }
71.           return '';
72.         }
73.       }
74.     }
75.   ]
76. };

复制代码

饼图中的文字标注

饼图用于展示部分与整体的关系，文字标注可以帮助识别各个部分及其占比。

基础标签和引导线

在饼图中添加标签和引导线：

2. option = {
3.   series: [
4.     {
5.       name: '访问来源',
6.       type: 'pie',
7.       radius: '50%',
8.       data: [
9.         {value: 1048, name: '搜索引擎'},
10.         {value: 735, name: '直接访问'},
11.         {value: 580, name: '邮件营销'},
12.         {value: 484, name: '联盟广告'},
13.         {value: 300, name: '视频广告'}
14.       ],
15.       label: {
16.         show: true,
17.         formatter: '{b}: {c} ({d}%)' // {b}数据名，{c}数据值，{d}百分比
18.       },
19.       labelLine: {
20.         show: true
21.       }
22.     }
23.   ]
24. };

复制代码

突出显示特定扇区

突出显示特定扇区并添加详细说明：

2. option = {
3.   series: [
4.     {
5.       name: '访问来源',
6.       type: 'pie',
7.       radius: ['40%', '70%'], // 环形图
8.       avoidLabelOverlap: false,
9.       itemStyle: {
10.         borderRadius: 10,
11.         borderColor: '#fff',
12.         borderWidth: 2
13.       },
14.       label: {
15.         show: false,
16.         position: 'center'
17.       },
18.       emphasis: {
19.         label: {
20.           show: true,
21.           fontSize: '40',
22.           fontWeight: 'bold'
23.         }
24.       },
25.       labelLine: {
26.         show: false
27.       },
28.       data: [
29.         {value: 1048, name: '搜索引擎'},
30.         {value: 735, name: '直接访问'},
31.         {value: 580, name: '邮件营销'},
32.         {value: 484, name: '联盟广告'},
33.         {value: 300, name: '视频广告'}
34.       ]
35.     }
36.   ]
37. };

复制代码

自定义富文本标签

使用富文本标签创建更丰富的饼图标注：

2. option = {
3.   series: [
4.     {
5.       name: '访问来源',
6.       type: 'pie',
7.       radius: ['40%', '70%'],
8.       data: [
9.         {value: 1048, name: '搜索引擎'},
10.         {value: 735, name: '直接访问'},
11.         {value: 580, name: '邮件营销'},
12.         {value: 484, name: '联盟广告'},
13.         {value: 300, name: '视频广告'}
14.       ],
15.       label: {
16.         formatter: function(params) {
17.           return [
18.             '{name|' + params.name + '}',
19.             '{value|' + params.value + '}',
20.             '{percent|' + params.percent + '%}'
21.           ].join('\n');
22.         },
23.         rich: {
24.           name: {
25.             fontSize: 16,
26.             lineHeight: 22,
27.             color: '#666'
28.           },
29.           value: {
30.             fontSize: 18,
31.             lineHeight: 22,
32.             color: '#333',
33.             fontWeight: 'bold'
34.           },
35.           percent: {
36.             fontSize: 14,
37.             lineHeight: 22,
38.             color: '#999'
39.           }
40.         }
41.       }
42.     }
43.   ]
44. };

复制代码

散点图中的文字标注

散点图用于展示两个变量之间的关系，文字标注可以帮助识别特定数据点。

基础数据点标注

在散点图中标注数据点：

2. option = {
3.   xAxis: {},
4.   yAxis: {},
5.   series: [{
6.     symbolSize: 20,
7.     data: [
8.       [10.0, 8.04],
9.       [8.0, 6.95],
10.       [13.0, 7.58],
11.       [9.0, 8.81],
12.       [11.0, 8.33],
13.       [14.0, 9.96],
14.       [6.0, 7.24],
15.       [4.0, 4.26],
16.       [12.0, 10.84],
17.       [7.0, 4.82],
18.       [5.0, 5.68]
19.     ],
20.     type: 'scatter',
21.     label: {
22.       show: true,
23.       formatter: function(params) {
24.         return '[' + params.data[0] + ', ' + params.data[1] + ']';
25.       },
26.       position: 'top'
27.     }
28.   }]
29. };

复制代码

突出显示异常点

突出显示散点图中的异常点：

2. option = {
3.   xAxis: {},
4.   yAxis: {},
5.   series: [{
6.     symbolSize: function (data) {
7.       return Math.sqrt(data[2]) * 5;
8.     },
9.     data: [
10.       [10.0, 8.04, 10],
11.       [8.0, 6.95, 8],
12.       [13.0, 7.58, 13],
13.       [9.0, 8.81, 9],
14.       [11.0, 8.33, 11],
15.       [14.0, 9.96, 14],
16.       [6.0, 7.24, 6],
17.       [4.0, 4.26, 4],
18.       [12.0, 10.84, 12],
19.       [7.0, 4.82, 7],
20.       [5.0, 5.68, 5]
21.     ],
22.     type: 'scatter',
23.     label: {
24.       show: true,
25.       formatter: function(params) {
26.         // 如果Y值大于9，标记为异常点
27.         if (params.data[1] > 9) {
28.           return '{abnormal|异常点}';
29.         }
30.         return '';
31.       },
32.       rich: {
33.         abnormal: {
34.           color: 'red',
35.           fontWeight: 'bold'
36.         }
37.       }
38.     },
39.     itemStyle: {
40.       color: function(params) {
41.         // 异常点使用红色
42.         if (params.data[1] > 9) {
43.           return 'red';
44.         }
45.         return '#5470C6';
46.       }
47.     }
48.   }]
49. };

复制代码

添加分类标签

为散点图添加分类标签：

2. option = {
3.   xAxis: {},
4.   yAxis: {},
5.   legend: {
6.     data: ['类别A', '类别B', '类别C']
7.   },
8.   series: [
9.     {
10.       name: '类别A',
11.       type: 'scatter',
12.       data: [
13.         [1.0, 2.0],
14.         [1.2, 1.8],
15.         [1.5, 2.2],
16.         [1.8, 1.5]
17.       ],
18.       label: {
19.         show: true,
20.         formatter: 'A',
21.         position: 'inside'
22.       }
23.     },
24.     {
25.       name: '类别B',
26.       type: 'scatter',
27.       data: [
28.         [3.0, 4.0],
29.         [3.2, 3.8],
30.         [3.5, 4.2],
31.         [3.8, 3.5]
32.       ],
33.       label: {
34.         show: true,
35.         formatter: 'B',
36.         position: 'inside'
37.       }
38.     },
39.     {
40.       name: '类别C',
41.       type: 'scatter',
42.       data: [
43.         [5.0, 6.0],
44.         [5.2, 5.8],
45.         [5.5, 6.2],
46.         [5.8, 5.5]
47.       ],
48.       label: {
49.         show: true,
50.         formatter: 'C',
51.         position: 'inside'
52.       }
53.     }
54.   ]
55. };

复制代码

地图中的文字标注

地图可视化中，文字标注对于识别地理位置和展示区域数据至关重要。

基础地图标注

在地图中添加基础标注：

2. // 假设已经加载了中国地图数据
3. option = {
4.   geo: {
5.     map: 'china',
6.     label: {
7.       show: true
8.     },
9.     itemStyle: {
10.       areaColor: '#eee',
11.       borderColor: '#777'
12.     }
13.   },
14.   series: [
15.     {
16.       type: 'scatter',
17.       coordinateSystem: 'geo',
18.       data: [
19.         {name: '北京', value: [116.46, 39.92, 100]},
20.         {name: '上海', value: [121.48, 31.22, 80]},
21.         {name: '广州', value: [113.23, 23.16, 60]},
22.         {name: '深圳', value: [114.07, 22.62, 50]}
23.       ],
24.       symbolSize: function (val) {
25.         return val[2] / 10;
26.       },
27.       label: {
28.         show: true,
29.         formatter: '{b}'
30.       }
31.     }
32.   ]
33. };

复制代码

自定义区域标签

自定义地图区域的标签样式：

2. option = {
3.   geo: {
4.     map: 'china',
5.     label: {
6.       show: true,
7.       color: '#333',
8.       fontSize: 12,
9.       formatter: function(params) {
10.         // 只显示特定省份的标签
11.         const provinces = ['北京', '上海', '广东', '浙江'];
12.         if (provinces.includes(params.name)) {
13.           return params.name;
14.         }
15.         return '';
16.       }
17.     },
18.     itemStyle: {
19.       areaColor: '#eee',
20.       borderColor: '#777'
21.     },
22.     emphasis: {
23.       label: {
24.         show: true,
25.         color: '#fff',
26.         fontSize: 14,
27.         fontWeight: 'bold'
28.       },
29.       itemStyle: {
30.         areaColor: '#389BB7'
31.       }
32.     }
33.   },
34.   series: [
35.     {
36.       type: 'map',
37.       map: 'china',
38.       geoIndex: 0,
39.       data: [
40.         {name: '北京', value: 100},
41.         {name: '上海', value: 80},
42.         {name: '广东', value: 60},
43.         {name: '浙江', value: 50}
44.       ],
45.       label: {
46.         show: false
47.       }
48.     }
49.   ]
50. };

复制代码

添加数据标签和说明

在地图中添加数据标签和说明：

2. option = {
3.   geo: {
4.     map: 'china',
5.     label: {
6.       show: false
7.     },
8.     itemStyle: {
9.       areaColor: '#eee',
10.       borderColor: '#777'
11.     }
12.   },
13.   series: [
14.     {
15.       type: 'map',
16.       map: 'china',
17.       geoIndex: 0,
18.       data: [
19.         {name: '北京', value: 100},
20.         {name: '上海', value: 80},
21.         {name: '广东', value: 60},
22.         {name: '浙江', value: 50}
23.       ],
24.       label: {
25.         show: true,
26.         formatter: function(params) {
27.           return params.name + '\n{value|' + params.value + '}';
28.         },
29.         rich: {
30.           value: {
31.             color: '#fff',
32.             fontSize: 14,
33.             fontWeight: 'bold',
34.             backgroundColor: 'rgba(0,0,0,0.5)',
35.             padding: [2, 4],
36.             borderRadius: 2
37.           }
38.         }
39.       },
40.       emphasis: {
41.         label: {
42.           show: true,
43.           formatter: function(params) {
44.             return params.name + '\n{value|' + params.value + '}';
45.           },
46.           rich: {
47.             value: {
48.               color: '#fff',
49.               fontSize: 16,
50.               fontWeight: 'bold',
51.               backgroundColor: 'rgba(0,0,0,0.7)',
52.               padding: [3, 6],
53.               borderRadius: 3
54.             }
55.           }
56.         }
57.       }
58.     }
59.   ]
60. };

复制代码

高级文字标注技巧

掌握了基础图表类型的文字标注方法后，我们可以探索一些更高级的技巧，以创建更具吸引力和信息量的可视化效果。

动态文字标注

动态更新文字标注，实现数据变化时的平滑过渡：

2. // 初始数据
3. let data = [120, 200, 150, 80, 70, 110, 130];
5. // 初始化图表
6. const myChart = echarts.init(document.getElementById('chart'));
7. const option = {
8.   xAxis: {
9.     type: 'category',
10.     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
11.   },
12.   yAxis: {
13.     type: 'value'
14.   },
15.   series: [{
16.     data: data,
17.     type: 'bar',
18.     label: {
19.       show: true,
20.       position: 'top',
21.       formatter: function(params) {
22.         // 动态计算变化百分比
23.         if (params.dataIndex > 0) {
24.           const prevValue = data[params.dataIndex - 1];
25.           const currentValue = params.value;
26.           const changePercent = ((currentValue - prevValue) / prevValue * 100).toFixed(1);
27.          
28.           if (parseFloat(changePercent) > 0) {
29.             return '{value|' + currentValue + '}\n{up|↑ ' + changePercent + '%}';
30.           } else if (parseFloat(changePercent) < 0) {
31.             return '{value|' + currentValue + '}\n{down|↓ ' + Math.abs(changePercent) + '%}';
32.           } else {
33.             return '{value|' + currentValue + '}\n{equal|— ' + changePercent + '%}';
34.           }
35.         }
36.         return '{value|' + params.value + '}';
37.       },
38.       rich: {
39.         value: {
40.           fontSize: 14,
41.           fontWeight: 'bold'
42.         },
43.         up: {
44.           color: '#ff0000'
45.         },
46.         down: {
47.           color: '#00ff00'
48.         },
49.         equal: {
50.           color: '#888888'
51.         }
52.       }
53.     }
54.   }]
55. };
57. myChart.setOption(option);
59. // 模拟数据更新
60. setInterval(() => {
61.   // 随机更新一个数据点
62.   const index = Math.floor(Math.random() * data.length);
63.   const change = Math.floor(Math.random() * 50) - 25; // -25到25之间的随机变化
64.   data[index] = Math.max(10, data[index] + change); // 确保值不小于10
65.   
66.   // 更新图表
67.   myChart.setOption({
68.     series: [{
69.       data: data
70.     }]
71.   });
72. }, 2000);

复制代码

交互式文字标注

实现与用户交互的文字标注效果：

2. option = {
3.   xAxis: {
4.     type: 'category',
5.     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
6.   },
7.   yAxis: {
8.     type: 'value'
9.   },
10.   series: [{
11.     data: [120, 200, 150, 80, 70, 110, 130],
12.     type: 'bar',
13.     label: {
14.       show: true,
15.       position: 'top',
16.       formatter: function(params) {
17.         return params.value;
18.       }
19.     }
20.   }],
21.   tooltip: {
22.     trigger: 'axis',
23.     axisPointer: {
24.       type: 'shadow'
25.     },
26.     formatter: function(params) {
27.       // 自定义tooltip内容
28.       let result = params[0].name + '<br/>';
29.       params.forEach(item => {
30.         // 计算占总和的百分比
31.         const total = params.reduce((sum, p) => sum + p.value, 0);
32.         const percent = (item.value / total * 100).toFixed(1);
33.         result += item.marker + item.seriesName + ': ' + item.value + ' (' + percent + '%)<br/>';
34.       });
35.       return result;
36.     }
37.   }
38. };
40. // 添加点击事件
41. myChart.on('click', function(params) {
42.   // 点击时显示详细信息
43.   const detail = document.getElementById('detail');
44.   detail.innerHTML = `
45.     <h3>${params.name}</h3>
46.     <p>数值: ${params.value}</p>
47.     <p>数据索引: ${params.dataIndex}</p>
48.     <p>系列名称: ${params.seriesName}</p>
49.   `;
50. });

复制代码

自定义文字样式和动画

使用富文本和动画效果增强文字标注：

2. option = {
3.   xAxis: {
4.     type: 'category',
5.     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
6.   },
7.   yAxis: {
8.     type: 'value'
9.   },
10.   series: [{
11.     data: [120, 200, 150, 80, 70, 110, 130],
12.     type: 'bar',
13.     label: {
14.       show: true,
15.       position: 'top',
16.       distance: 10,
17.       formatter: function(params) {
18.         // 使用富文本创建复杂标签
19.         return [
20.           '{title|' + params.name + '}',
21.           '{value|' + params.value + '}'
22.         ].join('\n');
23.       },
24.       rich: {
25.         title: {
26.           color: '#333',
27.           fontSize: 12,
28.           lineHeight: 16,
29.           align: 'center'
30.         },
31.         value: {
32.           color: '#5470C6',
33.           fontSize: 16,
34.           fontWeight: 'bold',
35.           lineHeight: 20,
36.           align: 'center',
37.           textBorderColor: '#fff',
38.           textBorderWidth: 2
39.         }
40.       },
41.       // 添加动画效果
42.       animationDuration: 1000,
43.       animationEasing: 'elasticOut'
44.     },
45.     itemStyle: {
46.       color: function(params) {
47.         // 根据值设置不同颜色
48.         const colorList = ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE', '#3BA272', '#FC8452'];
49.         return colorList[params.dataIndex % colorList.length];
50.       }
51.     }
52.   }]
53. };

复制代码

文字标注的最佳实践

在实际应用中，合理使用文字标注可以显著提升数据可视化的效果。以下是一些最佳实践建议：

1. 保持简洁明了

文字标注应该简洁明了，避免过多文字干扰视觉体验：

2. // 不好的做法：标签内容过多
3. label: {
4.   show: true,
5.   formatter: '2023年销售数据: {c}万元，同比增长15.3%，环比增长2.1%'
6. }
8. // 好的做法：标签内容简洁
9. label: {
10.   show: true,
11.   formatter: '{c}万元'
12. }

复制代码

2. 合理使用颜色和样式

通过颜色和样式区分不同类型的文字信息：

2. option = {
3.   xAxis: {
4.     type: 'category',
5.     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
6.   },
7.   yAxis: {
8.     type: 'value'
9.   },
10.   series: [{
11.     data: [120, 200, 150, 80, 70, 110, 130],
12.     type: 'bar',
13.     label: {
14.       show: true,
15.       position: 'top',
16.       formatter: function(params) {
17.         // 使用不同颜色区分高于和低于平均值的数据
18.         const avg = 130; // 平均值
19.         if (params.value > avg) {
20.           return '{high|' + params.value + '}';
21.         } else if (params.value < avg) {
22.           return '{low|' + params.value + '}';
23.         } else {
24.           return '{equal|' + params.value + '}';
25.         }
26.       },
27.       rich: {
28.         high: {
29.           color: '#ff0000',
30.           fontWeight: 'bold'
31.         },
32.         low: {
33.           color: '#0000ff'
34.         },
35.         equal: {
36.           color: '#888888'
37.         }
38.       }
39.     }
40.   }]
41. };

复制代码

3. 避免标签重叠

当数据点较多时，避免标签重叠影响可读性：

2. option = {
3.   xAxis: {
4.     type: 'category',
5.     data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
6.   },
7.   yAxis: {
8.     type: 'value'
9.   },
10.   series: [{
11.     data: [120, 200, 150, 80, 70, 110, 130, 90, 160, 100, 140, 180],
12.     type: 'line',
13.     label: {
14.       show: true,
15.       position: 'top',
16.       // 使用rotate避免标签重叠
17.       rotate: 45,
18.       // 或者使用formatter选择性显示标签
19.       formatter: function(params) {
20.         // 只显示最高点和最低点的标签
21.         const data = [120, 200, 150, 80, 70, 110, 130, 90, 160, 100, 140, 180];
22.         const max = Math.max(...data);
23.         const min = Math.min(...data);
24.         if (params.value === max || params.value === min) {
25.           return params.value;
26.         }
27.         return '';
28.       }
29.     }
30.   }]
31. };

复制代码

4. 提供上下文信息

为文字标注提供必要的上下文信息，帮助用户理解数据：

2. option = {
3.   title: {
4.     text: '2023年月度销售额',
5.     subtext: '单位：万元'
6.   },
7.   xAxis: {
8.     type: 'category',
9.     data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
10.   },
11.   yAxis: {
12.     type: 'value',
13.     name: '销售额（万元）'
14.   },
15.   series: [{
16.     data: [120, 200, 150, 80, 70, 110, 130, 90, 160, 100, 140, 180],
17.     type: 'bar',
18.     label: {
19.       show: true,
20.       position: 'top',
21.       formatter: function(params) {
22.         // 添加同比变化信息
23.         const lastYearData = [100, 180, 130, 90, 60, 100, 120, 80, 140, 90, 120, 150];
24.         const change = params.value - lastYearData[params.dataIndex];
25.         const changePercent = (change / lastYearData[params.dataIndex] * 100).toFixed(1);
26.         
27.         if (change > 0) {
28.           return params.value + '\n{up|↑ ' + changePercent + '%}';
29.         } else if (change < 0) {
30.           return params.value + '\n{down|↓ ' + Math.abs(changePercent) + '%}';
31.         } else {
32.           return params.value + '\n{equal|— 0%}';
33.         }
34.       },
35.       rich: {
36.         up: {
37.           color: '#ff0000',
38.           fontSize: 10
39.         },
40.         down: {
41.           color: '#00ff00',
42.           fontSize: 10
43.         },
44.         equal: {
45.           color: '#888888',
46.           fontSize: 10
47.         }
48.       }
49.     }
50.   }]
51. };

复制代码

5. 考虑可访问性

确保文字标注对所有人都是可访问的，包括视力障碍用户：

2. option = {
3.   xAxis: {
4.     type: 'category',
5.     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
6.   },
7.   yAxis: {
8.     type: 'value'
9.   },
10.   series: [{
11.     data: [120, 200, 150, 80, 70, 110, 130],
12.     type: 'bar',
13.     label: {
14.       show: true,
15.       position: 'top',
16.       // 使用较大的字体和足够的对比度
17.       textStyle: {
18.         color: '#000000', // 深色文字
19.         fontSize: 14, // 较大的字体
20.         fontWeight: 'bold' // 加粗文字
21.       },
22.       // 提供完整的上下文信息
23.       formatter: function(params) {
24.         return params.name + ': ' + params.value + '万元';
25.       }
26.     },
27.     // 为色盲用户提供额外的视觉区分
28.     itemStyle: {
29.       color: function(params) {
30.         // 使用色盲友好的颜色方案
31.         const colorList = ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2'];
32.         return colorList[params.dataIndex % colorList.length];
33.       }
34.     }
35.   }]
36. };

复制代码

案例分析：实际项目中的应用

为了更好地理解文字标注在实际项目中的应用，让我们分析一个综合案例：一个销售数据仪表板。

案例背景

假设我们需要创建一个销售数据仪表板，展示不同产品类别在不同地区的销售情况，包括销售额、同比增长率、市场份额等关键指标。

完整实现

2. // 初始化图表
3. const myChart = echarts.init(document.getElementById('dashboard'));
5. // 模拟数据
6. const salesData = {
7.   categories: ['电子产品', '服装', '食品', '家居', '图书'],
8.   regions: ['华东', '华南', '华北', '西南', '东北'],
9.   currentYear: [
10.     [1200, 900, 800, 600, 400], // 电子产品
11.     [800, 700, 600, 500, 300],  // 服装
12.     [600, 500, 400, 300, 200],  // 食品
13.     [500, 400, 300, 200, 100],  // 家居
14.     [300, 200, 100, 50, 30]     // 图书
15.   ],
16.   lastYear: [
17.     [1000, 800, 700, 500, 300], // 电子产品
18.     [700, 600, 500, 400, 200],  // 服装
19.     [500, 400, 300, 200, 100],  // 食品
20.     [400, 300, 200, 100, 50],   // 家居
21.     [200, 100, 50, 30, 20]      // 图书
22.   ]
23. };
25. // 计算同比增长率
26. const growthRates = salesData.currentYear.map((category, i) => {
27.   return category.map((value, j) => {
28.     return ((value - salesData.lastYear[i][j]) / salesData.lastYear[i][j] * 100).toFixed(1);
29.   });
30. });
32. // 计算每个地区的总销售额
33. const regionTotals = salesData.regions.map((_, j) => {
34.   return salesData.currentYear.reduce((sum, category) => sum + category[j], 0);
35. });
37. // 计算每个产品类别的市场份额
38. const marketShares = salesData.currentYear.map((category, i) => {
39.   const categoryTotal = category.reduce((sum, value) => sum + value, 0);
40.   const grandTotal = regionTotals.reduce((sum, value) => sum + value, 0);
41.   return (categoryTotal / grandTotal * 100).toFixed(1);
42. });
44. // 图表配置
45. const option = {
46.   title: {
47.     text: '2023年销售数据仪表板',
48.     subtext: '单位：万元',
49.     left: 'center'
50.   },
51.   tooltip: {
52.     trigger: 'axis',
53.     axisPointer: {
54.       type: 'shadow'
55.     },
56.     formatter: function(params) {
57.       let result = params[0].axisValue + '<br/>';
58.       params.forEach(item => {
59.         const categoryIndex = item.seriesIndex;
60.         const regionIndex = item.dataIndex;
61.         const growthRate = growthRates[categoryIndex][regionIndex];
62.         result += item.marker + item.seriesName + ': ' + item.value + '万元 (';
63.         result += growthRate > 0 ? '+' : '';
64.         result += growthRate + '%)<br/>';
65.       });
66.       return result;
67.     }
68.   },
69.   legend: {
70.     data: salesData.categories,
71.     top: '8%'
72.   },
73.   grid: {
74.     left: '3%',
75.     right: '4%',
76.     bottom: '15%',
77.     top: '15%',
78.     containLabel: true
79.   },
80.   xAxis: {
81.     type: 'category',
82.     data: salesData.regions,
83.     axisLabel: {
84.       interval: 0,
85.       rotate: 30
86.     }
87.   },
88.   yAxis: {
89.     type: 'value',
90.     name: '销售额（万元）'
91.   },
92.   series: salesData.categories.map((category, i) => {
93.     return {
94.       name: category,
95.       type: 'bar',
96.       stack: 'total',
97.       data: salesData.currentYear[i],
98.       label: {
99.         show: true,
100.         position: 'inside',
101.         formatter: function(params) {
102.           // 只显示大于500的值，避免标签重叠
103.           return params.value > 500 ? params.value : '';
104.         }
105.       },
106.       emphasis: {
107.         focus: 'series'
108.       },
109.       // 根据市场份额设置颜色深浅
110.       itemStyle: {
111.         color: function() {
112.           const colors = ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE'];
113.           const baseColor = colors[i % colors.length];
114.           // 市场份额越大，颜色越深
115.           const share = parseFloat(marketShares[i]);
116.           const opacity = 0.3 + (share / 50) * 0.7; // 0.3到1之间的透明度
117.           return baseColor.replace(')', `, ${opacity})`).replace('rgb', 'rgba');
118.         }
119.       }
120.     };
121.   }),
122.   // 添加市场份额标注
123.   graphic: salesData.categories.map((category, i) => {
124.     return {
125.       type: 'text',
126.       left: (i * 20 + 10) + '%',
127.       top: '92%',
128.       style: {
129.         text: category + ': ' + marketShares[i] + '%',
130.         font: '12px sans-serif',
131.         fill: '#666'
132.       }
133.     };
134.   }),
135.   // 添加同比增长率标注
136.   markPoint: {
137.     symbol: 'pin',
138.     symbolSize: 50,
139.     data: salesData.categories.flatMap((category, i) => {
140.       return salesData.regions.map((region, j) => {
141.         const growthRate = parseFloat(growthRates[i][j]);
142.         // 只标注增长率超过20%或低于-10%的数据点
143.         if (growthRate > 20 || growthRate < -10) {
144.           return {
145.             name: category + ' ' + region,
146.             coord: [j, salesData.currentYear[i][j]],
147.             value: growthRate > 0 ? '+' + growthRate + '%' : growthRate + '%',
148.             itemStyle: {
149.               color: growthRate > 0 ? '#ff0000' : '#0000ff'
150.             }
151.           };
152.         }
153.         return null;
154.       }).filter(item => item !== null);
155.     })
156.   }
157. };
159. // 应用配置
160. myChart.setOption(option);
162. // 添加交互事件
163. myChart.on('click', function(params) {
164.   const categoryIndex = params.seriesIndex;
165.   const regionIndex = params.dataIndex;
166.   
167.   // 显示详细信息
168.   const detail = document.getElementById('detail');
169.   detail.innerHTML = `
170.     <h3>${params.seriesName} - ${params.name}</h3>
171.     <p>当前年销售额: ${params.value}万元</p>
172.     <p>去年销售额: ${salesData.lastYear[categoryIndex][regionIndex]}万元</p>
173.     <p>同比增长: ${growthRates[categoryIndex][regionIndex]}%</p>
174.     <p>市场份额: ${marketShares[categoryIndex]}%</p>
175.   `;
176. });
178. // 响应式调整
179. window.addEventListener('resize', function() {
180.   myChart.resize();
181. });

复制代码

案例分析

这个综合案例展示了如何在实际项目中应用各种文字标注技巧：

1. 多层次信息展示：基础数据标签显示销售额markPoint标注异常增长率graphic元素展示市场份额tooltip提供详细交互信息
2. 基础数据标签显示销售额
3. markPoint标注异常增长率
4. graphic元素展示市场份额
5. tooltip提供详细交互信息
6. 视觉层次：使用颜色深浅表示市场份额大小使用不同颜色区分正负增长率使用标签位置和大小创建视觉层次
7. 使用颜色深浅表示市场份额大小
8. 使用不同颜色区分正负增长率
9. 使用标签位置和大小创建视觉层次
10. 交互设计：点击事件显示详细信息tooltip提供上下文信息响应式设计适应不同屏幕
11. 点击事件显示详细信息
12. tooltip提供上下文信息
13. 响应式设计适应不同屏幕
14. 数据关系展示：通过堆叠柱状图展示部分与整体关系通过增长率标注展示时间趋势通过市场份额标注展示竞争格局
15. 通过堆叠柱状图展示部分与整体关系
16. 通过增长率标注展示时间趋势
17. 通过市场份额标注展示竞争格局

多层次信息展示：

• 基础数据标签显示销售额
• markPoint标注异常增长率
• graphic元素展示市场份额
• tooltip提供详细交互信息

视觉层次：

• 使用颜色深浅表示市场份额大小
• 使用不同颜色区分正负增长率
• 使用标签位置和大小创建视觉层次

交互设计：

• 点击事件显示详细信息
• tooltip提供上下文信息
• 响应式设计适应不同屏幕

数据关系展示：

• 通过堆叠柱状图展示部分与整体关系
• 通过增长率标注展示时间趋势
• 通过市场份额标注展示竞争格局

总结

在ECharts中，文字标注是提升数据可视化效果和用户体验的关键元素。通过本文的详细介绍，我们了解了如何在各种图表类型中添加标签注释和数据说明，包括：

1. 基础文字标注技术：包括标签位置控制、内容格式化和样式设置。
2. 不同图表类型的文字标注技巧：针对柱状图、折线图、饼图、散点图和地图等不同图表类型的特点，提供了相应的文字标注方法。
3. 高级文字标注技巧：包括动态标注、交互式标注和自定义样式等高级应用。
4. 文字标注的最佳实践：强调了简洁明了、合理使用颜色、避免重叠、提供上下文信息和考虑可访问性等原则。
5. 实际案例分析：通过一个综合的销售数据仪表板案例，展示了如何在实际项目中应用各种文字标注技巧。

合理运用这些技巧，可以显著提升数据可视化的效果，使数据故事更加完整、准确和有说服力。在实际应用中，我们需要根据具体的数据特点和用户需求，灵活选择和组合不同的文字标注方法，以达到最佳的视觉效果和用户体验。

最后，随着数据可视化技术的不断发展，ECharts也在不断更新和完善其文字标注功能。作为开发者，我们应该保持学习和探索的态度，不断尝试新的技术和方法，以创建更加优秀的数据可视化作品。