import { barDataView } from "./echartsdata.js";//引入方法
const workorderType = echarts.init(this.$refs.workorder)
var option = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: {
type: "value",
},
toolbox: {
show: true,
feature: {
dataView: {},
dataZoom: {
yAxisIndex: "none",
},
magicType: {
type: ["line", "bar", "stack", "tiled"], // line折线图,bar柱状图,stack多个柱状图堆叠一起,tiled平铺柱状图
},
restore: { show: true },
saveAsImage: { show: true },
},
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar",
showBackground: true,
backgroundStyle: {
color: "rgba(220, 220, 220, 0.8)",
},
},
],
};
option.toolbox.feature.dataView = barDataView(['时间/日期','电价','电费'],'电量电费')//第一个参数为表头标题 第二个导出的文件夹名
workorderType.setOption(this.row1Piechart)
echartsdata文件内容
export function barDataView(titleName, fileName) {
var dataView = {
show: true,
readOnly: false,
lang: ['数据视图', '关闭', '导出Excel'],
optionToContent: function(opt) {
var axisData = opt.xAxis[0].data // 坐标数据
var series = opt.series // 折线图数据
var tdHeads = ''
for (let index = 0; index < titleName.length; index++) {
tdHeads += '<td style="padding: 0 10px">' + titleName[index] + '</td>'
}
var tdBodys = '' // 表数据
var table = '<table id="tableExcel_Day" border="1" class="table-bordered table-striped" style="width:100%;text-align:centerborder:1px solid #ccc;border-collapse:collapse;" ><tbody><tr>' + tdHeads + ' </tr>'
// 组装表数据
for (var i = 0, l = axisData.length; i < l; i++) {
for (var j = 0; j < series.length; j++) {
var temp = series[j].data[i]
if (temp != null && temp !== undefined) {
tdBodys += '<td>' + temp + '</td>'
} else {
tdBodys += '<td></td>'
}
}
table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>'
tdBodys = ''
}
table += '</tbody></table>'
return table
}
}
return dataView
}
如果需要导出请参考echart导出excel