有没有办法在echarts上获取系列颜色

Question

我正在使用 Echarts v5.2.2（在 Angular 项目中，使用 ngx-echarts）来使用多个系列渲染折线图。我有一个 'highlight' 事件的监听器。此事件为我提供了一个包含一批 seriesIndex 和 dataIndex 的对象，但它不提供每个系列的颜色。

有没有办法获取echarts动态分配的颜色？

这就是我要实现的：

当鼠标指针卡入图形线点时收听。
- 通过 this.chartInstance.on('highlight', this.handleShowTip); 执行此操作。
使用 seriesIndex 和 dataIndex 的批次，其中鼠标指针捕捉到渲染 table 使用颜色、x 和 y 值作为列（table放置在图表之外。

我知道我可以将工具提示的格式化程序选项与回调函数一起使用，该回调函数将在其参数中提供系列颜色...我可以在我的图形组件之外广播这些参数以在我想要的任何地方呈现我需要的东西，但这感觉不正确（格式化程序针对 return HTML 或字符串），我想知道是否有更好的方法来获取生成的系列颜色。

谢谢！

Answer 1

Echarts使用基于主题的内置调色板。获得一组颜色的最简单方法是：

myChart.getOption().color

要获取映射到系列的颜色，您可以执行以下操作：

myChart.getModel().getSeries().map(s => {
  return {
    seriesIndex: s.seriesIndex,
    seriesColor: myChart.getVisual({
      seriesIndex: s.seriesIndex
    }, 'color')
  }
})

结果将是这样的：

[
   {
      "seriesIndex":0,
      "seriesColor":"#5470c6"
   },
   {
      "seriesIndex":1,
      "seriesColor":"#91cc75"
   },
   {
      "seriesIndex":2,
      "seriesColor":"#fac858"
   },
   {
      "seriesIndex":3,
      "seriesColor":"#ee6666"
   },
   {
      "seriesIndex":4,
      "seriesColor":"#73c0de"
   }
]

有没有办法在echarts上获取系列颜色

Is there a way on echarts to get the series colors

javascript

echarts

apache-echarts