前言##

echarts是百度前端團(tuán)隊推出的一個非常強(qiáng)大的開源圖表庫，我最近在重構(gòu)的一個內(nèi)部后臺系統(tǒng)也用到了echarts，但是梳理老代碼的時候發(fā)現(xiàn)有人居然改了node_modules/echarts里面的代碼??。梳理了一下功能，其實(shí)當(dāng)時的需求就只想把“保存圖片”的那個按鈕的邏輯改為下載excel（也不知道為什么產(chǎn)品要在這個位置放導(dǎo)excel的按鈕...）。

ecahrts中的toolbox

開始##

我順著echarts找到了toolbox模塊，在node_modules/lib/component/toolbox/feature 下面有幾個文件就是echarts toolbox已有的一些功能。發(fā)現(xiàn)幾個功能都是需要實(shí)現(xiàn)同樣一套接口來添加對應(yīng)的按鈕和功能，于是照葫蘆畫瓢，按照SaveAsImage.js 里面的代碼實(shí)現(xiàn)一個類似的下載excel的工具。需要給class指定一個類屬性defaultOption為默認(rèn)配置，需要實(shí)現(xiàn)onclick方法。

SaveAsExcel.js

/**
 * @Author: lyan
 * @Date:   2017-06-30T12:40:29+08:00
 * @Email:  liu-yaner@foxmail.com
 * @Description: 擴(kuò)展echarts 的tool box，增加導(dǎo)出excel功能
 */

// 環(huán)境判斷
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);
    }
}

// 默認(rèn)配置
SaveAsExcel.defaultOption = {
    show: true,
    // 功能圖標(biāo)，可以使用svg的path、可以是一張網(wǎng)絡(luò)圖片，如果是圖片的話，需要加上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');
//  引入擴(kuò)展的工具按鈕
require('./yourPath/SaveAsExcel');
// 引入toolbox
require('echarts/lib/component/toolbox');

在業(yè)務(wù)代碼里面使用

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

效果

image.png

結(jié)語

通過這樣的擴(kuò)展方式，既實(shí)現(xiàn)了功能，也不會修改原有代碼的功能，個人認(rèn)為還是一種比較好的方式吧，如果需要更多更復(fù)雜的功能 ，其實(shí)都可以通過類似的方式來實(shí)現(xiàn) ，當(dāng)然這就需要對echarts源碼吃透一點(diǎn)了。
由于筆者能力有限，如果文章中有哪里不對的地方，還請拍磚指正。希望本文對你有所幫助～～??。