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
    }]
};

查看完整示例代码

results matching ""

    No results matching ""