eta_mobile_front/src/views/ppt/components/ChartWrap.vue

<script setup>
import {computed,onMounted,ref} from 'vue'
import apiChart from '@/api/chart.js'
import {chartRender,useChartRender} from '@/hooks/chart/render'


const {setLimitData,isUseSelfLimit}=useChartRender()

const props=defineProps({
    itemData:{
        type:Object,
        default:{}
    }
})

const renderId=computed(()=>{
    if(props.itemData?.chartId){
        return 'chart'+props.itemData.chartId+'_'+props.itemData.pptPageIndex+'_'+props.itemData.position
    }
})

const sourceFrom=ref(null)

// 获取图表详情
let chartIsDelete=ref(false)//图表是否被删除
async function getChartInfo(){
    const res=await apiChart.chartInfoByCode({UniqueCode:props.itemData.chartId,IsCache: true})
    if(res.Ret===200){
        if(!res.Data.ChartInfo){
            chartIsDelete.value=true
            return
        }

        let showChartTitle=false
        const {Source,ChartType}=res.Data.ChartInfo
        sourceFrom.value= res.Data.ChartInfo.SourcesFrom?JSON.parse(res.Data.ChartInfo.SourcesFrom):''
        if((Source==1&&[2,7,10].includes(ChartType))||(Source==2&&ChartType==8)){
            showChartTitle=true
        }

        //初始化上下限
        isUseSelfLimit.value = true
        setLimitData(res.Data)

        chartRender({
            data:res.Data,
            renderId:renderId.value,
            lang:window.location.pathname.startsWith('/ppten')?'en':'zh',
            changeLangIsCheck:true,
            showChartTitle,
            shouldUseSelfLimit:true,
        })
    }
}


onMounted(()=>{
    getChartInfo()
})

</script>

<template>
    <div class="ppt-chart-box">
        <div class="chart-box" :id="renderId">
            <img v-if="chartIsDelete" class="empty-img" src="https://hzstatic.hzinsights.com/static/ppt_default.png" alt="">
        </div>
        <div class="chart-source">
            <span
            v-if="sourceFrom && sourceFrom.isShow"
            :style="`color: ${sourceFrom.isShow ? sourceFrom.color : '#999'};font-size: ${ sourceFrom.fontSize }px;`"
            >来源:{{ sourceFrom.text}}</span>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.ppt-chart-box{
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    .chart-box{
        width: 100%;
        // height: 100%;
        flex-grow: 1;
        .empty-img{
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }
    .chart-source{
        width: 100%;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
}
</style>