apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.48k stars 19.62k forks source link

[Bug] Adding third data attribute breaks color mapping of Heatmap #19032

Closed lcmgh closed 1 year ago

lcmgh commented 1 year ago

What problem does this feature solve?

I'd like to add a third data attribute as input for the tooltip. However it breaks the coloring:

When changing

const data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]]
    .map(function (item) {
    return [item[1], item[0], item[2] || '-'];
});

to

const data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]]
    .map(function (item) {
    return [item[1], item[0], item[1] || '-', 'third attr val'];
});

the items are not colored anymore.

Reproducer: https://echarts.apache.org/examples/en/editor.html?c=heatmap-cartesian&code=PTAEAcCcFMBdYJbUgWgQcwHYHsYCgBjbTAZ1lAAtsBXSE0AXlAG09R3QByARgCYBDTgBou3QSM4DhXAMziuAFnmcArMoBs4th04B2ZQA5lATmXcADGbHDt7Hr3DSejiQ6cyXiz6pe2u6711vA29jbwtw7kc8AF0AbjwQCBh4JFQMHHwiUnIAE34AT3omVg4uAGV-WFp8gqcAMUgEWqcAFQpaEhahP04AdWhczGguwrbqEe6uAFliKc5y6kwW2ISkqDhEZDQsXGhCYjJQfNh-RhZmcxEr0BURACJYEdh7mJFLkW5Pt5Yb3mufh9QDIAe8bgpQb8RHdQOZATd1JCgbokTcDKiRMYMaALNjuF9QLx4Z9_qAFMScSCcRTuBDqWDPjCZDTEWSaSjQOoaei2QycVjeVDCTdmXzeATRULeKSiWKqSpAQSbrpFZ8kQTSXD3hL1SI6VqWASYQbmATWSaCRyLSIedbQAK7bjbqqcRqXXwRLLDZ8qVztZ86cZ3TD8e7WX7vTiOSr_TieQZ3QK-C7eDcFbHxdCU6SY5HeFSvcxNd93qSCdxATKkaSqSbSfrK9DqyJzY3QFa27a2w6207JUXPm7SySSywy1Sg8OcXSE1PuCG659w72Oemx58eWuB_ys1PUyJc9vM4KjzK2_m9YDawer2rgbfCUiqbWHw33vKny3P-3vzyK-_MW_J0typfFLwAnEcwfbhQPJCDaR9aCQ0LUDWUnFhQNXaDN2gpMTQLBEH2POCMM9esiNAwF9VHZg6QlKjPSROkX3eOk3xYOkQwYzkmIPXjQC7VjAMJbinRI2jB3AjiRxEoTKSkiTpwUuiQ3EujWWTOTuA5f9pLjG1RIFLc6X3e85OPQ8TJrbiL1hQFjU9ey7105gYU1JzgREfsYXY1ymzs94YVbQK-IClgYR5QsYR7EKcXBDywPpcKZK3ENQJNVTd2SnEYUPEMNJckMOQjPz9LC0ruCMjzTO8z0CXEtyz1i2yTXNGiNKRVl3PeVkWJYVlfNZY1AXDTrQtam0xvtKanRcgqZqa_qfXagMvJGxkFI04KlqjGbBJ2yqptMua6scnqyLOnbbK5GI_AAOgAW34cAAAoADMlgIRBiFAF6ECeB6AEpQAAbz8FJaEwFh_ugB7TR-GG4YNRGixiUAAB90a4FAnFgCgEEgXJQCqWBIFAAA3fgABtOHiPAAF9AYSbBwG-qGmDB9hYGwbAqcQcAAC5Qb8cBsBIf6EGIIXOG53wyje3AnvgZAhY-zAvslqGXvAYHObKfX2AhyAocefHCeOKozhJyAhfuUAAGoIDuk5-GYZkEjKentHpnp2HQJpciFvX2AoaAMAoWBpZUcwAFIbDKWXpYsOPvd90AAA8AEF04QEgg78WACnAaBpYIKpoHQXA6jT9gXaFqhOhr0ASHAKn_szmB-Hzg2SCoAB3IXSYmPwvfYH3tAKbPc-7jhC-L0vy8ryBq78OuLaKJuW7b2AO-gLvhZ7_vB8gYfPdT7Rydz6hqemZ6Z_YB6EEwIWrj8J706F3E_DLqmCGoKn-AACMqYl1AEPaATdcBIEwJHLgVAmgAC9iCnBpk3EBb1YGcAINAGByB44cEAdgeA2AHpJxUCnMeacSDICQHnFgfhg4cEwPwB6oDOAAAVPoUFAAAYX4ITfBCci5sNDlUJ6ct9Zrxdk3dgADAHQCpvffWvdsADzASffYBtx4Gz8OwWG4AKD8HFnQxhZREblELiApRh9-C5FUQAISprQT-r8DZlF7rY1RPDea4GlpAdAgD-AvRuCE64d0VCA04Lojgo99bjxHtoW69M4hAA

What does the proposed API look like?

-

lcmgh commented 1 year ago

I found that the data I need is already available

        tooltip: {
          position: 'top',
          formatter: function (p: any) {
            return p.name
            // return moment.unix(p.data[3]).format("dddd, MMMM Do, YYYY h:mm A");
          }
        },