Echarts：如何在笛卡尔2D热图中按行连续显示视觉图？

编程问答 2022-08-16

问题描述

我有一个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,2],[0,1,5],[1,9],12]],label: {
      show: false
    },coordinateSystem: 'cartesian2d',emphasis: {
      itemStyle: {
        shadowBlur: 10,shadowColor: 'rgba(0,0.5)'
      }
    }
}

非常感谢您

解决方法

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',min: 7,max: 15,inRange: {
        color: ['#AC33FF','#FF7C00']
      },}

  ],series: {
    name: "test",type: 'heatmap',data: [
      [0,2],[0,1,5],[1,9],12]
    ],label: {
      show: false
    },coordinateSystem: 'cartesian2d',emphasis: {
      itemStyle: {
        shadowBlur: 10,shadowColor: 'rgba(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>

,

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

var option = {
  tooltip: {
    position: 'left','05-10-2020','06-10-2020'],seriesIndex : 0,min: 5,seriesIndex: 1,series: [{
    name: "test1",10],[2,15]
    ],0.5)'
      }
    }
  },{
    name: "test2",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>

echartsechartsjavascript