echarts toolbox 扩展

前言##

echarts是百度前端团队推出的一个非常强大的开源图表库，我最近在重构的一个内部后台系统也用到了echarts，但是梳理老代码的时候发现有人居然改了node_modules/echarts里面的代码。梳理了一下功能，其实当时的需求就只想把“保存图片”的那个按钮的逻辑改为下载excel（也不知道为什么产品要在这个位置放导excel的按钮...）。

ecahrts中的toolbox

开始##

我顺着echarts找到了toolbox模块，在node_modules/lib/component/toolbox/feature 下面有几个文件就是echarts toolbox已有的一些功能。发现几个功能都是需要实现同样一套接口来添加对应的按钮和功能，于是照葫芦画瓢，按照SaveAsImage.js 里面的代码实现一个类似的下载excel的工具。需要给class指定一个类属性defaultOption为默认配置，需要实现onclick方法。

SaveAsExcel.js

/**
 * @Author: lyan
 * @Date:   2017-06-30T12:40:29+08:00
 * @Email:  [email protected]
 * @Description: 扩展echarts 的tool box，增加导出excel功能
 */

// 环境判断
var env = require('zrender/lib/core/env');

export default class SaveAsExcel {
    constructor(model) {
        this.model = model;
    }

    get unusable() {
        return !env.canvasSupported;
    }

    onclick() {
        const model = this.model;
        const url = model.get('url');
        window.open(url);
    }
}

// 默认配置
SaveAsExcel.defaultOption = {
    show: true,
    // 功能图标，可以使用svg的path、可以是一张网络图片，如果是图片的话，需要加上image://前缀，比如icon: 'image://http://example.com/xxx.png'
    icon: 'M4.7,22.9L29.3,45.5L54.7,23.4M4.6,43.6L4.6,58L53.8,58L53.8,43.6M29.2,45.1L29.2,0',
    title: 'export',
    url: '#'
};

// 必须注册feature
require('echarts/lib/component/toolbox/featureManager').register(
   // 功能名字   
   'saveAsExcel',
    SaveAsExcel
);

使用##

如果你要在项目中引入全量的echarts，需要在引入echarts之前 引入SaveAsExcel.js

import './yourPath/SaveAsExcel';
import echarts from 'echarts';
....

如果是部分引入, 则在引入toolbox之前 引入SaveAsExcel.js

//  引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
//  引入柱状图
require('echarts/lib/chart/bar');
//  引入扩展的工具按钮
require('./yourPath/SaveAsExcel');
// 引入toolbox
require('echarts/lib/component/toolbox');

在业务代码里面使用

const opt = {
    ...
    toolbox: {
        feature: {
            // 自定义的下载按钮
            saveAsExcel: {
                url: `xxxx.jsp`,
                title: '下载'
            }
        }
    }
};

效果

image.png

结语

通过这样的扩展方式，既实现了功能，也不会修改原有代码的功能，个人认为还是一种比较好的方式吧，如果需要更多更复杂的功能 ，其实都可以通过类似的方式来实现 ，当然这就需要对echarts源码吃透一点了。
由于笔者能力有限，如果文章中有哪里不对的地方，还请拍砖指正。希望本文对你有所帮助～～。