14

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?

1

3 Answers 3

4

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

1
  • 1
    Do I have to compute the colors manually? Is there no automated way to map a continuous dimension via a colormap like other plotting libraries do?
    – bluenote10
    Feb 4, 2020 at 10:02
3

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

2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.