echarts示例_借官方示例学习一下 series「i」-lines 用法

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：

1. 【series[i]-lines】通过设置较大的 effect.trailLength(特效尾迹)，实现飞机飞过的尾迹；
2. 【series[i]-lines】通过自定义 effect.symbol(特效图形的标记/形状)，实现飞机的形状；
3. 【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配置项手册)

• 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' }] });});

备注：此文首发于自己的公众号「ECharts学习」