Vue3+Echart+百度地图显示热力图

最新推荐文章于 2025-01-17 14:34:49 发布

原创最新推荐文章于 2025-01-17 14:34:49 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#百度 #javascript #webview #echarts #vue.js

本文介绍如何使用Vue结合ECharts和百度地图API创建一个动态热力图应用。该应用加载了杭州轨迹数据，并通过热力图展示出来。具体实现包括初始化图表、获取JSON数据、设置地图中心点和缩放级别等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

index.html加入

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=<你的AK>"></script>

.Vue文件引入echart bmap

<template>
<div :ref="refs.elChart" style="width: 100%;height: 800px;background-color:#ececec"></div>
</template>

import * as echarts from 'echarts';
import 'echarts/extension/bmap/bmap.js';

setup(props, context) {
        const control = reactive({});
        const refs = reactive({
            elChart: (el) => {
                control.elChart = el;
            },
        });
        var map;
        var option;
     
        var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';


        onMounted(() => {
            var myChart = echarts.init(control.elChart);

            axios({
                method: 'GET',
                url: ROOT_PATH + '/data/asset/data/hangzhou-tracks.json',
            }).then(function (response) {
                let data = response.data;
                var points = [].concat.apply(
                    [],
                    data.map(function (track) {
                        return track.map(function (seg) {
                            return seg.coord.concat([1]);
                        });
                    })
                );
                
                myChart.setOption(
                    (option = {
                        animation: false,
                        bmap: {
                            center: [120.13066322374, 30.240018034923],
                            zoom: 14,
                            roam: true,
                        },
                        visualMap: {
                            show: false,
                            top: 'top',
                            min: 0,
                            max: 50,
                            seriesIndex: 0,
                            calculable: true,
                            inRange: {
                                color: [
                                    'blue',
                                    'blue',
                                    'green',
                                    'yellow',
                                    'red',
                                ],
                            },
                        },
                        series: [
                            {
                                type: 'heatmap',
                                coordinateSystem: 'bmap',
                                data: points,
                                pointSize: 5,
                                blurSize: 6,
                            },
                        ],
                    })
                );
                var bmap = myChart.getModel().getComponent('bmap').getBMap();
                bmap.addControl(new BMap.MapTypeControl());
            });
        });
        return {
            refs,
        };
    },