百度Echarts热力图实例说明

最新推荐文章于 2024-06-06 11:39:14 发布

小酆年

最新推荐文章于 2024-06-06 11:39:14 发布

阅读量2.6k

点赞数 1

分类专栏：记录文章标签： js

本文链接：https://blog.csdn.net/weixin_43682825/article/details/103886432

版权

记录专栏收录该内容

30 篇文章 0 订阅

订阅专栏

https://www.echartsjs.com/examples/zh/editor.html?c=heatmap-bmap
原链接
下方直接贴代码
需要注意的是

bmap.js的引入（https://github.com/apache/incubator-echarts/blob/master/dist/extension/bmap.js）
var data =eval("(" + data + “)”);和结尾 json text的格式添加

其实原demo中的json格式我直接仿照了两个，后续替换真实数据
格式如下

var dataget="[[{'coord':[120.14322240845,30.236064370321],'elevation':221},
{'coord': [120.14322240845,30.236064370321],'elevation':21}]]";

 <body class="gray-bg">
     <div class="containerbox">
        <div class="wrapper animated fadeInRight">
       
    </div>
    <div id="chart" style="width:150%;height:150%;"></div>
</div>


<!-- 全局js -->
<script src="/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/js/echarts.min.js"></script>
 **<script src="/js/bmap.js"></script>**
<!-- layer javascript -->
<script src="/js/plugins/layer/layer.min.js"></script>
<!-- 自定义 -->
<script src="/js/public.js"></script>
<script type="text/javascript">

var BASE_URL = '${request.contextPath}';


  /****************************地图开始************************************/
var myChart = echarts.init(document.getElementById('chart'));

var app = {};
option = null;
app.title = '热力图与百度地图扩展';

$.get("/hangzhou-tracks.json", function (data) {
	console.log("testtest");
	var dataget="[[{'coord':[120.14322240845,30.236064370321],'elevation':221},{'coord':		   [120.14322240845,30.236064370321],'elevation':21}]]";
  	data=dataget;
	console.log(data);
    var  data =eval("(" + data + ")");
    console.log(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: 5,
                seriesIndex: 0,
                calculable: true,
                inRange: {
                    color: ['blue', 'blue', 'green', 'yellow', 'red']
                }
            },
            series: [{
                type: 'heatmap',
                coordinateSystem: 'bmap',
                data: points,
                pointSize: 5,
                blurSize: 6
            }]
        });
    if (!app.inNode) {
        //百度地图相关代码在此处编写
        console.log(myChart.getModel().getOption())
       var bmap =  myChart.getModel().getComponent('bmap').getBMap();
        bmap.addControl(new BMap.MapTypeControl());
    }
},"json",'text');
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
/*************************地图结束*****************************/

</script>
</body>

更换真实数据后一些tips
返回时是json格式_，获取其中内部属性：栗：data的属性
会发现无法获取，使用**eval("(" + data + “)”);**可获取
具体输出如下所示
在这里插入图片描述
之后需要把返回数据中需要的字段拼接成demo中格式的字符串
如下所示

        var dataget=data2.data;
	    var stringSUB="";
	    for(var i=0;i<dataget.length;i++){
	    	stringSUB=stringSUB+"{'coord':["+dataget[i].point.pointLongitude+","+dataget[i].point.pointLatitude+"],'elevation':"+dataget[i].dataNum+"},";
	    	
	    }
        stringSUB = stringSUB.substring(0, stringSUB.lastIndexOf(','));
        stringSUB="[["+stringSUB+"]]"
        data=stringSUB
	    console.log(data);
	    var  data =eval("(" + data + ")");

小酆年

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
百度Echarts热力图实例说明

https://www.echartsjs.com/examples/zh/editor.html?c=heatmap-bmap原链接下方直接贴代码需要注意的是bmap.js的引入（https://github.com/apache/incubator-echarts/blob/master/dist/extension/bmap.js）var data =eval("(" + da...
复制链接

扫一扫

专栏目录