echarts+标签+指引线

在数据可视化中，标签和指引线是常用的元素，尤其是在饼图、环形图等图表中。它们有助于提升图表的可读性，使得数据更易于理解。

这种就是标签和牵引线

1. 标签配置 (label)

标签是图表中用来显示数据项名称、数值等信息的文本。你可以通过配置 label 来控制标签的显示样式和位置。以下是一个基本的标签配置示例：

label: {show: true, // 显示标签position: 'outside', // 标签显示在外部formatter: '{b}\n    {d}%   ', // 标签内容格式化textStyle: {color: '#fff', // 设置标签字体颜色lineHeight: 20 // 设置标签的行高},
},

1.1、标签配置项详解：

• show: true：决定是否显示标签，true 表示显示，false 表示隐藏。

• position: 'outside'：标签的位置，'outside' 表示标签显示在图形的外部。除此之外，'inside' 可以将标签放置在图形内部，'center' 可以将标签放置在图形的中心。

• formatter: '{b}\n {d}%'：格式化标签的内容。{b} 代表图形的名称（如饼图的扇区名称），{d} 代表该扇区的百分比。这里用 \n 实现换行，使得文本分成两行。

• textStyle：设置标签的文本样式。具体选项有：

  • color: '#fff'：设置标签文本颜色为白色。

  • lineHeight: 20：设置标签文本的行高，使多行文本间距更适合显示。

2、指引线配置 (labelLine) 

指引线是用来连接图形和标签的线条，通常用于饼图、环形图等图表中。指引线可以让标签与图形更清晰地关联。

labelLine: {show: true, // 显示指引线length: 10, // 第一段指引线的长度length2: 10, // 第二段指引线的长度smooth: true, // 启用平滑曲线（使指引线弯曲）lineStyle: {color: '#fff', // 指引线颜色width: 2, // 指引线宽度type: 'solid', // 指引线类型：实线},
},

2.1指引线配置项详解：

• show: true：决定是否显示指引线，true 表示显示，false 表示隐藏。

• length: 10：设置第一段指引线的长度，通常是从图形中心到外部的直线部分。

• length2: 10：设置第二段指引线的长度，通常是从第一段指引线到标签的连接部分。

• smooth: true：启用平滑曲线，使得指引线呈弯曲状，false 则是直线。

• lineStyle：配置指引线的样式，包括：

  • color: '#fff'：指引线的颜色，这里是白色。

  • width: 2：指引线的宽度，单位是像素。

  • type: 'solid'：指引线的类型，这里设置为实线。除了 'solid'，还可以使用 'dashed' 或 'dotted' 来设置虚线或点线。

3、注意事项 

formatter: '{b}\n {d}%' 中的内容：

1. {b}：图形的名称（名称字段）

• {b} 代表当前图形项的 名称，例如在饼图、柱状图等图表中，每一个图形项（如饼图的一个扇区）都有一个名称字段。

• 这个名称通常是数据源中为每个数据项指定的名称。例如，饼图每个扇区对应的对象可能有一个 name 属性，这个属性的值会替代 {b}。

• 以下在这个数据结构中，A区 和 B区 就是每个扇区的名称。ECharts 会自动将这些名称赋值给 {b}。

[{ name: 'A区', value: 40 },{ name: 'B区', value: 60 }
]

2. {d}：图形的百分比（数据值的百分比）

• {d} 代表当前图形项的 百分比。在饼图中，{d} 会显示每个扇区占图表总值的百分比。

• ECharts 会根据数据项的数值和总数，自动计算每个扇区所占的百分比，并将其用 {d} 进行填充。

[{ name: 'A区', value: 40 },{ name: 'B区', value: 60 }
]

ECharts 会自动计算出每个扇区的百分比：

• A区的百分比 = 40 / (40 + 60) * 100 = 40%

• B区的百分比 = 60 / (40 + 60) * 100 = 60%

  这些百分比值会自动填充到 {d} 占位符中。