ucharts 添加标记点

在 uCharts 中添加标记点可以使用 `markLine` 和 `markPoint`。其中，`markLine` 用于添加线性标记，`markPoint` 用于添加点状标记。

下面是一个简单的示例代码，演示了如何在柱状图中添加标记点：

import uCharts from '@/components/u-charts/u-charts.js';

const data = {
  categories: ['一月', '二月', '三月', '四月', '五月', '六月'],
  series: [
    {
      name: '销售量',
      data: [500, 800, 900, 700, 600, 400],
      type: 'column',
      color: '#2d8cf0'
    }
  ]
};

const opts = {
  legend: { show: false },
  xAxis: { disableGrid: true },
  yAxis: { min: 0 },
  series: [
    {
      type: 'line',
      data: [700, 700, 700, 700, 700, 700],
      markLine: {
        data: [{ yAxis: 700 }],
        lineStyle: { color: '#f00' }
      }
    },
    {
      type: 'scatter',
      data: [
        { xAxis: 1, yAxis: 800 },
        { xAxis: 2, yAxis: 900 },
        { xAxis: 4, yAxis: 600 }
      ],
      markPoint: {
        symbol: 'circle',
        symbolSize: 20,
        label: {
          show: true,
          formatter: ({ yAxis }) => yAxis
        }
      }
    }
  ]
};

new uCharts({
  $this: this.$refs.canvas,
  type: 'column',
  pixelRatio: uni.getSystemInfoSync().pixelRatio,
  categories: data.categories,
  series: data.series,
  ...opts
});

在上面的例子中，我们定义了一个柱状图，并在其中添加了一条标记线和三个标记点。其中，标记线的位置是固定的，而标记点的位置则是根据数据动态计算的。在标记点上方显示了其对应的 Y 轴数值。