<template>
    <div id="content">
        <dv-full-screen-container class="demo1" style="height: 880px; width: 1558px; margin-left: 0px;">
            <dv-border-box-11 title="云端展示" class="demo2">
                <dv-loading v-if="loading===true ? true:false">Loading...</dv-loading>
                <div v-if="loading === false ? true : false">
                    <dv-decoration-1 class="dv-decoration-1" style="width:300px;height:80px;" />
                    <dv-decoration-2 class="dv-decoration-2" :reverse="true" style="width:3px;height:680px;" />
                    <dv-decoration-2 class="dv-decoration-2-reverse" :reverse="true" style="width:5px;height:680px;" />
                    <dv-decoration-5 class="dv-decoration-5" dur="6" style="width:300px;height:40px;" />"
                    <dv-decoration-6 class="dv-decoration-6" style="width:300px;height:30px;" />
                    <dv-decoration-9 class="dv-decoration-9 " style="width:200px;height:200px;">
                    </dv-decoration-9>
                    <dv-decoration-8 class="dv-decoration-8" style="width:300px;height:50px;" />
                    <dv-decoration-8 class="dv-decoration-8-reverse" :reverse="true" style="width:300px;height:50px;" />
                    <dv-decoration-10 class="dv-decoration-10" style="width:96%;height:5px;" />
                    <dv-decoration-11 class="dv-decoration-11" style="width:200px;height:60px; color: #fff;">大数据平台
                    </dv-decoration-11>
                    <dv-decoration-12 class="dv-decoration-12" style="width:130px;height:130px;" />
                    <dv-active-ring-chart class="dv-active-ring-chart" :config="config"
                        style="width:210px;height:210px" />
                    <dv-capsule-chart class="dv-capsule-chart" :config="config" style="width:400px;height:300px" />
                    <dv-conical-column-chart class="dv-conical-column-chart" :config="config"
                        style="width:400px;height:200px;" />
                    <dv-water-level-pond class="dv-water-level-pond" :config="config4"
                        style="width:150px;height:200px" />
                    <dv-scroll-board class="dv-scroll-board" :config="config1" style="width:450px;height:250px" />
                    <dv-scroll-ranking-board class="dv-scroll-ranking-board" :config="config"
                        style="width:450px;height:300px" />
                    <dv-percent-pond class="dv-percent-pond" :config="config2" style="width:200px;height:100px;" />
            </dv-border-box-11>
        </dv-full-screen-container>
