vue3+element-plus使用echarts
问题:在页面点击导出时,循环获取echart图片 myChart.getDataURL() ,导出的图片为空白,或者颜色越来越浅。
function choiceTitle(index, isExport) {
reset()
let params = form.value.questionVos[index]
let echart = echartsData.value
echart.columnar.title.text = params.name
echart.cakeShape.title.text = params.name
echart.brokenLine.title.text = params.name
echart.columnar.title.subtext = `有效答题数,共计${params.validNumber}条`
echart.brokenLine.title.subtext = `有效答题数,共计${params.validNumber}条`
echart.cakeShape.title.subtext = `有效答题数,共计${params.validNumber}条`
// || params.type == 'time'
if (params.type == 'single' || params.type == 'multi' || params.type == 'matrix') {
params.questionOptions.forEach((item, i) => {
let data = {
name: item.optionName,
value: item.count
}
echart.columnar.xAxis[0].data[i] = item.optionName;
echart.columnar.series[0].data[i] = data
echart.brokenLine.xAxis.data[i] = item.optionName;
echart.brokenLine.series[0].data[i] = data
echart.cakeShape.legend.data[i] = item.optionName;
echart.cakeShape.series[0].data[i] = data
})
} else if (params.type == 'upload') {
// params.type == 'autograph' ||
echart.columnar.xAxis[0].data = [];
echart.columnar.series[0].data = [];
echart.brokenLine.xAxis.data = [];
echart.brokenLine.series[0].data = [];
echart.cakeShape.legend.data = [];
echart.cakeShape.series[0].data = [];
}
else {
if (params.fillContentList) {
params.fillContentList.forEach((item, i) => {
let data = {
name: item.content,
value: item.count
}
echart.columnar.xAxis[0].data[i] = item.content;
echart.columnar.series[0].data[i] = data
echart.brokenLine.xAxis.data[i] = item.content;
echart.brokenLine.series[0].data[i] = data
echart.cakeShape.legend.data[i] = item.content;
echart.cakeShape.series[0].data[i] = data
})
}
}
//是否关闭动画
isExport ? echart.columnar.series[0].animation = false : ''
isExport ? echart.brokenLine.series[0].animation = false : ''
isExport ? echart.cakeShape.series[0].animation = false : ''
}
function export(){
form.value.questionVos.forEach((item, index) => {
choiceTitle(index, true)//图片数据处理
if (echartsType.value == 1) {
let dom = document.getElementById('columnar')
//刷新
dom.removeAttribute('_echarts_instance_')
myChart = echarts.init(dom);
myChart.setOption(echartsData.value.columnar);
}
if (echartsType.value == 2) {
let dom = document.getElementById('brokenLine')
//刷新
dom.removeAttribute('_echarts_instance_')
myChart = echarts.init(dom);
myChart.setOption(echartsData.value.brokenLine);
}
if (echartsType.value == 3) {
let dom = document.getElementById('cakeShape')
//刷新
dom.removeAttribute('_echarts_instance_')
myChart = echarts.init(dom);
myChart.setOption(echartsData.value.cakeShape);
}
form.value.images.push(myChart.getDataURL())
})
原因:在设置图片数据时,有默认的动画效果,导致有延迟
解决:将 动画关闭 在.series 数据里面设置 animation : false