echarts中国数据可视化

echarts3 map上视觉引导线

2017-09-18  本文已影响52人  hzhqk

公司项目需要在map上画视觉引导线标注对应区域信息。在echarts官网没有看到相关示例(也许。。没看到),但是后来看api有看到 series里type = lines,具体看到是可以在map里画线的。用他们模拟飞机航线的例子做基础写了一个例子供大家参考。
不多BB,按惯例贴出关键代码;


            var convertLineData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var dataItem = data[i];
                    var coordS = dataItem.lineS; //线起点
                    var coordM = dataItem.lineM; //线中间点
                    var coordE = dataItem.lineE; //线尾点
                    if (coordS && coordM && coordE) {
                        res.push({
                            coords: [coordS, coordM, coordE]
                        });
                    }
                }
                return res;
            };
          var convertValData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var dataItem = data[i];
                    res.push({
                        name: dataItem.areaName,
                        value: dataItem.lineE.concat(dataItem.value)
                    });
                }
                return res;
            };
            var json = {
                data: [{
                    areaName: '北京',
                    value: 94,
                    lineS: [116.4551, 40.2539],
                    lineM: [125.541, 40.4242],
                    lineE: [135.4648, 43.2891]
                },{
                    areaName: '上海',
                    value: 90,
                    lineS: [121.4648,31.2891],
                    lineM: [125.4648,31.2891],
                    lineE: [127.4648,36.2891]
                }]
            };
            var data = json.data;
            var series = [];
            series.push(
                {
                    name: '',
                    type: 'lines',
                    zlevel: 2,
                    symbol: 'none',
                    silent: true, //不响应鼠标点击或事件
                    effect: {
                        show: false //关闭特效
                    },
                    tooltip: {
                        show: false
                    },
                    polyline: true, //支持多点连线
                    lineStyle: {
                        normal: {
                            color: 'white',
                            width: 1.5,
                            opacity: 0.9,
                            curveness: 0
                        }
                    },
                    data: convertLineData(data)
                },
                {
                    name: '',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    zlevel: 2,
                    hoverAnimation: false, //hover时不高亮点
                    cursor: 'default', //鼠标设置为箭头
                    itemStyle: {
                        normal: {
                            color: 'orange'
                        }
                    },
                    tooltip: {
                        show: false
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            fontSize: 25,
                            fontWeight: 'bold',
                            color: '#f5a623',
                            formatter: function (param) {
                                return param.value[2];
                            }
                        }
                    },
                    data: convertValData(data)/*[{
                        name: '94', value: [135.4648, 43.2891, 95],

                    }]*/
                }
            );

老样子给出效果图:

map-line.png

完整源码见: https://github.com/hzhqk/echarts/tree/master/map-line

上一篇下一篇

猜你喜欢

热点阅读