ECharts中的彩色标记散点图和颜色映射

Question

阅读了ECharts文档并查看了示例后，我没有找到任何可以根据连续数据维度自动着色散点图标记的内容。

基本上，我正在尝试绘制类似于这样的图形：

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

---

例如，将基本散点图示例修改为使用标量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中是否有简化此过程的机制？

- bluenote10

---

注意：这个问题正在元站上讨论。 - Hovercraft Full Of Eels

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',
    ...
  }
 ]
}

- mrquan1506

---

我必须手动计算颜色吗？没有其他绘图库那样通过颜色映射自动映射连续维度的方法吗？ - bluenote10

Answer 2

一种实现方法如下：

在series数组中的相应对象中声明一个名为itemStyle的属性，格式如下：

series: [
  ...,
  itemStyle: {
    color: function(param) {
      // Write your logic.
      // for example: in case your data is structured as an array of arrays, you can paint it red if the first value is lower than 10:
      if (param.data[0] < 10) return 'red'
      // Or if data is structured as an array of values:
      if (param[0] < 10) return 'red'
    }
  },
]

- d0st

Answer 3

您可以使用 visualmap 的 dimension 属性。

options: EChartOption = {
    xAxis: {},
    yAxis: {},
    visualMap: [
        {
            type: 'continuous',
            dimension: 2,
            orient: 'vertical',
            right: 0,
            min: 0,
            max: 1,
            text: ['HIGH', 'LOW'],
            calculable: true,
            inRange: {
                color: ['#FF0000', '#00FF00']
            }
        }
    ],
    series: [{
        symbolSize: 20,
        data: [
            [10.0, 8.04, 0],
            [8.0, 6.95, 0.1],
            [13.0, 7.58, 0.2],
            [9.0, 8.81, 0.3],
            [11.0, 8.33, 0.4],
            [14.0, 9.96, 0.5],
            [6.0, 7.24, 0.6],
            [4.0, 4.26, 0.7],
            [12.0, 10.84, 0.8],
            [7.0, 4.82, 0.9],
            [5.0, 5.68, 1]
        ],
        type: 'scatter'
    }]
};

- dc-p8