带有彩色标记的散点图+ ECharts中的颜色图

Question

阅读了ECharts文档并查看了示例之后，我发现没有任何东西可以根据连续的数据维度自动为散点图标记着色。

基本上，我正在尝试绘制类似这样的内容：

在ECharts中解决该问题的正确方法是什么？

---

例如，可以如下修改basic scatter plot example以对所有数据点使用标量color：

option = {
    xAxis: {},
    yAxis: {},
    series: [{
        symbolSize: 20,
        data: [
            [10.0, 8.04],
            [8.0, 6.95],
            [13.0, 7.58],
            [9.0, 8.81],
            [11.0, 8.33],
            [14.0, 9.96],
            [6.0, 7.24],
            [4.0, 4.26],
            [12.0, 10.84],
            [7.0, 4.82],
            [5.0, 5.68]
        ],
        color: '#F00',
        type: 'scatter'
    }]
};

我想实现的是为color传递这样的数据向量，这是行不通的：

option = {
    xAxis: {},
    yAxis: {},
    series: [{
        symbolSize: 20,
        data: [
            [10.0, 8.04],
            [8.0, 6.95],
            [13.0, 7.58],
            [9.0, 8.81],
            [11.0, 8.33],
            [14.0, 9.96],
            [6.0, 7.24],
            [4.0, 4.26],
            [12.0, 10.84],
            [7.0, 4.82],
            [5.0, 5.68]
        ],
        color: [
            0.11,
            0.53,
            0.76,
            0.01,
            0.53,
            0.19,
            0.64,
            0.65,
            0.34,
            0.23,
            0.81
        ],
        type: 'scatter'
    }]
};

我看到的唯一解决方案是：

• 手动计算数据中的颜色，
• 仅使用长度为1的序列来控制每个散点的颜色。

ECharts中是否有一种机制可以简化此过程？

Answer 1

您可以在Echarts中为不同的点绘制不同的颜色

const scatterData = data.map((p) => ({
      name: 'point',
      value: [p.xPos, p.yPos],
      itemStyle: p.color
    }));

然后输入选项：

option = {
  series:[
  {
    symbolSize: 20,
    data:scatterData, 
    type: 'scatter',
    ...
  }
 ]
}