让可视化更立体！Vue + Echarts打造标记视觉引导秘籍

2024-01-24 18:43:32

大家好！我是技术博主小刚，上回，我们一起用Vue + Echarts搞定了可视化界面。这次，咱们来深挖下标记的用法，让你的可视化界面更上一层楼！

标记，顾名思义就是在图表上添加一些特殊的符号，用来突出显示某些数据点或区域，帮助读者快速理解图表所表达的信息。Echarts提供了丰富的标记类型，包括圆形、方形、三角形、菱形等，你完全可以根据自己的喜好来选择。

要使用标记，你只需要在Echarts的配置项中设置markLine或markPoint属性，即可轻松实现。这两个属性分别对应着线形标记和点形标记。以折线图为例，我们可以通过设置markLine属性来添加一条标记线，帮助读者快速对比两组数据的变化趋势。

series: [
  {
    type: 'line',
    data: [120, 132, 101, 134, 90, 230, 210],
    markLine: {
      data: [
        {type: 'average', name: '平均值'}
      ]
    }
  }
]

除了折线图，标记在散点图和气泡图中也经常用到。在散点图中，我们可以通过设置markPoint属性来添加一个标记点，帮助读者快速定位某个特定的数据点。在气泡图中，我们可以通过设置markArea属性来添加一个标记区域，帮助读者快速识别某个特定的数据区域。

series: [
  {
    type: 'scatter',
    data: [
      [10.0, 8.04],
      [8.0, 6.95],
      [13.0, 7.58],
      [9.0, 8.81],
      [11.0, 8.33],
      [14.0, 9.96],
      [6.0, 2.84],
      [4.0, 1.63],
      [12.0, 10.84],
      [7.0, 4.82],
      [5.0, 4.14]
    ],
    markPoint: {
      data: [
        {type: 'max', name: '最大值'},
        {type: 'min', name: '最小值'}
      ]
    }
  }
]

series: [
  {
    type: 'scatter',
    data: [
      [10.0, 8.04],
      [8.0, 6.95],
      [13.0, 7.58],
      [9.0, 8.81],
      [11.0, 8.33],
      [14.0, 9.96],
      [6.0, 2.84],
      [4.0, 1.63],
      [12.0, 10.84],
      [7.0, 4.82],
      [5.0, 4.14]
    ],
    markArea: {
      data: [
        {
          name: '安全区域',
          xAxis: '60',
          yAxis: '20'
        }
      ]
    }
  }
]