先展现一个echarts，并配置dataZoom，每页最多10条数据，超出滚动
onMounted(() => {
nextTick(() => {
var chartDom = document.getElementById('echartsBox');
myChart = echarts.init(chartDom);
option = {
grid: {
left: '0px', // 图表左边距
right: '50px', // 图表右边距
top: '50px', // 图表上边距
bottom: '0px', // 图表下边距
containLabel: true // 包含坐标轴标签在内
},
graphic: [{
type: 'text',
left: '15', // 根据需要调整位置
top: '20', // 根据需要调整位置
z: 100, // 设置 z 轴数值较高，确保文本显示在最前面
style: {
text: '课程内容', // 指定要显示的文本
fill: '#666666', // 文本颜色
fontSize: '14px',
}
}],
yAxis: {
// name: '课程内容',
type: 'category',
data: ['A1', 'A2', 'A3', 'A4', 'A5', 'A6', 'A7', 'A8', 'A9', 'A10', 'A11', 'A12', 'A13', 'A14', 'A15', 'A16', 'A17', 'A18', 'A19', 'A20', 'A21', 'A22', 'A23', 'A24', 'A25'],
inverse: true,
},
xAxis: {
name: '得分',
type: 'value',
min: 5,
max: 0,
axisLabel: {
formatter: function (value: any) {
return Math.floor(value); // 取整数部分
}
},
},
dataZoom: [
{
type: "slider",
realtime: true, // 拖动时，是否实时更新系列的视图
// show:false, // 是否展示滚动条根据数据判断
startValue: 0,
endValue: 9, // 最多10条 超出滚动
width: 5,
height: "75%",
top: "12.5%",
right: 0,
brushSelect: false,
yAxisIndex: [0, 1], // 控制y轴滚动
fillerColor: "#0093ff", // 滚动条颜色
borderColor: "rgba(17, 100, 210, 0.12)",
backgroundColor: "#cfcfcf", //两边未选中的滑动条区域的颜色
handleSize: 0, // 两边手柄尺寸
showDataShadow: false, //是否显示数据阴影 默认auto
showDetail: false, // 拖拽时是否展示滚动条两侧的文字
zoomLock: true,
moveHandleStyle: {
opacity: 0,
},
},
{
type: "inside",
startValue: 0,
endValue: 10,
minValueSpan: 10,
yAxisIndex: [0],
zoomOnMouseWheel: false, // 关闭滚轮缩放
moveOnMouseWheel: true, // 开启滚轮平移
moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
},
],
series: [
{
data: [5, 0, 3, 2, 1, 5, 4, 3, 2, 1, 5, 4, 3, 2, 1, 5, 4, 3, 2, 1, 5, 4, 3, 2, 1],
type: 'bar',
label: {
show: true,
position: 'right',
formatter: '{c}分', // 显示数值
textStyle: {
color: '#333',
fontSize: 14
}
},
itemStyle: {
color: function (params: any) {
// 根据数据值取整后选择颜色
var value = Math.round(params.data);
var colors = ['#A6A6A6', '#FF7F2D', '#FCC946', '#A2C081', '#619C8A', '#016B25'];
return colors[value];
}
},
}
]
};
option && myChart.setOption(option);
})
})
效果： 调用echarts中getDataURL获取图表的数据 URL
// 下载echarts
const downloadBtn = (() => {
nextTick(() => {
const loading = ElLoading.service({
lock: true,
text: '图表生成中',
background: 'rgba(0, 0, 0, 0.7)',
})
// 需要3s左右生成
setTimeout(() => {
loading.close()
// 获取图表的数据 URL
var dataURL = myChart.getDataURL({
type: 'png', // 可以根据需要修改为其他格式，如 'jpeg'
pixelRatio: 2, // 图片分辨率，根据需要进行调整
backgroundColor: '#fff' // 图片背景色，根据需要进行调整
});
// 创建一个虚拟的下载链接并模拟点击下载
var link = document.createElement('a');
link.href = dataURL;
link.download = 'echarts_image.png'; // 下载的文件名，可以根据需要修改
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}, 3000)
})
})
问题来了：如数据不分页则可以下载全数据，如数据分页了则只能下载出可视区内容，如何解决？ 解决思路：echarts最终生成了canvas，canvas的宽高就是当前可视区的宽高，那么是否可以动态计算高度？？？
解决： 新增一个容器，这个容器为动态计算高度后导出使用
// 下载echarts
const downloadBtn = (() => {
// 获取完整的数据
const fullData = myChart.getOption();
let newOption = fullData
newOption.dataZoom = []
//
var chartDom: any = document.getElementById('newEchartsBox');
chartDom.style.width = '600px'
chartDom.style.height = 50 * fullData.series[0].data.length + 'px'
//
newMyChart = echarts.init(chartDom);
//
newOption && newMyChart.setOption(newOption);
//
nextTick(() => {
const loading = ElLoading.service({
lock: true,
text: '图表生成中',
background: 'rgba(0, 0, 0, 0.7)',
})
// 需要3s左右生成
setTimeout(() => {
loading.close()
// 获取图表的数据 URL
var dataURL = newMyChart.getDataURL({
type: 'png', // 可以根据需要修改为其他格式，如 'jpeg'
pixelRatio: 2, // 图片分辨率，根据需要进行调整
backgroundColor: '#fff' // 图片背景色，根据需要进行调整
});
// 创建一个虚拟的下载链接并模拟点击下载
var link = document.createElement('a');
link.href = dataURL;
link.download = 'echarts_image.png'; // 下载的文件名，可以根据需要修改
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}, 3000)
})
});
通过getOption获取echarts数据，根据数据长度动态设置新容器的高度，并赋值，赋值时把dataZoom清空，这里就不需要分页了，因为不做回显。 然后通过新容器调用echarts导出图片，问题完美解决。 源码如下：
已选
课程内容
文章来源
您阅读本篇文章共花了：
发表评论