Echarts: How to do a continuous visualmap range by row in a cartesian2d heatmap?

Question

I have an Echarts (v4.8.0) cartesian2d heatmap and I'd like to use a different continuous visualmap range [min,max] for each row (which I could filter by the second parameter value 'y' of each data). Is there a way to do it? I can only think in using different series, one for each row, but I don't know how to join them into a single chart.

Here is my option configs:

{
  tooltip: {
    position: 'left',
  },
  grid: {
    left: '7%',
    right: '3%',
  },
  animation: false,
  xAxis: {
    type: 'category',
    data: ['04-10-2020', '05-10-2020'],
    splitArea: {
      show: false
    },
    position: 'top'
  },
  yAxis: {
    type: 'category',
    data: ['A', 'B'],
    splitLine: {
      show: true,
      lineStyle: {
        width: 2
      }
    }
  },
  visualMap: {
    type: 'continuous',
    show: false,
    min: [0, 0],   
    max: [12, 15], //here I tried to have multiples ranged, but It crashes
    inRange: {
      color: ['#ffffff', '#990000']
    },
    dimension: '2',
  },
  series: {
    name: "test",
    type: 'heatmap',
    data: [[0, 0, 2], [0, 1, 5], [1, 0, 9], [1, 1, 12]],
    label: {
      show: false
    },
    coordinateSystem: 'cartesian2d',
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
}

Thank you very much in advanced

please change your title to some kind of question. – Cem Kaan Aug 17 '20 at 05:41 — Cem Kaan, Aug 17 '20 at 05:41
title changed to a question – Nicolás Bravo Aug 17 '20 at 07:20 — Nicolás Bravo, Aug 17 '20 at 07:20

score 2 · Answer 1 · answered Aug 17 '20 at 19:25

The visual map it is component that can be used a several times just like axes, tooltip and so on. Have you tried to make clone visual map with other params?

var option = {
  tooltip: {
    position: 'left',
  },
  grid: {
    left: '7%',
    right: '3%',
  },
  animation: false,
  xAxis: {
    type: 'category',
    data: ['04-10-2020', '05-10-2020'],
    splitArea: {
      show: false
    },
    position: 'top'
  },
  yAxis: {
    type: 'category',
    data: ['A', 'B'],
    splitLine: {
      show: true,
      lineStyle: {
        width: 2
      }
    }
  },
  visualMap: [{
      type: 'continuous',
      show: false,
      min: 0,
      max: 7,
      inRange: {
        color: ['#ffffff', '#990000']
      },
      dimension: '2',
    }, {
      type: 'continuous',
      show: false,
      min: 7,
      max: 15,
      inRange: {
        color: ['#AC33FF', '#FF7C00']
      },
      dimension: '2',
    }

  ],
  series: {
    name: "test",
    type: 'heatmap',
    data: [
      [0, 0, 2],
      [0, 1, 5],
      [1, 0, 9],
      [1, 1, 12]
    ],
    label: {
      show: false
    },
    coordinateSystem: 'cartesian2d',
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  }
}

var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

<script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

Didn't notice you could use multiple visualMaps. But now I wonder how to link each visualMap to each row. Maybe if I use multiple heatmap series with data splited by row. Going to test it. — Nicolás Bravo, Aug 17 '20 at 19:36

Nicolás Bravo · Accepted Answer · 2020-08-18T05:14:28.763

Thanks to the answer of Sergey Federov I managed to do it by using multiple heatmap series with their corresponding visualmaps, using seriesIndex to link them. Here is an example where each row has 3 items with the same values, the first row (from bottom to top) has a visualMap range of [0, 15], while the second [5, 15]. The data is splitted into two series according to their second cartesian coordinate. For more rows, just split the data into more series and add their corresponding visualMaps.

var option = {
  tooltip: {
    position: 'left',
  },
  animation: false,
  xAxis: {
    type: 'category',
    data: ['04-10-2020', '05-10-2020', '06-10-2020'],
    splitArea: {
      show: false
    },
    position: 'top'
  },
  yAxis: {
    type: 'category',
    data: ['A', 'B'],
    splitLine: {
      show: true,
      lineStyle: {
        width: 2
      }
    }
  },
  visualMap: [{
      type: 'continuous',
      show: false,
      min: 0,
      max: 15,
      seriesIndex : 0,
      inRange: {
        color: ['#ffffff', '#990000']
      },
      dimension: '2',
    }, {
      type: 'continuous',
      show: false,
      min: 5,
      max: 15,
      seriesIndex: 1,
      inRange: {
        color: ['#ffffff', '#990000']
      },
      dimension: '2',
    }

  ],
  series: [{
    name: "test1",
    type: 'heatmap',
    data: [
      [0, 0, 5],
      [1, 0, 10],
      [2, 0, 15]
    ],
    label: {
      show: false
    },
    coordinateSystem: 'cartesian2d',
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  },
  {
    name: "test2",
    type: 'heatmap',
    data: [
      [0, 1, 5],
      [1, 1, 10],
      [2, 1, 15]
    ],
    label: {
      show: false
    },
    coordinateSystem: 'cartesian2d',
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  }
  ]
}

var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

<script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

Great! Please mark question as resolved so other people can see it in search. — Sergey Fedorov, Aug 17 '20 at 21:23

Echarts: How to do a continuous visualmap range by row in a cartesian2d heatmap?

2 Answers2