ECharts
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
ECharts提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于BI的漏斗图，仪表盘，并且支持图与图之间的混搭。
ECharts官网地址http://echarts.baidu.com/index.html。
SuperMap iClient for Leaflet 提供了对使用Echarts可视化效果图层的支持，接口为:
L.supermap.echartsLayer(option)
下面以北京公交路特效图为例，将公交路线的数据进行可视化的展示：
var map;
//加载数据，对数据进行处理
$.get('../data/lines-bus.json', function (data) {
var hStep = 300 / (data.length - 1);
var busLines = [].concat.apply([], data.map(function (busLine, idx) {
var prevPt;
var points = [];
for (var i = 0; i < busLine.length; i += 2) {
var pt = [busLine[i], busLine[i + 1]];
if (i > 0) {
pt = [
prevPt[0] + pt[0],
prevPt[1] + pt[1]
];
}
prevPt = pt;
points.push([pt[0] / 1e4, pt[1] / 1e4]);
}
return {
coords: points,
lineStyle: {
normal: {
color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))
}
}
};
}));
//指定图表的配置项和数据
//将数据可视化展示在地图中
L.supermap.echartsLayer(option).addTo(map);
});
指定图表的配置项和数据：
option = {
//系列列表
series: [
{
//图表类型
type: 'lines',
//使用的坐标系
coordinateSystem: 'leaflet',
//是否是多段线
polyline: true,
data: busLines,
//图标是否静态无法交互
silent: true,
//线条样式
lineStyle: {
normal: {
opacity: 0.2,
width: 1
}
},
//启用渐进式渲染的图形数量阈值
progressiveThreshold: 500,
//渐进式渲染时每一帧绘制图形数量
progressive: 200
},
{
type: 'lines',
coordinateSystem: 'leaflet',
polyline: true,
data: busLines,
lineStyle: {
normal: {
width: 0
}
},
//线特效的配置
effect: {
constantSpeed: 20,
show: true,
trailLength: 0.1,
symbolSize: 1.5
},
zlevel: 1
}]
};