Scatter plot with colored markers + colormap in ECharts

user_1804173 0
Viewed 2824

After reading the ECharts documentation and looking at examples, I haven't found anything that would allow coloring scatter plot markers automatically according to a continuous data dimension.

Basically, I'm trying to plot something like this:

enter image description here

What would be the right approach to that problem in ECharts?

For example modifying the basic scatter plot example to use a scalar color for all data points is possible as follows:

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

What I would like to achieve is to pass in a data vector like this for the color, which doesn't work:

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

The only solution I see is:

  • computing the colors from the data manually,
  • using sequences of only length 1 to have control over the color of each scatter point.

Is there a mechanism in ECharts that simplifies this process?

echarts
3 Answers

You can draw different color for different point like this in Echarts

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

Then in option:

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

One way to pull it off is the following:

Declare an itemStyle property in the corresponding object from the series array as follows:

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

you can use the visualmap's dimension property

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