美文网首页echarts中国数据可视化
echarts3 map上视觉引导线

echarts3 map上视觉引导线

作者: hzhqk | 来源:发表于2017-09-18 16:22 被阅读52次

公司项目需要在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

相关文章

  • echarts3 map上视觉引导线

    公司项目需要在map上画视觉引导线标注对应区域信息。在echarts官网没有看到相关示例(也许。。没看到),但是后...

  • Echarts-百度地图省分着色

    通过Echarts3结合百度地图,对全国省分进行着色。 起因 由于Echarts3中,不再使用china.js文件...

  • 硬盘可视化工具:Disk Map for Mac

    Disk Map for Mac软件功能 视觉奇迹 Disk Map for Mac可快速扫描您的驱动器,以构建计...

  • OPPO拍摄日记:公路

    以栏杆为引导线向前引申,引导视觉延展,并向前延展 以建筑为主,太阳光为辅,烘托全局,拍出暖系效果。

  • NDK---C++篇(五)C++容器与谓词

    直奔主题。。。。。。 1、vector向量(类似于map) 说明: **#include 引...

  • 2018-12-31

    三.图案构成: 1.图形的构成要素:点,线,面 2.视觉点(聚焦点)、引导线、背景衬托 3.图案构成的...

  • 地面波导线,不多不少,刚好11.14

    波导线其实就是一种点缀,一般小户型不建议去做,会分割区域,视觉上户型更小。但并不是大户型就一定能做,需要设计和规划...

  • 电路识读16-克莱斯勒车系汽车电路识读

    1.克莱斯勒车系汽车电路图特点 (1)导线部分 导线部分在电路图中以粗实线画出。每条导线都有导线的颜色、导线的规格...

  • 导线

    无奈思念飘来飘去 失落感伤还来还去 每天的空气都唤不来 每一个被生活窒息的人 无奈的岁月悠长悠长 故事在涂改 涂改...

  • 2018-10-19

    1: 印刷导线宽度选择依据:印刷导线的最小宽度与流过导线的电流大小有关: 线宽太小,刚印刷导线电阻大,线上的电压降...

网友评论

    本文标题:echarts3 map上视觉引导线

    本文链接:https://www.haomeiwen.com/subject/yjebsxtx.html