首页 前端知识 循环获取echarts图片并导出,图片显示问题

循环获取echarts图片并导出,图片显示问题

2025-03-03 13:03:18 前端知识 前端哥 216 971 我要收藏

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/22515.html
标签
评论
发布的文章

如何修改电脑mac地址?

2025-03-03 13:03:33

C 数组:深入解析与应用

2025-03-03 13:03:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!