Vue.js 折线图添加 MarkPoint 到指定点

要将 MarkPoint 添加到指定点上，您可以通过设置 markPoint 的 data 属性来实现。具体步骤如下：

首先，在 Vue 组件中导入所需的图表库和样式文件。例如，您可以使用 echarts 库来创建图表。

import echarts from 'echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/markPoint'

在 Vue 组件中创建一个 div 元素，用于显示图表。

<template>
  <div id='chart' style='width: 600px; height: 400px;'></div>
</template>

在 Vue 组件的 mounted 生命周期钩子中，使用 echarts 库创建一个图表实例，并设置图表的配置项。

export default {
  mounted() {
    const chart = echarts.init(document.getElementById('chart'))

    const option = {
      xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        type: 'line',
        data: [10, 20, 30, 40, 50],
        markPoint: {
          data: [
            { name: '最大值', value: 50, xAxis: 4, yAxis: 50 },
            { name: '最小值', value: 10, xAxis: 0, yAxis: 10 }
          ]
        }
      }]
    }

    chart.setOption(option)
  }
}

在上面的示例中，我们将折线图的数据点分别设置为 A、B、C、D 和 E。然后，我们通过 markPoint 的 data 属性将最大值和最小值的标记点添加到指定的数据点上。

请注意，xAxis 和 yAxis 属性是用于设置折线图的横坐标和纵坐标的配置项。series 属性是用于设置折线图的系列数据和样式的配置项。在 markPoint 属性中，我们使用 xAxis 和 yAxis 属性将 markPoint 添加到指定的数据点上。

最后，使用 chart.setOption() 方法将配置项应用到图表实例中，从而显示出折线图和 MarkPoint 标记点。