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
            },
        },
    },
},