series的运用（借官方示例学习一下）

series的运用（借官方示例学习一下）<script src="https://img.aigexing.comecharts.js"></script> <script src="https://img.aigexing.commap/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

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配置项手册）

<script src="https://img.aigexing.comecharts.js"></script> <script src="https://img.aigexing.commap/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' }] }); });

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