Apache echartJS 折线图中的中间点？

Question

我正在尝试使用 Apache EChartsJS 找到折线图中由一条线连接的两点之间的中间点。

`https://jsfiddle.net/fnxzb2cq/2/

当您将鼠标悬停在该点上时，该值会显示为警报。但我正在寻找插值的中间点的值。例如，在上图中，当我将鼠标悬停在与 x 轴中的点 15 相对应的线上时，它应该改变 ~ 175 的值。

这可以通过 echart 的 API 实现吗？还是我们需要创建一条自定义拟合线，然后在不同的函数中进行计算，并在悬停时显示函数的结果？

谢谢。

Answer 1

我已在此处导入您的代码。 然后我使用以下函数将系列从

n

项插值到

2*n-1

项：

function interpolate(arr) {
  var result = []
  if (arr.length) {
    result.push(arr[0])
    for (var i = 1; i < arr.length; i++) {
      result.push((arr[i - 1] + arr[i]) * 0.5)
      result.push(arr[i])
    }
  }
  return result;
}

var myChart = echarts.init(document.getElementById("lineChart"))
var categories = [10, 20, 30, 40, 50, 60, 70]
var data = [150, 230, 224, 218, 135, 147, 260]

function interpolate(arr) {
  var result = []
  if (arr.length) {
    result.push(arr[0])
    for (var i = 1; i < arr.length; i++) {
      result.push((arr[i - 1] + arr[i]) * 0.5)
      result.push(arr[i])
    }
  }
  return result;
}


// specify chart configuration item and data
var option = (option = {
  xAxis: {
    type: "category",
    data: interpolate(categories),
  },
  yAxis: {
    type: "value",
    triggerLineEvent: true,
  },
  series: [{
    name: 'line1',
    triggerLineEvent: true,
    data: interpolate(data),
    type: "line",
  }, ],
})

// use configuration item and data specified to show chart
myChart.setOption(option);

#lineChart {
  background: gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script>
<div id="lineChart" style="height: 290px;"></div>