echarts 圖表toolbox--saveAsImage & dataView

1. 圖表導出成圖片

toolbox: {
    feature: {
        // 圖表保存為png
        saveAsImage: {show: true},
	}
}

ps:也可以用canvas的toDataURL():

// toDataURL：將canvas對象轉換為base64位編碼
var echartImg = new Image();
echartImg.src = document.querySelector('#myChart canvas').toDataURL('image/png');
// document.querySelector('.myChart-box').appendChild(echartImg);
console.log(document.querySelector('#myChart canvas').toDataURL('image/png'))
console.log(echartImg)

2. 柱狀圖/折線圖切換

toolbox: {
    feature: {
        // 柱狀/折線圖 切換
        magicType: { show: true, type: ['line', 'bar'] },
    },
},

3. 圖表數據按表格展示

toolbox: {
    feature: {
        // 數據視圖
        dataView: {
            show: true,
            // readOnly: true,
            title: '數據視圖'
        },
    },
},

4. 修改數據視圖的表格樣式

toolbox: {
    feature: {
        // 數據視圖
        dataView: {
            show: true,
            // readOnly: true,
            title: '數據視圖'
            // 優化數據視圖樣式
            optionToContent: function(opt) {
                //該函數可以自定義列表為table，opt是給我們提供的原始數據的obj。 可打印出來數據結構查看
                var axisData = opt.xAxis[0].data //坐標軸
                var series = opt.series //折線圖的數據
				//表頭
                var tdHeads = '<th  style="margin-top:10px; padding: 10px 15px;border:1px solid #eee;">創建時間</th>' 
                series.forEach(function(item) {
                    tdHeads += `<th style="padding:5px 15px;border:1px solid #eee;">${item.name}</th>`
                })
				
				var tdBodys = ''
                var table = `<table border="0" style="width: 90%;margin-left:20px;border-collapse:collapse;font-size:14px;text-align:centerid="table-content"><thead><tr style="background-color: #409eff;color: #fff;">${tdHeads} </tr></thead><tbody>`
                for (var i = 0, l = axisData.length; i < l; i++) {
                    for (var j = 0; j < series.length; j++) {
                        if (series[j].data[i] == undefined) {
                            tdBodys += `<td style="border:1px solid #eee;">${'-'}</td>`
                        } else {
                            tdBodys += `<td style="border:1px solid #eee;">${series[j].data[i]}</td>`
                        }
                    }
                    table += `<tr><td style="padding: 15px 20px;border:1px solid #eee;">${axisData[i]}</td>${tdBodys}</tr>`
                    tdBodys = ''
                }
                table += '</tbody></table>'
                return table
            },
        },
    },
},

5. 將圖表數據導出成excel

npm i xlsx file-saver --save-dev

import FileSaver from 'file-saver'

toolbox: {
    feature: {
        // 數據視圖
        dataView: {
            show: true,
            // readOnly: true,
            title: '數據視圖',
            lang: ['數據視圖:', '關閉', '導出Excel'], // 按鈕
            // 數據視圖導出成excel
            contentToOption: function(HTMLDomElement, opt) {
                var XLSX = require("xlsx");
                let et = XLSX.utils.table_to_book(document.getElementById('table-content')) //此處傳入table的DOM節點
                let etout = XLSX.write(et, {
                    bookType: 'xlsx',
                    bookSST: true,
                    type: 'array',
                })
                try {
                    FileSaver.saveAs(
                      new Blob([etout], {
                        type: 'application/octet-stream',
                      }),
                      opt.title[0].text+'數據.xlsx'
                    ) //trade-publish.xlsx 為導出的文件名
                } catch (e) {
                    console.log(e, etout);
                }
                return etout
            },
        },
    },
},