Skip to content

[Bug] When using matrix to draw a 'heatmap', series.encode does not seem to work for setting the 'value' #21401

@EdvinasD

Description

@EdvinasD

Version

6.0.0

Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html

Steps to Reproduce

Copy paste the code into the Echarts graph library:

// Dataset with multiple value columns
// Expected: use 'value1' (0.1, 0.2, 0.3, 0.4)
// Actual: uses 'value3' (last column: 0.9, 0.8, 0.7, 0.6)
var dataset = {
  source: [
    ['x', 'y', 'value1', 'value2', 'value3'],
    ['A', 'X', 0.1, 0.5, 0.9],
    ['A', 'Y', 0.2, 0.6, 0.8],
    ['B', 'X', 0.3, 0.7, 0.7],
    ['B', 'Y', 0.4, 0.8, 0.6]
  ]
};

var xData = [
  { value: 'Group1', children: [{ value: 'A' }, { value: 'B' }] }
];

var yData = [
  { value: 'Group1', children: [{ value: 'X' }, { value: 'Y' }] }
];

var option = {
  dataset: dataset,
  matrix: {
    top: 80,
    bottom: 80,
    left: 120,
    right: 30,
    x: {
      data: xData,
      levels: [{ levelSize: 20 }, { levelSize: 50 }]
    },
    y: {
      data: yData,
      levels: [{ levelSize: 20 }, { levelSize: 50 }]
    }
  },
  series: [{
    type: 'heatmap',
    coordinateSystem: 'matrix',
    encode: {
      x: 'x',
      y: 'y',
      value: 'value1'  // <-- BUG: This is ignored, uses 'value3' instead
    },
    datasetIndex: 0
  }],
  visualMap: {
    type: 'continuous',
    min: 0,
    max: 1,
    calculable: true,
    orient: 'vertical',
    left: 10,
    top: 80,
    inRange: {
      color: ['#ffffff', '#006400']
    }
  },
  tooltip: {
    show: true,
    formatter: function (params) {
      var d = params.data;
      return `x: ${d[0]}<br>y: ${d[1]}<br>` +
             `value1 (expected): ${d[2]}<br>` +
             `value2: ${d[3]}<br>` +
             `value3 (actual used): ${d[4]}`;
    }
  }
};

Current Behavior

It seems that the x and y in the encode seems to work, but the value is ignored, it takes the last column in the dataset for it.

... example ...
  source: [
    ['x', 'y', 'value1', 'value2', 'value3'],
    ['A', 'X', 0.1, 0.5, 0.9],
    ['A', 'Y', 0.2, 0.6, 0.8],
    ['B', 'X', 0.3, 0.7, 0.7],
    ['B', 'Y', 0.4, 0.8, 0.6]
  ]
... example ...
encode: {
      x: 'x',
      y: 'y',
      value: 'value1'  // <-- BUG: This is ignored, uses 'value3' instead
    }
... example ...
Image

Expected Behavior

The value1 should be used to display the color shading and not the value3, when the encode is value: 'value1

Environment

- OS: Windows 11
- Browser: Microsoft edge
- Framework: Echarts website framework

Any additional comments?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugenThis issue is in EnglishpendingWe are not sure about whether this is a bug/new feature.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions