图表库调研

[gaofant101]

echarts

老牌可视化库,支持PC和移动端.(更详细的内容可以去官方文档查看)

官方文档

gallery - 社区 (各种图表示例)

ZRender - echarts底层渲染器

用法 - 快速玩转 echarts

echarts 全局对象

• init 创建实例(图表层)

  var myChart = echarts.init(document.getElementById('main')); // 创建实例

• registerMap 注册地图,使用地图功能时用到

  echarts.registerMap('china', usaJson) // 注册地图

echartsInstance 实例对象,图表的配置及优化;

筛选常用的方法

• setOption 给实例添加配置项

  myChart.setOption(option); // 注入配置项生成图表

• on 给图表绑定事件

  myChart.on('click', 'series', callback()) // 绑定事件

• off 给图表解除绑定事件

  myChart.off('click', 'series', callback()) // 解绑事件

• showLoading 显示loading动画

  myChart.showLoading()

• hideLoading 隐藏loading动画

  myChart.hideLoading()

• getDataURL 返回图表url(base64)生成图片用

  myChart.off('click', 'series', callback()) // 解绑事件

• clear 清空当前实例(优化)

  myChart.clear() // 清空实例

• dispose 销毁实例(优化)

  myChart.dispose() // 销毁实例

action 交互

图表内交互性动作增强, 比如 tips提示、图表的区域选择、图表的 timeline

events 事件

监听图表的事件行为, 类似 window.addEventListener

setOption 是关键

• grid 图表在画布中的布局样式
• xAxis 画布中X轴的描述
• yAxis 画布中Y轴的描述
• dataZoom 长用于图表中的时间轴、数据轴
• visualMap 映射组件, 长用于地图上多层数据叠加使用
• tooltip 提示语
• axisPointer 鼠标在图表节点上显示对应数据
• toolbox 组件自带的工具栏
• brush 图表中选择区域块
• timeline 时间轴
• series 图表描述(划重点)
• animation 动画系列配置

这里抽取6个类型图列, 从红线部分可以看出有很多共性, 都是通过 series 来描述 echarts 实例图. 不同类型的图通过 series.type 来设定, 图表的数据是通过 series.data来设定.只要熟悉 series 的用法我们就玩转 echarts 所有的图例.

复杂地图示例

示例图中有4中效果, 都是基于 series的描述叠加完成.

• 地图
• 基于数据对省市做颜色区分
• 红点
• 飞线

var option = {
    grid: { // 定位
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
    },
    visualMap: { // 地图映射
        show: false,
        min: 0,
        max: 100,
        seriesIndex: [1],
        inRange: {
            color: ['#064285', '#1d9cf2'],

        }
    },
    geo: { // 地理坐标系
        show: true,
        map: mapName,
        label: {
            normal: {
                show: false
            },
            emphasis: {
                show: false,
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#0d5598',
                borderColor: '#062a5a',
            },
            emphasis: {
                areaColor: '#0d5598',
            }
        }
    },
    series: [
        // 一层地图
        {
            type: 'map',
            map: mapName,
            geoIndex: 0,
            aspectScale: 0.75,
            showLegendSymbol: false,
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false,
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            roam: true,
            itemStyle: {
                normal: {
                    areaColor: '#031525',
                    borderColor: '#3B5077',
                },
                emphasis: {
                    areaColor: '#2B91B7'
                }
            },
            animation: false,
            data: data.provinceCountList
        },
        // 二层省市颜色
        {
            name: '区域颜色',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbolSize: 1,
            label: {
                show: false
            },
            itemStyle: {
                show: false
            }
        },
        // 三层打点
        {
            name: '红点',
            zlevel: 5,
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: data.markLocationList,
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke',
                color: 'rgba(255, 115, 142, 1)',
            },
            symbolSize: 12,
            label: {
                normal: {
                    show: false,
                },
                emphasis: {
                    show: false,
                },
            },
            itemStyle: {
                normal: {
                    color: 'rgba(255, 115, 142, 1)',
                    shadowBlur: 30,
                },
            },
        },
        // 四层飞线
        {
            type: 'lines',
            coordinateSystem: 'geo',
            zlevel: 8,
            effect: {
                show: true,
                period: 1,
                color: 'white',
                trailLength: 0.2,
                symbolSize: 3,
                loop: true,
            },
            lineStyle: {
                normal: {
                    color: 'white',
                    width: 0,
                    curveness: 0,
                },
            },
            data: convertData2(data.readLineList || []),
        },
    ],
};

结语

这篇文章的目的是为了讲解 echarts 常用配置项, 基于这些配置项可以快速完成基本的可视化工作. 如果想基于 echarts 玩转更定制化的需求还需要自己在官网好好研读.

d3

完全自主生成图表,链式操作.

highcharts

商业授权

chart

googlechart

bizchart

阿里

viserjs

阿里

G2

阿里

python

matplotlib

seaborn

bokeh

chartify