Echarts：如何在笛卡尔2d热图中逐行做一个连续的视觉图范围？

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

感谢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>

Answer 2

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>