echart车流量数据可视化

数据：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中的数据转化为echart可读取的格式let [flong, flat, tlong, tlat] = [data[i][0], data[i][1], data[i][2], data[i][3]]let points = [[flong, flat],[tlong, tlat]]let result = {coords: points,lineStyle: {normal: {color: getColor(data[i][4]),}}}carlines.push(result)}// 获取对应权重的颜色function getColor(weight) {if (weight >15) {// 15以上：红色return "rgba(255, 0, 0, 1)"} else if (weight > 10) {// 11-15：浅紫色return "rgba(255, 187, 255, 1)"} else if (weight > 5) {// 6-10：绿色return "rgba(0, 255, 0, 0.8)"} else if (weight >= 1) {// 1-5：蓝色return "rgba(127, 255, 212, 0.3)"}}console.log(carlines);//构建serieslet series = [{type: 'lines',coordinateSystem: 'bmap',polyline: true,data: carlines,lineStyle: {normal: {width: 0,curveness: 0.5}},effect: {// 动点速度constantSpeed: 30,show: true,// 拖尾效果长度trailLength: 0.6,// 动点标识大小symbolSize: 2,// 线条颜色在data中指定// color: '#c23531'},zlevel: 1}]let option = {bmap: {// 页面初始化时中心区域点center: [121.485372,31.236055],// 页面初始化时缩放程度zoom: 10,roam: true,// 百度地图自定义样式mapStyle: {'styleJson': [{'featureType': 'water','elementType': 'all','stylers': {'color': '#031628'}},{'featureType': 'land','elementType': 'geometry','stylers': {'color': '#000102'}},{'featureType': 'highway','elementType': 'all','stylers': {'visibility': 'off'}},{'featureType': 'arterial','elementType': 'geometry.fill','stylers': {'color': '#000000'}},{'featureType': 'arterial','elementType': 'geometry.stroke','stylers': {'color': '#0b3d51'}},{'featureType': 'local','elementType': 'geometry','stylers': {'color': '#000000'}},{'featureType': 'railway','elementType': 'geometry.fill','stylers': {'color': '#000000'}},{'featureType': 'railway','elementType': 'geometry.stroke','stylers': {'color': '#08304b'}},{'featureType': 'subway','elementType': 'geometry','stylers': {'lightness': -70}},{'featureType': 'building','elementType': 'geometry.fill','stylers': {'color': '#000000'}},{'featureType': 'all','elementType': 'labels.text.fill','stylers': {'color': '#857f7f'}},{'featureType': 'all','elementType': 'labels.text.stroke','stylers': {'color': '#000000'}},{'featureType': 'building','elementType': 'geometry','stylers': {'color': '#022338'}},{'featureType': 'green','elementType': 'geometry','stylers': {'color': '#062032'}},{'featureType': 'boundary','elementType': 'all','stylers': {'color': '#465b6c'}},{'featureType': 'manmade','elementType': 'all','stylers': {'color': '#022338'}},{'featureType': 'label','elementType': 'all','stylers': {'visibility': 'off'}}]}},series: series}myChart.setOption(option)})</script>
</body>
</html>

结果图如下：

echart车流量数据可视化相关推荐

百度数据可视化图表套件echart实战
最近我一直在做数据可视化的前端工作,我用的最多的绘图工具是d3.d3有点像photoshop,功能很强大,例子也很多,但是学习成本也不低,做项目是需要较大人力投入的.3月底由在亚马逊工作的同学介绍下使 ...
数据可视化的实现技术和工具比较(HTML5 canvas(Echart)、SVG、webGL等等)
http://www.cnblogs.com/zhangdi/p/3690284.html?utm_source=tuicool&utm_medium=referral 最近一直在研究数据可视 ...
Echart实现的数据可视化统计人口流动效果（功能：饼状图、条形图、叠加条形图、流入流出动态图）
博客目录 Echart实现的可视化统计人口流动效果实现功能截图系统功能技术点总结代码写在最后 Echart实现的可视化统计人口流动效果最近使用echart实现了人口统计的可视化效果,常用的 ...
html图表插件,数据可视化--js图表插件EChart
ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻 ...
echart 数据视图_关于数据可视化图表的制作，你需要关注的30个小技巧
优秀的数据可视化图表只是罗列.总结数据吗?当然不是!数据可视化其真正的价值是设计出可以被读者轻松理解的数据展示,因此在设计过程中,每一个选择,最终都应落脚于读者的体验,而非图表制作者个人. 今天就给大 ...
echart雷达图文字挤在一起_【数据可视化·图表篇】雷达图
数据可视化基础图表系列的最后一篇终于跟大家见面了!今天小数将带大家走进雷达图. (之前关于柱状图.折线图.饼图和散点图的分享文章,感兴趣的小伙伴可以查看历史文章哦) 为方便大家理解,本文生成图表所使用 ...
echart雷达图数据图形的填充颜色_数据可视化，职场数据分析都需要哪些常用的图表？...
数据可视化是为了使得数据更高效的反应数据情况,便于让读者更高效阅读,而不单是自己使用,通过数据可视化突出数据背后的规律,以此突出数据中的重要因素,并且,数据可视化可以将数据变得更加直观. 使用图表数据 ...
手绘风格的数据可视化 Sketchify，让你的图表也萌萌哒
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 作者 | naughty 来源 | oschina.ne ...
python与excel做数据可视化-python做可视化数据分析，究竟怎么样？
Python做可视化数据分析也是可以的,只是对比起来专业的可视化工具有些得不应手,做出来的图可能不太美观.Python用来处理数据,用来分析绝对可以.我觉得想要可视化可以使用专门的可视化工具. 不过, ...

echart车流量数据可视化

echart车流量数据可视化相关推荐

最新文章

热门文章