迷你面积图只有一条数据的时候能不能显示出来一个点呢？

[YY88Xu]

问题描述

import { Chart } from '@antv/g2';

const data = [
264
];

const chart = new Chart({
container: 'container',
width: 480,
height: 80,
});

chart.data(data);

chart
.area()
.encode('x', (_, idx) => idx)
.encode('y', (d) => d)
.encode('shape', 'smooth')
.scale('y', { zero: true })
.style('fill', 'linear-gradient(-90deg, white 0%, darkgreen 100%)')
.style('fillOpacity', 0.6)
.animate('enter', { type: 'fadeIn' })
.axis(false);

chart.interaction('tooltip', {
render: (e, { title, items }) => items[0].value,
});

chart.render();

重现链接

No response

重现步骤

现在迷你面积图只有一条数据的时候，啥也没有，这种显示能不能优化成显示一个点呢？

预期行为

No response

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[hustcc]

area 没有内置这样的逻辑，从这个图形上来说，也没有办法内置。需要你这里在自己代码中处理一下。

比如增加一个 line，然后如果数据为 1 的时候，lineWidth 设置大一些。

chart
  .line()
  .encode('x', (_, idx) => idx)
  .encode('y', (d) => d)
  .encode('shape', 'smooth')
  .scale('y', { zero: true })
  .style('fillOpacity', 0.6)
  .style('lineWidth', () => data.length === 1 ? 4 : 1)  // 👈🏻 这里
  .animate('enter', { type: 'fadeIn' })
  .axis(false);