지도 히트맵을 사용하여 ECharts에 도시 열을 표시하는 방법-JS 튜토리얼-php.cn

지도 히트맵을 사용하여 ECharts에 도시 열을 표시하는 방법

WBOY

풀어 주다： 2023-12-18 16:00:38

원래의

1278명이 탐색했습니다.

지도 히트맵을 사용하여 ECharts에 도시 열을 표시하는 방법

지도 열 지도를 사용하여 ECharts에 도시 열을 표시하는 방법

ECharts는 지도 열 지도를 포함하여 개발자가 사용할 수 있는 다양한 차트 유형을 제공하는 강력한 시각적 차트 라이브러리입니다. 지도 열지도는 도시나 지역의 인기도를 표시하는 데 사용할 수 있으므로 다양한 장소의 인기도나 밀도를 빠르게 이해하는 데 도움이 됩니다. 이 기사에서는 ECharts에서 지도 열 지도를 사용하여 도시 열을 표시하는 방법을 소개하고 참조용 코드 예제를 제공합니다.

먼저 지리 정보가 포함된 지도 파일이 필요합니다. ECharts는 다양한 지도 파일을 공식적으로 제공하므로 필요에 따라 적절한 지도 파일을 선택할 수 있습니다. 중국 지도를 예로 들면, 중국 지도의 JSON 파일은 ECharts 공식 홈페이지(https://echarts.apache.org/zh/download-map.html)에서 확인할 수 있습니다. 파일을 다운로드하여 프로젝트의 적절한 위치에 배치하세요.

다음으로 표시 데이터를 준비해야 합니다. 중국의 다양한 도시의 인기를 표시하고 싶다고 가정하면 도시 이름과 인기 값이 포함된 데이터 컬렉션을 사용할 수 있습니다. 예를 들어 JSON 배열을 사용하여 이 데이터를 저장할 수 있으며 각 배열 요소에는 아래와 같이 도시 이름과 해당 열 값이 포함됩니다.

var data = [
    {name: '北京', value: 100},
    {name: '上海', value: 90},
    {name: '广州', value: 80},
    // 其他城市数据...
];

로그인 후 복사

그런 다음 지도 열 지도가 포함된 ECharts 인스턴스를 만들고 추가해야 합니다. 지도 파일과 관련된 데이터입니다. 다음은 지도 히트맵을 생성하기 위한 샘플 코드입니다.

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

// 配置地图热力图
var option = {
    // 使用中国地图
    map: 'china',
    // 设置地图的放大与缩小的按钮不可见
    roam: false,
    // 配置地图热力图的数据
    series: [{
        type: 'heatmap',
        coordinateSystem: 'geo',
        data: data
    }]
};

// 关联数据与地图文件
myChart.setOption(option);

로그인 후 복사

위의 샘플 코드에서는 먼저 ECharts 인스턴스를 생성하고 해당 인스턴스가 있는 컨테이너를 지정합니다. 그런 다음 지도 히트맵의 관련 매개변수를 구성했습니다. 그 중 map指定了使用的地图文件，roam设置了地图缩放按钮的可见性，series指定了热力图的数据和所使用的坐标系。最后，我们通过setOption 메소드는 데이터를 지도 파일과 연결합니다.

이 지도 히트맵을 표시하는 HTML 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>地图热力图示例</title>
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="mapContainer" style="width: 800px; height: 600px;"></div>
    <script>
        // 上述代码
    </script>
</body>
</html>

로그인 후 복사

위 HTML 코드에서는 ECharts의 JavaScript 파일을 도입하고 지도 히트맵이 포함된 컨테이너를 만들었습니다. 컨테이너의 너비와 높이를 설정하여 맵 히트맵의 크기를 조정할 수 있습니다.

위 단계를 통해 지도 열 지도를 사용하여 ECharts에 도시 열을 표시할 수 있습니다. 실제 필요에 따라 도시 열량에 따라 지도 열 지도의 색상 심도를 조정하여 도시 열의 차이를 표시할 수 있습니다. 또한 ECharts는 구성 매개변수를 조정하여 보다 개인화된 지도 열 지도 효과를 얻을 수 있는 풍부한 구성 옵션도 제공합니다.

요약하자면, ECharts의 지도 히트맵을 사용하여 도시의 열기를 표시하는 것은 간단하고 효과적인 방법입니다. ECharts의 구성 옵션과 결합된 지도 파일 및 데이터를 적절하게 준비함으로써 다양한 지도 열 지도를 쉽게 생성하고 도시의 열을 명확하게 표시할 수 있습니다. 이 기사에 제공된 샘플 코드가 도움이 되기를 바라며 ECharts에서 맵 히트맵을 사용하는 개발 프로세스의 속도를 높이길 바랍니다.

위 내용은 지도 히트맵을 사용하여 ECharts에 도시 열을 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!