ECharts heat map: how to display data density distribution

ECharts Heat Map: How to display data density distribution, specific code examples are required

Heat map is a type of chart that displays data density distribution through color levels. In the field of data visualization, heat maps are often used to present the distribution of large amounts of data in space or time. ECharts is an open source data visualization library that provides a variety of chart types, including heat maps. In this article, we will introduce how to use ECharts to display data density distribution and provide specific code examples.

First, we need to prepare some data to display. Suppose our data is the population density of different areas of a city. We can use a two-dimensional array to represent these data. Each element of the array represents the population density of an area. For convenience, we can use random numbers to generate some example data. In JavaScript, you can use Math.random() to generate a random number between 0 and 1. The following is a piece of code that generates sample data:

// 生成示例数据
var data = [];
for (var i = 0; i < 10; i++) {
  var row = [];
  for (var j = 0; j < 10; j++) {
    var density = Math.random(); // 生成随机的人口密度
    row.push(density);
  }
  data.push(row);
}

In the code, we use two nested for loops to generate a 10x10 two-dimensional array, and the value of each element is a random population density.

Next, we need to create an ECharts instance and configure the relevant parameters of the heat map. First, we need to introduce the ECharts library file. In the html file, you can use the following code to introduce ECharts:

<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>

Then, in JavaScript, we can use the following code to create an ECharts instance and configure the parameters of the heat map:

// 创建ECharts实例
var myChart = echarts.init(document.getElementById('chart'));

// 配置热力图的参数
var option = {
  tooltip: {
    position: 'top',
    formatter: '{c}'
  },
  visualMap: {
    min: 0,
    max: 1,
    calculable: true,
    orient: 'horizontal',
    left: 'center',
    bottom: '15%'
  },
  series: [{
    type: 'heatmap',
    data: data,
    label: {
      show: true
    },
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  }]
};

// 使用配置项显示热力图
myChart.setOption(option);

In the code, we first create an ECharts instance using the echarts.init() method and pass in the ID of a DOM element. Next, we configured the parameters of the heat map, including the position and format of the tooltip (prompt box), the range and position of the visual map (visual map), etc. Finally, pass the configuration item into the setOption() method to display the heat map.

Finally, in the html file, you can use the following code to create a container to display the heat map:

<div id="chart" style="width: 600px; height: 400px;"></div>

In the code, we create a div element with the id "chart", and set the width and height.

Now, we have completed the process of using ECharts to display data density distribution. Through the above code examples, we can see that using ECharts to create a heat map is very simple, and different parameters can be configured to meet different needs. I hope this article will be helpful to you when using ECharts to display data density distribution. If you have other questions or needs, you can refer to the official documentation of ECharts (https://echarts.apache.org/), which has a more detailed introduction and sample code.

The above is the detailed content of ECharts heat map: how to display data density distribution. For more information, please follow other related articles on the PHP Chinese website!