Echarts：如何在cartesian2d热图中逐行做一个连续的visualmap范围？

Question

我有一个 Echarts (v4.8.0) cartesian2d 热图，我想为每一行使用不同的连续可视化图范围 [min,max]（我可以通过每个数据的第二个参数值“y”进行过滤）。 有没有办法做到这一点？ 我只能考虑使用不同的系列，每行一个，但我不知道如何将它们加入一个图表。

这是我的选项配置：

{
  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)'
      }
    }
}

非常感谢您的先进

Answer 1

visual map它是可以多次使用的组件，就像轴、工具提示等一样。 您是否尝试过使用其他参数制作克隆visual map ？

 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>

Answer 2

感谢Sergey Federov的回答，我设法通过使用多个热图系列及其相应的可视化图来做到这一点，并使用 seriesIndex 将它们链接起来。 这是一个示例，其中每行有 3 个具有相同值的项目，第一行（从下到上）的 visualMap 范围为 [0, 15]，而第二行为 [5, 15]。 数据根据它们的第二个笛卡尔坐标分为两个系列。 对于更多行，只需将数据拆分为更多系列并添加相应的可视化地图。

 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>