接上一節(jié)所說，當我們將接口封裝完了后，我們需要給大屏進行內容填充啦

1,新建組件

? ? ? ???? 我們在ser-views文件夾下新建9個vue組件，如下圖所示，我給編號為1到9

???????????在組件里寫入內容我是第一塊...一次類推，一直到第九塊

<template>
    <div>我是第一塊</div>
</template>
<script>

export default {
    data() {
        

        
    
    },
    mounted(){

    }
    
}
</script>
<style scoped>

</style>

?2，將我們新建好的組件全部依次填入到我們的主容器indexdata里去

? ? ? ???? 在主容器中引入組件，并注冊

???????????現(xiàn)在需要就是拼圖，將我么需要展示在大屏哪個位置的組件依次的放入到我們的大屏骨架里去

?

????????????最后展示出來的效果就是

?這里因為字體是黑色的，所以我把黑色背景換成了白色，只為了演示而已

3.內容填充

? ? ? ? ???現(xiàn)在骨架已經搭好，所有的組件已經在他們改在的位置了，這時候，我們需要的就是，在每個小模塊的組件里使用echarts和請求接口了

代碼如下

<template>
    <div class="box">
        <dv-loading style="color: aqua;" v-if="loading">加載中</dv-loading>
        <div ref="app" class="echarts" v-else></div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
import * as requests from "./api/index"
export default {
    data() {
        return {
            xdata: "",
            ydata: "",
            loading: true
        }
    },
    methods: {
        async getrequests() {
            const datalist = await requests.info()
            if (datalist.data.code == 200) {

                this.loading = false

                this.xdata = Object.keys(datalist.data.data)
                this.ydata = Object.values(datalist.data.data)

                this.$nextTick(() => {
                    this.getdata()
                })

            }
        },
        getdata() {
            var myChart = echarts.init(this.$refs.app);
            var option;
            option = {
                xAxis: {
                    type: 'category',
                    data: this.xdata
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: this.ydata,
                        type: 'bar'
                    }
                ]
            };
            option && myChart.setOption(option);
        }
    },
    mounted() {
        setInterval(() => { 
            this.getrequests() }, 60000)
        this.getrequests()
    }

}
</script>
<style scoped>
.box {
    width: 100%;
    height: 100%;

}

.echarts {
    width: 100%;
    height: 340px
}
</style>

???????????我們看下主屏幕的效果

????????????ok現(xiàn)在算是完成了，現(xiàn)在目前設置的是一小時請求一次接口更新一次數據，其他的8個模塊和第一個模塊一樣的調節(jié)，照常寫即可。這里我就不多寫了，直接看效果吧

????????????最后的效果就是這樣滴 我下面會把源碼放出來，這套完全可以作為公司的項目來使用，哈哈 拜拜

git地址?

git@gitee.com:hu-wenwu/banana.git

適配版，完美適配2k或者4k屏幕分辨率：

git@gitee.com:hu-wenwu/banana.git? ?（dev分支）文章來源地址http://www.zghlxwxcb.cn/news/detail-851531.html

到了這里，關于vue2+datav可視化數據大屏（3）附自適應各分辨率的大屏框架git代碼。的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！