echarts绘制地图及连线

最近用echarts画了很多图，写出来或许能帮助到大家

下图是最基本的一个地图加连线

本篇文章只写这个简单的，后续还有热力图，时间轴等

 

这里我只解析部分关键代码，完整代码见https://github.com/bolanlaike/echarts-map

这段代码主要是获取数据以及数据的组装

 require([
                'echarts',
            ], function (echarts) {

                // 这里有一个get请求来获取json数据，所以需要开一个http服务
                $.get('../map/json/china.json', function (chinaJson) {
               
                    echarts.registerMap('china', chinaJson);
                    var myChart = echarts.init(document.getElementById('main'));
                    $.get('../map/json/result8.json', function (data) {
                    var hStep = 300 / (data.length - 1);
                    var obj = eval(data);// 解析json数据
                    var busLines=[];
                       for(var i=0;i<obj.length;i++){
                        var points = [];
                            for(var j=0;j<obj[i].Mnst.length;j++){
                                // 这里有一个坑我必须说明一下 我的数据result8.json里经纬度反了，所以这里取值的时候先取的value[1],再取的value[0]
                                points.push([obj[i].Mnst[j].value[1], obj[i].Mnst[j].value[0]]);
                            }
                            // 这里在组装连线的数据，下面将用到
                        busLines.push({
                            coords: points,// 坐标这个数据是必须给的
                            name:obj[i].name,// 类似name还可以根据自己的需求给更多的数据
                            lineStyle: { //给每条线都不同的样式
                                normal: {
                                    color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * i))
                                }
                            }
                        });
                    };
                console.log(busLines); // 打开浏览器控制台可以看到的输出的buslines，用于测试

这一段代码组装series,series是echars绘图里主要的部分之一，series是一个数组，里面你绘制的每个类型的图就是一个元素，如图中我绘制了两个lines类型的图，你还可以绘制heatmap,scatter,effectScatter等

 var series = [];
                    // 这里的series也是echarts绘图很关键的一部分，下面将用到
                    // series是一个数组，你要画几种图series就有几个元素
                        series.push(
                            {// 这个就是普通连线
                            type: 'lines',
                            coordinateSystem: 'geo',// 这句的意思是连线是基于地理坐标的,geo组件将在下面给出
                            polyline: true,// 这表示连线是否为多端点的连线
                            data: busLines,// 这里就是连线的数据了 上面组装的数据就在这里使用
                            lineStyle: {
                                normal: {
                                    opacity: 1,
                                    width: 2
                                }
                            },
                            progressiveThreshold: 500,
                            progressive: 200
                        }, {
                            type: 'lines',// 这里还有一个连线其实是做的在线上的一个流动效果，运行代码注意观察你就会看到
                            coordinateSystem: 'geo',
                            polyline: true,
                            data: busLines,
                            lineStyle: {
                                normal: {
                                    width: 0
                                }
                            },
                            effect: {
                                constantSpeed: 20,
                                show: true,
                                trailLength: 0.1,
                                symbolSize: 1.5
                            },
                            zlevel: 1
                        });
                    

 setoption是echarts绘图里最重要的部分了，即绘制图表

  // setoption就是这里面最主要的东西了，上面的准备都是为了这里
                    myChart.setOption({
                        backgroundColor: '#404a59',// 这些设置去官网看手册就知道了
                        animation: false,
                        title: {
                            text: '高铁网络',
                            subtext: 'data from ',
                            sublink: '',
                            left: 'center',
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        tooltip : {
                            trigger: 'item',
                            formatter:function(params, ticket, callback){
                               if(params.seriesType=="lines")
                                    return params.data.name;
                            }
                        },
                        geo: {  // geo组件
                            map: 'china',
                            label: {
                                normal: {
                                    show: true,
                                    formatter: '{a}',
                                    // position: 'inside',
                                    backgroundColor: '#fff',
                                    padding: [3, 5],
                                    borderRadius: 3,
                                    borderWidth: 1,
                                    borderColor: 'rgba(0,0,0,0.5)',
                                    color: '#777'
                                },
                                emphasis: {
                                    areaColor: '#2a333d'
                                }
                            },
                            selectedMode: 'single',
                            roam: true,
                            itemStyle: {
                                normal: {
                                    areaColor: '#323c48',
                                    borderColor: '#404a59'
                                },
                                emphasis: {
                                    areaColor: '#2a333d'
                                }
                            }
                        },
                        series: series// 上面的组装的series在这里使用
                    });

 

大概就是这样，完整代码、数据及使用说明见我的github，后续还会写timeline组件的使用