Revision history [back]

To highlight data for a particular value of X in Apache ECharts Heatmap and through an event trigger, you can follow these steps:

1. Define a custom event trigger: You can define a custom event trigger using the on method of the chart instance. For example, to trigger the event on clicking a particular value in the chart, you can use the following code:

myChart.on('click', function(params) {
  // Your logic here
});

1. Retrieve data for the clicked value: Inside the event trigger, you can retrieve the data for the clicked value using the params object. The params object contains information about the clicked value, including its dataIndex.

var dataIndex = params.dataIndex;
var clickedValue = myData[dataIndex];

1. Update the chart to highlight the clicked value: You can update the chart to highlight the clicked value by changing the color or adding a border to the corresponding cell. To change the color, you can define a custom itemStyle for the clicked cell:

myChart.setOption({
  series: [{
    type: 'heatmap',
    data: myData,
    itemStyle: {
      normal: {
        color: function(params) {
          if (params[0] === clickedXValue) {
            return 'red'; // Highlight the clicked value with red color
          }
          // Use the default color for other values
          return params[2];
        }
      }
    }
  }]
});

Alternatively, you can add a border to the clicked cell by updating its emphasis style:

myChart.setOption({
  series: [{
    type: 'heatmap',
    data: myData,
    emphasis: {
      itemStyle: {
        borderWidth: 2,
        borderColor: 'red',
      }
    }
  }]
});

By using these steps, you can highlight data for a particular value of X in Apache ECharts Heatmap and through an event trigger.