借官方示例学习一下 series[i]-lines 用法

ZXand618

发布于 2022-04-10 09:55:52

3450

发布于 2022-04-10 09:55:52

文章被收录于专栏：ZXand618的ECharts之旅ZXand618的ECharts之旅

series[i]-lines 主要用于迁徙图，实现航线、路线的可视化，在这借 ECharts 官方迁徙示例学习一下其使用

原始数据

var geoCoordMap = {
    '上海': [121.4648,31.2891],
    '东莞': [113.8953,22.901],
    '东营': [118.7073,37.5513]
    ...
};

var BJData = [
    [{name:'北京'}, {name:'上海',value:95}],
    [{name:'北京'}, {name:'广州',value:90}]
    ...
];

var SHData = [
    [{name:'上海'},{name:'包头',value:95}],
    [{name:'上海'},{name:'昆明',value:90}]
    ...
];

var GZData = [
    [{name:'广州'},{name:'福州',value:95}],
    [{name:'广州'},{name:'太原',value:90}]
    ...
];

这一段代码定义了迁徙图要使用的原始数据（...表省略，要不太长了）：

geoCoorMap 提供各城市经纬度坐标，地图上标点、标线都需要通过坐标进行。
BJData、SHData、GZData 是城市间连线的原始数据。

数据转换

var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        
        //通过地区名获取起点坐标
        var fromCoord = geoCoordMap[dataItem[0].name];
        
        //通过地区名获取终点坐标        
        var toCoord = geoCoordMap[dataItem[1].name];
        
        if (fromCoord && toCoord) {
            res.push({
                fromName: dataItem[0].name,
                toName: dataItem[1].name,
                coords: [fromCoord, toCoord]
            });
        }
    }
    return res;
};

这一段定义了数据格式转换的函数，可以把原始数据转换为 series[i]-lines 适用的数据格式：

 [[{name:'北京'}, {name:'上海',value:95}],
    [{name:'北京'}, {name:'广州',value:90}]
     ...
 ]

结合

['上海': [121.4648, 31.2891],
    '东莞': [113.8953, 22.901],
    '东营': [118.7073, 37.5513],
    '中山': [113.4229, 22.478]
    ...
]

转换为

[{
        'fromName': '北京',
        'toName': '拉萨',
        'coords': [
            [116.4551, 40.2539],
            [91.1865, 30.1465]
        ]
    },
    {
        'fromName': '北京',
        'toName': '南宁',
        'coords': [
            [116.4551, 40.2539],
            [108.479, 23.1152]
        ]
    }
    ...
]

生成 series 配置

var color = ['#a6c84c', '#ffa022', '#46bee9'];

准备一个配色的列表，在后面生成 series 时用于图形颜色的自定义

var series = [];

准备一个空列表，用于存放后续生成的 series 配置

[['北京', BJData],['上海', SHData],['广州', GZData]].forEach(function (item, i) {
    series.push({
        name: item[0] + ' Top10',
        type: 'lines',
        
        //zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。
        zlevel: 1,
        effect: {
            show: true,
            
            //特效动画的时间（飞机从起点到终点需要多少秒）
            //constantSpeed不为 0 时，period 会被忽略
            period: 6,  
            
            //特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长。
            trailLength: 0.7,
            
            //特效标记的颜色
            color: '#fff',
            
            //symbol 缺省值 'circle' 圆形
            
            //特效标记的大小
            symbolSize: 3
        },
        lineStyle: {
            normal: {
                color: color[i],
                width: 0,
                curveness: 0.2
            }
        },
        //使用定义好的数据格式转换函数生成lines的数据
        data: convertData(item[1])
    },
    {
        name: item[0] + ' Top10',
        type: 'lines',
        zlevel: 2,
        symbol: ['none', 'arrow'],
        symbolSize: 10,
        effect: {
            show: true,
            period: 6,
            trailLength: 0,
            symbol: planePath,
            symbolSize: 15
        },
        lineStyle: {
            normal: {
                color: color[i],
                width: 1,
                opacity: 0.6,
                curveness: 0.2
            }
        },
        data: convertData(item[1])
    },
    {
        name: item[0] + ' Top10',
        type: 'effectScatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: {
            brushType: 'stroke'
        },
        label: {
            normal: {
                show: true,
                position: 'right',
                formatter: '{b}'
            }
        },
        symbolSize: function (val) {
            return val[2] / 8;
        },
        itemStyle: {
            normal: {
                color: color[i]
            }
        },
        //生成散点图数据
        data: item[1].map(function (dataItem) {
            return {
                name: dataItem[1].name,
                value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
            };
        })
    });
});

针对 BJData、SHData、GZData 每一个数据，各生成3个 series：

【series[i]-lines】通过设置较大的 effect.trailLength（特效尾迹），实现飞机飞过的尾迹；
【series[i]-lines】通过自定义 effect.symbol（特效图形的标记/形状），实现飞机的形状；
【series[i]-effectScatter】通过带涟漪特效动画的散点图，标出lines终点

定义配置项 option

option = {
    backgroundColor: '#404a59',
    title : {
        text: '借官方示例学习一下series[i]-lines用法',
        subtext: '数据纯属虚构',
        left: 'center',
        textStyle : {
            color: '#fff'
        }
    },
    tooltip : {
        //提示框由数据图形触发
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        top: 'bottom',
        left: 'right',
        data:['北京 Top10', '上海 Top10', '广州 Top10'],
        textStyle: {
            color: '#fff'
        },
        selectedMode: 'single'
    },
    geo: {
        map: 'china',
        label: {
            emphasis: {
                show: false
            }
        },
        
        //开启鼠标控制的缩放和平移
        roam: true,  
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#404a59'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    //将之前生成好的series配置项引入
    series: series
};

geo 引入地理坐标系组件，需要引入 geoJSON 地图(备注)
series 通过 series 变量引入此前生成好的 series 配置

因为是在 echarts 的 gallery 里练习的，只需要定义好 option 变量就能出图，如果是在自己的网页里，别忘了这两个步骤（myChart 这个变量名可根据自己需要命名，option 也是）：

echarts实例初始化

var myChart = echarts.init(document.getElementById('main'));

显示图表

myChart.setOption(option);

【备注】如何引入 geoJSON 地图？

JavaScript 引入示例（摘自ECharts配置项手册）

<script src="echarts.js"></script>
<script src="map/js/china.js"></script>
<script>
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
    series: [{
        type: 'map',
        map: 'china'
    }]
});
</script>

JSON 引入示例（摘自ECharts配置项手册）

$.get('map/json/china.json', function (chinaJson) {
    echarts.registerMap('china', chinaJson);
    var chart = echarts.init(document.getElementById('main'));
    chart.setOption({
        series: [{
            type: 'map',
            map: 'china'
        }]
    });
});

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2019-05-15，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

json

本文分享自 ZXand618的ECharts之旅微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

编程算法

json

登录后参与评论

0 条评论

热度

借官方示例学习一下 series[i]-lines 用法

借官方示例学习一下 series[i]-lines 用法

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