javascript - Echarts: How to do a continuous visualmap range by row in a cartesian2d heatmap? - Stack Overflow

admin管理员组

文章数量:1406049

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

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

• javascript
• echarts

Share Improve this question Follow edited Aug 17, 2020 at 7:19 Nicolás Bravo asked Aug 17, 2020 at 1:08 Nicolás BravoNicolás Bravo 8111 silver badge66 bronze badges 2

• please change your title to some kind of question. – Cem Kaan Commented Aug 17, 2020 at 5:41
• title changed to a question – Nicolás Bravo Commented Aug 17, 2020 at 7:20

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

The visual map it is ponent 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/npm/[email protected]/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

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/npm/[email protected]/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

本文标签： javascriptEcharts How to do a continuous visualmap range by row in a cartesian2d heatmapStack Overflow