javascript - Echarts:如何在 cartesian2d 热图中逐行进行连续的视觉图范围？

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>