echarts折线图点击空白处获取值

Question

echarts折线图点击空白处获取值
如图

点击空白处获取 当前值

使用gerZr能监听空白处，但是值不知道怎么获取

https://echarts.apache.org/examples/zh/editor.html?c=line-simple

let upInstaValue = [],
  upMaxHold = [],
  upMinHold = [];
for (let i = 0; i < 100; i++) {
  //随机生成0-100数据
  upInstaValue.push(Math.floor(Math.random() * 50) + 10);
  upMaxHold.push(Math.floor(Math.random() * 50) + 10);
  upMinHold.push(Math.floor(Math.random() * 50) + 10);
}
let upInstaValue2 = [],
  upMaxHold2 = [],
  upMinHold2 = [];

// x轴起始值
let up = 870;
// x轴终止值
let down = 915;

let step = (915 - 870) / upInstaValue.length; // 计算每个数据点的间隔
for (var i = 0; i < upInstaValue.length; i++) {
  up = Math.round((up + step) * 1000) / 1000;
  down = Math.round((down + step) * 1000) / 1000;
  upInstaValue2.push([up, upInstaValue[i]]);
  upMinHold2.push([up, upMinHold[i]]);
  upMaxHold2.push([up, upMaxHold[i]]);
}

var option = {
  tooltip: {
    trigger: 'axis',
    valueFormatter: function (value) {
      return value + 'M';
    }
  },
  dataZoom: {
    type: 'inside'
  },
  xAxis: {
    type: 'value',
    boundaryGap: false,
    min: 870,
    max: 915,
    axisLine: { onZero: false }
  },
  yAxis: {
    type: 'value',
    axisLine: {
      show: true //坐标轴线
    }
  },
  grid: {
    x: 40,
    y: 10,
    x2: 30,
    y2: 30
  },
  series: [
    {
      name: '当前值',
      type: 'line',
      smooth: true,
      symbolSize: 0,
      data: upInstaValue2
    },
    {
      name: '最大值',
      type: 'line',
      smooth: true,
      symbolSize: 0,
      data: upMaxHold2
    },
    {
      name: '最小值',
      type: 'line',
      smooth: true,
      symbolSize: 0,
      data: upMinHold2
    }
  ]
};

myChart.getZr().on('click',function(params){
    let point=[params.offsetX,params.offsetY];
    console.log(point);
})

Answer 1

【以下回答由 GPT 生成】

确认一下.h5页面实现自动计算折线图或者点击X坐标轴获取对应的X值,点击Y轴获取对应的Y值. 请告诉我怎么实现, 感谢

确保页面已正确引入ECharts库，可以按照以下步骤完成折线图的点击事件监听和获取对应的值：

1. 在引入ECharts库后，创建一个ECharts实例，并传入需要展示的DOM容器：

var myChart = echarts.init(document.getElementById('chartContainer'));

1. 在配置option之前，给ECharts实例绑定点击事件监听器：

myChart.on('click', function(params) {
  // 在这里编写点击事件触发的逻辑
});

1. 在点击事件的回调函数中，可以通过params参数获取点击事件的相关信息，包括点击的系列名称、数据索引、数据值等。

myChart.on('click', function(params) {
  console.log(params.seriesName); // 获取点击的系列名称
  console.log(params.dataIndex); // 获取点击的数据索引
  console.log(params.value); // 获取点击的数据值
  console.log(params.name); // 获取点击的类目名称
});

以上代码片段是一个示例，你可以根据你的需求自定义点击事件的逻辑。在示例代码中，可以使用params.value[0]来获取X坐标的值，使用params.value[1]来获取Y坐标的值。

1. 最后，将配置好的option应用于ECharts实例并进行渲染：

myChart.setOption(option);

以上就是实现点击折线图获取对应值的具体步骤。请确保在正确实现以上步骤后进行测试，并根据实际需求进行相应的逻辑处理。

关于自动计算折线图或点击X轴获取对应的X值、点击Y轴获取对应的Y值，可参考以下代码：

自动计算折线图的X、Y值范围：

var minData = Math.min(...upMinHold); // 获取upMinHold中的最小值
var maxData = Math.max(...upMaxHold); // 获取upMaxHold中的最大值

option.xAxis.min = Math.floor(minData); // 设置x轴最小值为最小数据
option.xAxis.max = Math.ceil(maxData); // 设置x轴最大值为最大数据
option.yAxis.min = Math.floor(minData); // 设置y轴最小值为最小数据
option.yAxis.max = Math.ceil(maxData); // 设置y轴最大值为最大数据

点击X轴获取对应的X值：

myChart.on('click', function(params) {
  if (params.componentType === 'xAxis') { // 判断是否点击的是X轴
    var xValue = params.value; // 获取点击的X轴值
    console.log(xValue);
  }
});

点击Y轴获取对应的Y值：

myChart.on('click', function(params) {
  if (params.componentType === 'yAxis') { // 判断是否点击的是Y轴
    var yValue = params.value; // 获取点击的Y轴值
    console.log(yValue);
  }
});

请根据你的需求进行适当的修改和调整，并确保以上代码的正确性和可行性。

【相关推荐】

• 你可以看下这个问题的回答https://ask.csdn.net/questions/7628781
• 这篇博客你也可以参考下：echarts 折线图 涉及 X轴内容过多造成缺少内容、刻度与文案居中对齐、以及拐点头部显示文案
• 您还可以看一下 童金浩老师的跟风舞烟学大数据可视化－Echarts从入门到上手实战课程中的 【大数据可视化技术：Echarts】课程目标小节, 巩固相关知识点
  
• 除此之外, 这篇博客: 【echarts实用技巧】echarts图表常用功能总结，折线图柱状图折柱混合【持续更新中】中的 13，折线图节点实心和节点大小改变 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^