echarts 饼图 指示线值

### 关于 ECharts 饼图中指示线（提示框）显示值的配置

在 ECharts 中，可以通过 `tooltip` 和 `label` 属性来控制饼图中提示框和标签的内容与样式。

#### 设置提示框内容格式化为百分比
为了使提示框显示数据项的具体数值及其所占比例，在 `tooltip` 的 `formatter` 参数内定义特定字符串模板。这允许自定义提示框内的信息展示方式[^2]：

tooltip: {
    trigger: 'item',
    formatter: '{a}<br/>{b} : {c} ({d}%)'
}

此处 `{a}` 表示系列名称；`{b}` 是数据项名称；`{c}` 显示实际的数据值；而 `{d}%` 则用于表示该部分占比的百分数。

#### 控制指示线条是否显示及数量
对于指示线条即引导线而言，其可见性和数目由 `series.label.lineStyle.show` 及 `series.label.normal.show` 来决定。当希望所有扇区均带有指向性的指引箭头时，则应将上述两个属性设为 `true`; 若仅需突出当前鼠标悬停处的一个指引线，则只需关闭全局默认状态下的 `series.label.normal.show=false`, 同时保持交互状态下开启即可[^1]:

series: [{
    ...
    label: {
        normal: {
            show: false,
            position: 'outer'
        },
        emphasis: {
            show: true
        }
    },
    labelLine: {
        normal: {
            show: true
        }
    }
}]

以上代码片段展示了如何通过调整不同场景下各参数的状态实现灵活定制化的视觉效果呈现。

#### 调整提示框的位置
如果想要改变提示框弹出的确切方位，可以利用 `position` 字段指定绝对坐标或是相对定位的方式来进行微调[^3]:
- 绝对位置：`position: [10, 10]` 将使得提示框距离图表左边界10像素、顶部边距也为10像素的地方出现；
- 相对位置：采用 `'50%'` 这样的百分比率作为参照物能够令提示框居中悬浮于整个视窗之中:`position: ['50%', '50%']`.

综上所述，通过对这些选项的有效组合运用便能达成预期的设计目标并优化用户体验。