vueecharts如何设置折线图的折点显示横纵坐标

可以通过设置 `tooltip` 的 `trigger` 属性为 `'axis'`，并在 `series` 中设置 `label` 的 `show` 属性为 `true` 来实现折线图的折点显示横纵坐标。具体实现方法如下所示：

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line',
    label: {
      show: true, // 显示折点上的数值
      position: 'top' // 数值显示在折点的上方
    }
  }]
};

相关问题

vueecharts如何设置折线图的横纵坐标

以下是在Vue中使用Echarts设置折线图的横纵坐标的方法：

1. 在Vue组件中引入Echarts：

import echarts from 'echarts'

2. 在Vue组件中创建一个div元素，用于显示Echarts图表：

<template>
  <div ref="chart" style="width: 100%; height: 400px;"></div>
</template>

3. 在Vue组件的mounted钩子函数中初始化Echarts图表，并设置横纵坐标：

mounted() {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(this.$refs.chart)

  // 指定图表的配置项和数据
  const option = {
    xAxis: {
      type: 'category', // 横坐标类型为类目轴
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] // 横坐标数据
    },
    yAxis: {
      type: 'value' // 纵坐标类型为数值轴
    },
    series: [{
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line' // 折线图
    }]
  }

  // 使用刚指定的配置项和数据显示图表
  myChart.setOption(option)
}

在上述代码中，我们通过xAxis和yAxis分别设置了横纵坐标的类型和数据。其中，xAxis的type属性设置为'category'，表示横坐标为类目轴；yAxis的type属性设置为'value'，表示纵坐标为数值轴。xAxis的data属性设置为一个数组，表示横坐标的数据。

4. 在Vue组件的样式中设置图表与横纵坐标的距离：

/* 设置图表与横纵坐标的距离 */
.echarts {
  padding: 10px;
}

在上述代码中，我们通过设置.echarts的padding属性来调整图表与横纵坐标的距离。

echarts 折线图如何标记某个点，显示虚线横纵坐标

您可以通过 ECharts 的 `tooltip` 和 `axisPointer` 配置项来实现在折线图上标记某个点，并显示横纵坐标的虚线。

首先，您需要将 `tooltip` 配置项的 `trigger` 属性值设置为 `'axis'`。然后，在 `tooltip` 配置项中，使用 `formatter` 属性来自定义提示框的内容，以便在鼠标悬浮在折线图上的某个点时，显示该点的坐标信息。

接下来，您需要使用 `axisPointer` 配置项来显示横纵坐标的虚线。具体来说，您可以将 `axisPointer` 配置项的 `type` 属性值设置为 `'cross'`，以显示十字准星指示器，并使用 `lineStyle` 属性来设置虚线的样式。

以下是一个示例代码：

option = {
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  tooltip: {
    trigger: 'axis',
    formatter: function(params) {
      var point = params[0];
      return point.name + '<br/>' + point.seriesName + ': ' + point.value;
    },
    axisPointer: {
      type: 'cross',
      lineStyle: {
        type: 'dashed'
      }
    }
  },
  series: [{
    name: '销量',
    type: 'line',
    data: [120, 132, 101, 134, 90, 230, 210]
  }]
};

在上面的代码中，我们将 `tooltip` 的 `trigger` 属性值设置为 `'axis'`，并在 `formatter` 函数中自定义了提示框的内容。接着，我们在 `tooltip` 配置项中添加了 `axisPointer` 属性，并将其 `type` 属性值设置为 `'cross'`，以显示十字准星指示器。最后，我们使用 `lineStyle` 属性来设置虚线的样式。