百度地图结合echarts地图运历图

关于各省显示车辆发车数量

引入部分

<script src="~/Scripts/Echarts/Js/esl.js"></script>
<script src="~/Scripts/Echarts/Js/echarts.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=8GrVRotzGKj3xzIRu07hCzx2"></script>

html部分

<div class="panel panel-defult papanel-body-5" data-sortable-id="index-1"><div class="panel-heading"><div class="panel-heading-btn"><a href="javascript:;" data-click="panel-collapse"><i class="fa fa-angle-down fa-2x defult"></i></a></div><h4 class="panel-title">运力统计图</h4></div><div class="panel-body"><div id="main"></div></div></div>

main 元素用于显示地图。

js部分

 //加载运力图
// 路径配置
(function () {require.config({paths: {echarts: '../../Scripts/Echarts/Js'},packages: [{name: 'BMap',location: '../../Scripts/Echarts/Js/chart',main: 'main'}]});require(['echarts','BMap','echarts/chart/map'],function (echarts, BMapExtension) {var bMapExt = new BMapExtension(document.getElementById('main'), BMap, echarts, {enableMapClick: false});var map = bMapExt.getMap();var container = bMapExt.getEchartsContainer();var startPoint = {x: 104.114129,y: 37.550339};var point = new BMap.Point(startPoint.x, startPoint.y);map.centerAndZoom(point, 5);map.enableScrollWheelZoom(true);// 地图自定义样式AjaxToWebAPIGet({}, "TransportStatistics/TransportStatistics", function (data) {if (data.Success) {data = data.DataValue;//加载运力图loadTrasportCapacityChart(data, bMapExt, container);}                });});
})();

处理data数据

function loadTrasportCapacityChart(data, bMapExt, container)
{//所有发车城市的经纬度var geoCoord = {};//保存echarts lengendvar legendData = [];//保存echarts seriesvar seriesData = [];var legendSelected = {};var endCityAllArr = [];for (var i = 0; i < data.length; i++) {if (i > 0) {legendSelected[data[i].StartCity_Name] = false;}//发车城市以及经纬度(格式{'上海': [121.4648,31.2891]})var LatAndLngFache = [];LatAndLngFache.push(data[i].StartCity_BLngLat.split(',')[0]);LatAndLngFache.push(data[i].StartCity_BLngLat.split(',')[1]);geoCoord[data[i].StartCity_Name] = LatAndLngFache;//发车城市legendData.push(data[i].StartCity_Name);var objStartCity = {};var arr = [];objStartCity.name = data[i].StartCity_Name;var myarr = [];var endCityArr = [];for (var j = 0; j < data[i].DetailInfo_List.length; j++) {//到达城市以及经纬度(格式{'上海': [121.4648,31.2891]})var LatAndLngDaoda = [];LatAndLngDaoda.push(data[i].DetailInfo_List[j].EndCity_BLngLat.split(',')[0]);LatAndLngDaoda.push(data[i].DetailInfo_List[j].EndCity_BLngLat.split(',')[1]);geoCoord[data[i].DetailInfo_List[j].EndCity_Name] = LatAndLngDaoda;//存储格式（[[[{ name: '北京' }, { name: '上海', value: 95 }]],[{ name: '北京' }, { name: '上海', value: 95 }]]]）var objEndCity = {};objEndCity.name = data[i].DetailInfo_List[j].EndCity_Name;objEndCity.value = data[i].DetailInfo_List[j].count;var a = [];a.push(objStartCity);a.push(objEndCity);myarr.push(a);//存储格式[[{ name: '上海', value: 95 }，{ name: '上海', value: 95 }，{ name: '上海', value: 95 }]]endCityArr.push(objEndCity);}seriesData.push(myarr);endCityAllArr.push(endCityArr);}//获取显示的城市数量var cityAllCount = legendData.length;var serise = [];//将所有数据合并成一组然后后面再用for循环拆分，减少代码量for (var i = 0; i < cityAllCount; i++) {//这一步是因为第一个城市里面要存储geoCoordif (i == 0) {serise.push({name: legendData[0],type: 'map',mapType: 'none',data: [],geoCoord: geoCoord,markLine: {smooth: true,effect: {show: true,scaleSize: 1,period: 30,color: '#fff',shadowBlur: 10},itemStyle: {normal: {borderWidth: 1,lineStyle: {type: 'solid',shadowBlur: 10}}},data: seriesData[0]},markPoint: {symbol: 'emptyCircle',symbolSize: function (v) {return 10 + v / 10},effect: {show: true,shadowBlur: 0},itemStyle: {normal: {label: { show: false }}},data: endCityAllArr[0]}});}else {serise.push({name: legendData[i],type: 'map',mapType: 'none',data: [],markLine: {smooth: true,effect: {show: true,scaleSize: 1,period: 30,color: '#fff',shadowBlur: 10},itemStyle: {normal: {borderWidth: 1,lineStyle: {type: 'solid',shadowBlur: 10}}},data: seriesData[i]},markPoint: {symbol: 'emptyCircle',symbolSize: function (v) {return 10 + v / 10},effect: {show: true,shadowBlur: 0},itemStyle: {normal: {label: { show: false }}},data: endCityAllArr[i]}});}}option = {color: ['#ec9233', '#0cb9e2'],title: {subtext: '',x: 'center',textStyle: {color: '#fff'}},tooltip: {trigger: 'item'},legend: {orient: 'vertical',x: 'left',data: legendData,selectedMode: 'single',selected: legendSelected,textStyle: {color: '#999'}},dataRange: {min: 0,max: 100,calculable: true,color: ['#ff3333', 'orange', 'yellow', 'lime', 'aqua'],textStyle: {color: '#fff'}},series: serise};var myChart = bMapExt.initECharts(container);bMapExt.setOption(option);
}

获取到的data数据

[{"StartCity_Name":"上海市","StartCity_BLngLat":"121.48789948569473,31.24916171001514","Company_Oid":"610020","total":3,"DetailInfo_List":[{"EndCity_Name":"重庆市","EndCity_BLngLat":"106.53063501341296,29.54460610888615","count":9},{"EndCity_Name":"成都市","EndCity_BLngLat":"104.06792346330406,30.679942845419565","count":4},{"EndCity_Name":"武汉市","EndCity_BLngLat":"114.31620010268132,30.58108412692075","count":2}]},{"StartCity_Name":"重庆市","StartCity_BLngLat":"106.53063501341296,29.54460610888615","Company_Oid":"610020","total":2,"DetailInfo_List":[{"EndCity_Name":"上海市","EndCity_BLngLat":"121.48789948569473,31.24916171001514","count":5},{"EndCity_Name":"武汉市","EndCity_BLngLat":"114.31620010268132,30.58108412692075","count":1}]},{"StartCity_Name":"成都市","StartCity_BLngLat":"104.06792346330406,30.679942845419565","Company_Oid":"610020","total":1,"DetailInfo_List":[{"EndCity_Name":"上海市","EndCity_BLngLat":"121.48789948569473,31.24916171001514","count":3}]},{"StartCity_Name":"武汉市","StartCity_BLngLat":"114.31620010268132,30.58108412692075","Company_Oid":"610020","total":1,"DetailInfo_List":[{"EndCity_Name":"成都市","EndCity_BLngLat":"104.06792346330406,30.679942845419565","count":1}]}]

数据是我们商量好的，首先服务端会给我们多个发车城市的名称、经纬度，每个城市下一级又会包含发往不同地方的经纬度以及数量。

处理之后的数据

发车城市经纬度 geoCoord： {"上海市":["121.48789948569473","31.24916171001514"],"重庆市":["106.53063501341296","29.54460610888615"],"成都市":["104.06792346330406","30.679942845419565"],"武汉市":["114.31620010268132","30.58108412692075"]}
地图option lengend参数 legendData：["上海市", "重庆市", "成都市", "武汉市"]
地图option series参数 seriesData：[[[{"name":"上海市"},{"name":"重庆市","value":9}],[{"name":"上海市"},{"name":"成都市","value":4}],[{"name":"上海市"},{"name":"武汉市","value":2}]],[[{"name":"重庆市"},{"name":"上海市","value":5}],[{"name":"重庆市"},{"name":"武汉市","value":1}]],[[{"name":"成都市"},{"name":"上海市","value":3}]],[[{"name":"武汉市"},{"name":"成都市","value":1}]]]
目的地城市经纬度 endCityAllArr： [[{"name":"重庆市","value":9},{"name":"成都市","value":4},{"name":"武汉市","value":2}],[{"name":"上海市","value":5},{"name":"武汉市","value":1}],[{"name":"上海市","value":3}],[{"name":"成都市","value":1}]]
与服务端交互获取服务端给的数据存在data里，然后将data数据传递到loadTrasportCapacityChart。然后数据组织成http://echarts.baidu.com/echarts2/extension/BMap/doc/BMap.html 里面的样子
最后就显示成了我们想要的结果
函数可能写的比较长没做优化，主要是介绍流程O(∩_∩)O！

百度地图结合echarts地图运历图相关推荐

html海南地图插件,Echarts 地图（map）插件之鼠标HOVER和tooltip自定义数据
在项目开发中,有需要用到地图的地方,百度的echarts地图插件就是个不错的选择, 这里总结一下地图自定义鼠标HOVER时的事件和自定义tooltip数据: 一.鼠标HOVER时的事件: 参照官方文档 ...
最新中国省市区县geoJSON格式地图数据Echarts地图数据
最新全国省市区县geoJSON格式的地图数据,可直接用于echarts地图展示: https://github.com/lyhmyd1211/GeoMapData_CN 全国地图: china.jso ...
百度推出的echarts，制表折线图柱状图饼图等的超级工具(转)
一.简介: 1.绘制数据图表,有了它,想要网页上绘制个折线图.柱状图,从此easy. 2.使用这个百度的echarts.js插件,是通过把图片绘制在canvas上在显示在页面上. 官网对echarts ...
百度推出的echarts，制表折线图柱状图饼图等的超级工具
一.简介: 1.绘制数据图表,有了它,想要网页上绘制个折线图.柱状图,从此easy. 2.使用这个百度的echarts.js插件,是通过把图片绘制在canvas上在显示在页面上. 官网对echarts ...
echarts地图学习（使用geoJson数据绘制地图）
参考文档使用echarts完成中国省市区县镇地图展示 echarts地图(中国地图展示各省数据) echarts实现中国地图区域分布图 vue + echarts 利用echarts中的map地图中 ...
百度地图结合echarts实现飞线
百度地图结合echarts实现飞线目前很流行的地图轨迹飞线图,咱也来实现一个,使用百度地图和echarts图表实现,示例如下,(其实百度地图api有一个位置数据可视化MapV GL也可实现,需要的小 ...
echarts地图文字重叠解决方案_ECharts 和百度地图的叠加示例（下）
前言汇总了几个 ECharts 地图和百度地图在可视化展示时的综合示例. 主要是在 ECharts 地图和百度地图上叠加展示一些数字.图片.其它图表和轨迹动画. 另外因为每个示例的代码配置项比较繁琐 ...
echarts实现中国地图，山西地图，图表面积图配置项
文章目录 1.vue引入echars 2.建立echars基本框架 3.中国地图 4.山西地图为例,展示点击获取城市名称并保存在data中,方便使用 6.图表面积图(大小,线条颜色,面积颜色,百分比显 ...
在echarts中使用百度地图，卫星地图
在echarts中使用百度地图,卫星地图  <script src="https://cdnjs.cloudflare.com/ajax/ ...

百度地图结合echarts地图运历图

百度地图结合echarts地图运历图

引入部分

html部分

main 元素用于显示地图。

js部分

处理data数据

获取到的data数据

处理之后的数据

百度地图结合echarts地图运历图相关推荐

最新文章

热门文章