echart 如何获取折线图的渲染路径

Question

echarts 制作完折线图后 , 如果是平滑的曲线那么该如何获取到平滑折线图的渲染路径

Answer 1

如果使用 ECharts 制作了平滑的折线图，您可以通过 ECharts 提供的 API 获取到平滑折线图的渲染路径，具体步骤如下：

在 ECharts 的配置项中，将折线图的 smooth 属性设置为 true，以启用平滑曲线。

option = {
  // ...
  series: [{
    type: 'line',
    smooth: true,
    // ...
  }]
};

在 ECharts 实例对象上调用 getOption() 方法，获取到当前图表的配置项对象。

var myChart = echarts.init(document.getElementById('myChart'));
// ...
var option = myChart.getOption();

通过配置项对象中的 graphic 属性获取到平滑折线图的渲染路径。

javascript
Copy
var renderPath = option.graphic.elements[0].shape.smooth;

在渲染路径中，每个点由两个坐标值组成，可以通过 renderPath[i] 获取到第 i 个点的坐标值，其中 i 从 0 开始计数。
注意，如果您的折线图上有多条平滑曲线，您需要分别获取到每条曲线的渲染路径。另外，渲染路径的坐标值是相对于图表区域的百分比坐标，如果需要转换为具体的像素坐标，可以使用 ECharts 提供的 convertToPixel 方法进行转换。

var point = myChart.convertToPixel({gridIndex: 0}, [renderPath[i][0], renderPath[i][1]]);

以上代码将渲染路径中第 i 个点的百分比坐标转换为像素坐标，其中 {gridIndex: 0} 参数指定了使用第一个网格（grid）进行转换。如果您的折线图中有多个网格，可以根据需要指定不同的网格索引。