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

您可以使用视觉地图的标注属性

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 2

实现它的一种方法如下：

在 itemStyle 数组中的相应对象中声明一个 series 属性，如下所示：

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

Answer 3

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

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

然后进入选项：

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

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

3 个答案: