echart车流量数据可视化

最新推荐文章于 2024-04-12 09:50:08 发布

在养一只虎纹�

最新推荐文章于 2024-04-12 09:50:08 发布

阅读量2.7k

点赞数

分类专栏： JavaScript 文章标签：可视化 javascript

本文链接：https://blog.csdn.net/yutingwu816/article/details/106545520

版权

该博客介绍了一个使用ECharts进行车流量数据可视化的案例。内容包括3000条模拟轨迹数据，每条数据包含起始和结束点的经纬度坐标以及权重。根据权重，轨迹被赋予不同颜色进行展示。提供的HTML代码示例展示了如何在本地实现这一功能，数据以OD.JSON格式存储并与HTML在同一文件夹内。

摘要由CSDN通过智能技术生成

数据：3000条轨迹（模拟），首尾点经纬度坐标，每条轨迹的权重。权重可简单理解为同首尾点轨迹重复的次数。数据格式为：
[起始点经度，起始点纬度，末尾点经度，末尾点纬度，权重]
在这里插入图片描述
需求：可视化每条航线，并根据不同的权重给予不同的颜色。只需在本地做简单的展示就可以。
以下为全部的HTML代码（注意百度地图开发者AK密码需要替换为自己的），读取的OD.JSON数据放在同一文件夹下即可：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上海迁徙图</title>
     <!-- 引入jquery文件 -->
     <script src="node_modules/jquery/dist/jquery.min.js"></script>
     <!-- 引入echart -->
     <script src="echarts.min.js"></script>
     <!-- 引入百度地图 -->
     <script src="node_modules/echarts/dist/extension/bmap.js"></script>
     <!-- 引入百度地图开发AK密码(需替换为自己的)-->
     <script src="http://api.map.baidu.com/api?v=2.0&ak=百度地图开发个人AK密码"></script>
</head>
<body>
    <div id="main" style="width: 100%; height: 700px;"></div>
    <script>
    // 初始化echart对象
    var myChart = echarts.init(document.getElementById('main'));
    $.get("OD.json", function(data) {
   
        console.log(data);
        // 循环每条OD线，根据权重大小选择不同的颜色
        // 存放每条OD线
        let carlines = []
        for (let i=0; i< data.length; i++) {
   
            // 将json中的数