ECharts 히트 맵: 데이터 밀도 분포를 표시하는 방법

ECharts 히트맵: 데이터 밀도 분포를 표시하는 방법, 구체적인 코드 예제가 필요합니다

히트맵은 데이터 밀도 분포를 색상 수준으로 표시하는 차트 유형입니다. 데이터 시각화 분야에서는 공간이나 시간에 따른 대량의 데이터 분포를 표현하기 위해 히트맵(heat map)이 자주 사용됩니다. ECharts는 히트맵을 포함한 다양한 차트 유형을 제공하는 오픈 소스 데이터 시각화 라이브러리입니다. 이 기사에서는 EChart를 사용하여 데이터 밀도 분포를 표시하고 구체적인 코드 예제를 제공하는 방법을 소개합니다.

먼저 표시할 데이터를 준비해야 합니다. 우리의 데이터가 도시의 여러 지역의 인구 밀도라고 가정합니다. 2차원 배열을 사용하여 이러한 데이터를 나타낼 수 있습니다. 배열의 각 요소는 해당 지역의 인구 밀도를 나타냅니다. 편의상 난수를 사용하여 일부 예제 데이터를 생성할 수 있습니다. JavaScript에서는 Math.random()을 사용하여 0과 1 사이의 난수를 생성할 수 있습니다. 다음은 샘플 데이터를 생성하는 코드입니다.

// 生成示例数据
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);
}

코드에서는 두 개의 중첩 for 루프를 사용하여 10x10 2차원 배열을 생성합니다. 여기서 각 요소의 값은 임의의 인구 밀도입니다.

다음으로 ECharts 인스턴스를 생성하고 히트맵의 관련 매개변수를 구성해야 합니다. 먼저 ECharts 라이브러리 파일을 소개해야 합니다. html 파일에서 다음 코드를 사용하여 ECharts를 도입할 수 있습니다.

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

그런 다음 JavaScript에서 다음 코드를 사용하여 ECharts 인스턴스를 생성하고 열 지도의 매개변수를 구성할 수 있습니다.

// 创建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);

코드에서, 먼저 echarts를 사용합니다. .init() 메서드는 ECharts 인스턴스를 생성하고 DOM 요소의 ID를 전달합니다. 다음으로 툴팁(프롬프트 상자)의 위치와 형식, 시각적 지도(시각적 지도)의 범위와 위치 등을 포함하여 히트맵의 매개변수를 구성했습니다. 마지막으로 구성 항목을 setOption() 메서드에 전달하여 열 지도를 표시합니다.

마지막으로 html 파일에서 다음 코드를 사용하여 히트맵을 표시할 컨테이너를 만들 수 있습니다.

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

코드에서는 ID가 "chart"인 div 요소를 만들고 너비와 높이를 설정합니다.

이제 EChart를 사용하여 데이터 밀도 분포를 표시하는 프로세스를 완료했습니다. 위의 코드 예제를 통해 ECharts를 사용하여 히트 맵을 생성하는 것이 매우 간단하며 다양한 요구 사항을 충족하도록 다양한 매개 변수를 구성할 수 있음을 알 수 있습니다. ECharts를 사용하여 데이터 밀도 분포를 표시할 때 이 기사가 도움이 되기를 바랍니다. 다른 질문이나 요구 사항이 있는 경우 더 자세한 소개와 샘플 코드가 포함된 ECharts 공식 문서(https://echarts.apache.org/)를 참조할 수 있습니다.

위 내용은 ECharts 히트 맵: 데이터 밀도 분포를 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!