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

百度地图结合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 lengend
    var legendData = [];
    //保存echarts series
    var 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++) {
        //这一步是因为第一个城市里面要存储geoCoord
        if (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}]}]

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

处理之后的数据

1. 发车城市经纬度 geoCoord： {"上海市":["121.48789948569473","31.24916171001514"],"重庆市":["106.53063501341296","29.54460610888615"],"成都市":["104.06792346330406","30.679942845419565"],"武汉市":["114.31620010268132","30.58108412692075"]}
2. 地图option lengend参数 legendData：["上海市", "重庆市", "成都市", "武汉市"]
3. 地图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}]]]

4. 目的地城市经纬度 endCityAllArr： [[{"name":"重庆市","value":9},{"name":"成都市","value":4},{"name":"武汉市","value":2}],[{"name":"上海市","value":5},{"name":"武汉市","value":1}],[{"name":"上海市","value":3}],[{"name":"成都市","value":1}]]

5. 与服务端交互获取服务端给的数据存在data里，然后将data数据传递到loadTrasportCapacityChart。然后数据组织成http://echarts.baidu.com/echarts2/extension/BMap/doc/BMap.html 里面的样子

6. 最后就显示成了我们想要的结果
7. 函数可能写的比较长没做优化，主要是介绍流程O(∩_∩)O！