</template>
<script>
import Charts from '@jiaminghi/charts'
export default {
    name: 'main',
    data() {
        return {
            loading: true,
            config: {
                radius: '80%',
                activeRadius: '90%',
                data: [
                        name: '周口',
                        value: 55
                        name: '南阳',
                        value: 120
                        name: '西峡',
                        value: 78
                        name: '驻马店',
                        value: 66
                        name: '新乡',
                        value: 80
                digitalFlopStyle: {
                    fontSize: 20
                showOriginValue: true,
                colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
                unit: '空气质量',
                showValue: true
            config1: {
                header: ['昨日访问人数', '今日人数', '访问量'],
                data: [
                    ['3000', '3000', '3000'],
                    ['1616', '41646', '3000'],
                    ['6464', '243434', '6464'],
                    ['46466', '64646', '6464'],
                    ['46464', '464646', '464646'],
                    ['464646', '464646', '46464'],
                    ['4646', '464646', '644646'],
                    ['464646', '646446', '464646'],
                    ['46446', '46464', '464464'],
                    ['4646', '6446', '64464']
                carousel: 'page',
                waitTime: 3000,
            config2: {
                value: 66,
                borderWidth: 5,
                borderRadius: 10,
                borderGap: 5,
                lineDash: [10, 2],
                localGradient: true
            config4: {
                data: [66, 45],
                shape: 'roundRect'
    methods: {
        showview() {
            setTimeout(this.setloading, 3000)
        setloading(){
            this.loading=false
        data() {
            const option1 = {
                title: {
                    text: '周销售额趋势'
                xAxis: {
                    name: '第一周',
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                yAxis: {
                    name: '销售额',
                    data: 'value'
                series: [
                        data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
                        type: 'line'
            const option2 = {
                title: {
                    text: '周销售额趋势'
                xAxis: {
                    name: '第二周',
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                yAxis: {
                    name: '销售额',
                    data: 'value'
                series: [
                        data: [2339, 1899, 2118, 1790, 3265, 4465, 3996],
                        type: 'line'
            const container = document.getElementById('container')
            const myChart = new Charts(container)
            myChart.setOption({
                title: 'My Chart',
                option1,
                option2
    mounted() {
        this.showview()
</script>
<style lang="less" scoped>
.demo1 {
    color: rgb(18, 128, 77);
    font-size: 30px;
    font-weight: 1000;
    padding: 0;
    background-color: rgb(14, 14, 14);
    width: 100%;
    height: 100%;
.demo2 {
    display: flex;
    position: absolute;
    background-image: url('../image/3.jpeg');
    background-repeat: no-repeat;
    background-size: cover;
    -moz-background-size: 100% 100%;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    .dv-decoration-1 {
        position: absolute;
        padding: 0;
        margin: 1px;
        left: 40%;
        top: 60%;
    .dv-decoration-2 {
        position: absolute;
        padding: 0;
        margin: 1px;
        left: 33%;
        top: 10%;
    .dv-decoration-2-reverse{
         position: absolute;
        padding: 0;
        margin: 1px;
        left: 66%;
        top: 10%;
    .dv-decoration-5 {
        position: absolute;
        padding: 0;
        margin: 1px;
        left: 40.3%;
        top: 6%;
    .dv-decoration-6 {
        position: absolute;
        padding: 0;
        margin: 1px;
        left: 40.3%;
        top: 45%;
    .dv-decoration-9 {
        position: absolute;
        padding: 0;
        margin: 1px;
        left: 5%;
        top: 6%;
    .dv-decoration-8 {
        position: absolute;
        padding: 0;
        margin: 1px;
        left: 1%;
        top: 90%;
    .dv-decoration-8-reverse {
        position: absolute;
        padding: 0;
        margin: 1px;
        left: 79.5%;
        top: 90%;
    .dv-decoration-10 {
        position: absolute;
        padding: 0;
        margin: 1px;
        left: 2%;
        top: 96%;
    .dv-decoration-11 {
        position: absolute;
        padding: 0;
        margin: 1px;
        left: 43%;
        top: 50%;
    .dv-decoration-12 {
        position: absolute;
        padding: 0;
        margin: 1px;
        left: 85%;
        top: 7%;
    .dv-active-ring-chart {
        position: absolute;
        padding: 0;
        margin: 1px;
        left: 4%;
        top: 31%;
    .dv-capsule-chart {
        position: absolute;
        padding: 0;
        margin: 1px;
        left: 5%;
        top: 57%;
    .dv-conical-column-chart {
        font-size: 20px !important;
        position: absolute;
        padding: 0;
        margin: 1px;
        left: 36%;
        top: 65%;
    .dv-scroll-board {
        font-size: 20px !important;
        position: absolute;
        padding: 0;
        margin: 1px;
        left: 69%;
        top: 23%;
        opacity: 0.8;
    .dv-scroll-ranking-board {
        font-size: 20px !important;
        position: absolute;
        padding: 0;
        margin: 1px;
        left: 69%;
        top: 55%;
        opacity: 0.8;
    .dv-percent-pond {
        font-size: 20px !important;
        position: absolute;
        padding: 0;
        margin: 1px;
        left: 69%;
        top: 9%;
        opacity: 0.8;
    .dv-water-level-pond {
        font-size: 20px !important;
        position: absolute;
        padding: 0;
        margin: 1px;
        left: 20%;
        top: 31%;
        opacity: 0.8;
</style>
1.想复制随意哈但是可能是小白才会需要，懂一点的都看不上哈哈哈哈哈不说了继续努力
 
复制觉得有用记得点个赞（爱你~）
 
1.页面加载
 
 2.加载完成
 
 任重道远加油
					
使用DataV组件库的dv-full-screen-container组件报错：DataV: Component width or height is 0px......
一个基于Vue前端框架和第三方图表库echarts的可视化大数据平台，通过vue项目构建，指令的灵活运用，组件封装，组件之间的通信，使内部图表组件库可实现自由替换和组合。
项目中部分前端库采用外部CDN日期，可以减少打包文件的体积，加快页面渲染。
可视化数据大屏展示对前端性能要求高，建议使用谷歌浏览器查看或开发，屏幕尺寸为1920px宽和1080px高是最佳效果。
目前制作数据可视化大屏，前端比较流行的第三方库有：Echarts（百度），AntV（阿里），Highcharts（国外公司），D3.js（国外公司）。
如果感觉还不错的话，老铁们是不是赏个★Star鼓励一哈，后续会持续更新和优化，也期待大家的交流。
首页酷屏统计图
公司品牌介绍
│  vue.config.js                     // webpack配置         
				
抱歉，我无法提供Vue可视化大屏的源代码，因为这是一个非常广泛的主题，其源代码可能因项目而异。但是，您可以在各种开源项目中找到Vue可视化大屏的示例和源代码，例如：
1. DataV：一个基于Vue开发的数据可视化大屏，它提供了丰富的组件和模板，支持数据可视化、地图可视化、文本可视化等。
2. VCharts：一个基于Echarts封装的Vue组件库，它提供了丰富的图表组件，可以轻松地在Vue项目中使用。
3. Vue-echarts：一个基于Echarts封装的Vue组件库，它提供了Echarts的所有功能，并且易于使用。
4. G2Plot：一个基于AntV G2封装的Vue组件库，它提供了丰富的图表组件，并且可以轻松地在Vue项目中使用。
您可以通过这些开源项目学习并了解如何使用Vue开发可视化大屏。