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

Answer 2

您可以使用视觉地图的维度属性

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'
    }]
};

Answer 3

实现它的一种方法如下：

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

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

Scatter plot with colored markers + colormap in ECharts

echarts