VueUiXy项目v2.6.37版本：数据点标签功能优化详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01386/article/details/148359645

VueUiXy项目v2.6.37版本：数据点标签功能优化详解

vue-data-ui A user-empowering data visualization Vue 3 components library 项目地址: https://gitcode.com/gh_mirrors/vu/vue-data-ui

VueUiXy是一个基于Vue.js的数据可视化组件库，专注于提供灵活、美观的图表展示方案。在最新的v2.6.37版本中，项目团队对数据点标签功能进行了重要优化，为开发者提供了更强大的自定义能力和更精细的控制选项。

数据点标签功能概述

数据点标签是图表中用于展示具体数值或附加信息的文本元素，通常出现在数据点附近。在数据可视化中，合理使用标签可以显著提升图表的可读性和信息传达效率。VueUiXy在本次更新中，对线型图表(line)和点型图表(plot)的标签功能进行了全面增强。

标签启用方式

在数据集配置中启用标签的方式保持不变，开发者只需在数据系列对象中设置useTag属性：

const dataset = ref([
  {
    name: 'Serie A',
    type: 'line',
    series: [1, 2, 3, 5, 8],
    useTag: 'end' // 或 'start'
  }
])

useTag属性支持两个值：

'end'：在数据系列的末端显示标签
'start'：在数据系列的起始端显示标签

需要注意的是，此功能目前仅适用于线型(line)和点型(plot)图表，不适用于柱状图(bar)类型。

新增配置选项

v2.6.37版本引入了丰富的标签配置选项，让开发者能够更精细地控制标签的显示方式和内容。

通用配置项

对于线型和点型图表，VueUiXy提供了相似的配置结构：

config.line.tag = {
  followValue: true,  // 标签是否跟随数据点值移动
  fontSize: 14,      // 标签字体大小
  formatter: null     // 标签内容格式化函数
}

config.plot.tag = {
  followValue: true,
  fontSize: 14,
  formatter: null
}

followValue 属性

followValue属性控制标签是否跟随数据点的实际值移动。当设置为true时，标签会精确地定位在数据点对应的位置；设置为false时，标签将固定在数据点的水平位置，垂直方向上不随值变化。

fontSize 属性

fontSize属性允许开发者自定义标签的字体大小，单位为像素。这为不同尺寸的图表和不同场景下的标签可读性提供了调整空间。

强大的格式化函数

formatter是本次更新中最强大的功能之一，它允许开发者完全自定义标签的显示内容。格式化函数接收一个包含value和config参数的对象，可以返回HTML字符串或null(不显示标签)。

const config = ref({
  line: {
    tag: {
      formatter: ({ value, config }) => {
        const { datapoint, serieName } = config;
        return `<div>
                  <span style="color: #666">${serieName}:</span>
                  <span style="font-weight: bold">${value.toFixed(1)}</span>
                </div>`
      }
    }
  }
})

在格式化函数中，开发者可以：

访问当前数据点的值(value)
获取系列名称(serieName)
获取完整的数据点信息(datapoint)
使用任何有效的HTML结构和内联样式
根据业务逻辑决定是否显示标签(返回null)

实际应用示例

假设我们需要在一个销售数据图表中展示各月份的销售额变化，并突出显示最高和最低销售额点：

const dataset = ref([
  {
    name: '月度销售额',
    type: 'line',
    series: [120, 135, 148, 210, 195, 230, 245, 280, 265, 300, 290, 320],
    useTag: 'end'
  }
])

const config = ref({
  line: {
    tag: {
      fontSize: 12,
      formatter: ({ value, config }) => {
        const { index } = config.datapoint;
        // 只显示1月、6月和12月的数据标签
        if ([0, 5, 11].includes(index)) {
          const monthNames = ['1月', '2月', '3月', '4月', '5月', '6月', 
                             '7月', '8月', '9月', '10月', '11月', '12月'];
          return `${monthNames[index]}: ¥${value}万`;
        }
        return null;
      }
    }
  }
})

这个配置将只在1月、6月和12月的数据点上显示标签，标签内容包含月份名称和格式化后的销售额数值。