数据可视化大屏

以下为测试demo效果图：

 

 

开发环境：vscode

涉及组件：DataV Echart

 

开发时注意事项：

1. DataV目前（2023年3月31日）还是最好使用旧版本。
2. 由于DataV使用旧版本，Vue当然就使用Vue2。
3. DataV中组件使用不多时，最好按需导入。
4. Vue项目创建时，最好手动选择相应的依赖。
5. 数据从后台获取时推荐使用websocket进行，尽量不用定时轮询。
6. 在config中设置图片的url时需要使用require,
   bgImgSrc:require('../assets/map.jpg')

 

测试demo为在HomeView实现，其代码如下，下述代码还有很大的优化空间……

<template>
  <div class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png"> -->
    <div style="display: flex;flex-direction: row;">
      <div style="flex-direction: column;width: 25%;">
        <dv-border-box-8 style="width:100%;height:200px">
          <!-- <dv-percent-pond :config="config2" style="width:200px;height:100px;" /> -->
        </dv-border-box-8>
        <dv-border-box-10 style="width:100%;height:200px">
          <dv-capsule-chart :config="config1" style="width:100%;height:200px" />
        </dv-border-box-10>

        <dv-water-level-pond :config="config" style="width:100%;height:200px" />
      </div>
      <dv-border-box-7 style="width:50%;height: 600px;">
        <dv-flyline-chart-enhanced :config="config3" style="width:100%;height:100%;" />
      </dv-border-box-7>
      <div style="flex-direction: column;width: 25%;">
        <dv-border-box-10 style="width: 100%;height: 300px;">
          <dv-scroll-board :config="config4" style="width:100%;height:220px;" />
        </dv-border-box-10>
        <dv-border-box-10 style="width: 100%;height: 300px;">
          <dv-scroll-ranking-board :config="config5" style="height:300px" />
        </dv-border-box-10>
      </div>
    </div>

  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  data() {
    return {
      config: {
        data: [66]
      },
      config1: {
        data: [
          {
            name: '南阳',
            value: 167
          },
          {
            name: '周口',
            value: 67
          },
          {
            name: '漯河',
            value: 123
          },
          {
            name: '郑州',
            value: 55
          },
          {
            name: '西峡',
            value: 98
          }
        ]
      },
      config2: {
        value: 66,
        borderWidth: 5,
        borderRadius: 10,
        borderGap: 5
      },
      config3: {
        points: [
          {
            name: '郑州',
            coordinate: [0.48, 0.35],
            halo: {
              show: true,
            },
            icon: {
              src: require('../assets/star.png'),
              width: 30,
              height: 30
            },
            text: {
              show: false
            }
          },
          {
            name: '新乡',
            coordinate: [0.52, 0.23]
          },
          {
            name: '焦作',
            coordinate: [0.43, 0.29]
          },
          {
            name: '开封',
            coordinate: [0.59, 0.35]
          },
          {
            name: '许昌',
            coordinate: [0.53, 0.47]
          },
          {
            name: '平顶山',
            coordinate: [0.45, 0.54]
          },
          {
            name: '洛阳',
            coordinate: [0.36, 0.38]
          },
          {
            name: '周口',
            coordinate: [0.62, 0.55],
            halo: {
              show: true,
              color: '#8378ea'
            }
          },
          {
            name: '漯河',
            coordinate: [0.56, 0.56]
          },
          {
            name: '南阳',
            coordinate: [0.37, 0.66],
            halo: {
              show: true,
              color: '#37a2da'
            }
          },
          {
            name: '信阳',
            coordinate: [0.55, 0.81]
          },
          {
            name: '驻马店',
            coordinate: [0.55, 0.67]
          },
          {
            name: '济源',
            coordinate: [0.37, 0.29]
          },
          {
            name: '三门峡',
            coordinate: [0.20, 0.36]
          },
          {
            name: '商丘',
            coordinate: [0.76, 0.41]
          },
          {
            name: '鹤壁',
            coordinate: [0.59, 0.18]
          },
          {
            name: '濮阳',
            coordinate: [0.68, 0.17]
          },
          {
            name: '安阳',
            coordinate: [0.59, 0.10]
          }
        ],
        lines: [
          {
            source: '新乡',
            target: '郑州'
          },
          {
            source: '焦作',
            target: '郑州'
          },
          {
            source: '开封',
            target: '郑州'
          },
          {
            source: '周口',
            target: '郑州',
            color: '#fb7293',
            width: 2
          },
          {
            source: '南阳',
            target: '郑州',
            color: '#fb7293',
            width: 2
          },
          {
            source: '济源',
            target: '郑州'
          },
          {
            source: '三门峡',
            target: '郑州'
          },
          {
            source: '商丘',
            target: '郑州'
          },
          {
            source: '鹤壁',
            target: '郑州'
          },
          {
            source: '濮阳',
            target: '郑州'
          },
          {
            source: '安阳',
            target: '郑州'
          },
          {
            source: '许昌',
            target: '南阳',
            color: '#37a2da'
          },
          {
            source: '平顶山',
            target: '南阳',
            color: '#37a2da'
          },
          {
            source: '洛阳',
            target: '南阳',
            color: '#37a2da'
          },
          {
            source: '驻马店',
            target: '周口',
            color: '#8378ea'
          },
          {
            source: '信阳',
            target: '周口',
            color: '#8378ea'
          },
          {
            source: '漯河',
            target: '周口',
            color: '#8378ea'
          }
        ],
        icon: {
          show: true,
          src: require('../assets/dot32.png')
        },
        text: {
          show: true,
        },
        k: 0.5,
        bgImgSrc:require('../assets/map.jpg') 

      },
      config4: {
        header: ['列1', '列2', '列3'],
        data: [
          ['行1列1', '行1列2', '行1列3'],
          ['行2列1', '行2列2', '行2列3'],
          ['行3列1', '行3列2', '行3列3'],
          ['行4列1', '行4列2', '行4列3'],
          ['行5列1', '行5列2', '行5列3'],
          ['行6列1', '行6列2', '行6列3'],
          ['行7列1', '行7列2', '行7列3'],
          ['行8列1', '行8列2', '行8列3'],
          ['行9列1', '行9列2', '行9列3'],
          ['行10列1', '行10列2', '行10列3']
        ],
        index: true,
        columnWidth: [50],
        align: ['center'],
        carousel: 'page'
      },
      config5:{
        data: [
    {
      name: '周口',
      value: 55
    },
    {
      name: '南阳',
      value: 120
    },
    {
      name: '西峡',
      value: 78
    },
    {
      name: '驻马店',
      value: 66
    },
    {
      name: '新乡',
      value: 80
    },
    {
      name: '信阳',
      value: 45
    },
    {
      name: '漯河',
      value: 29
    }
  ]
      }
    }

  },

  components: {
    // HelloWorld
  },

}

</script>
<style>
html{
  background-image: url('../img/flylineChart/yuzhou.jpeg') ;
  background-size: cover;
}
.h20w25 {
  height: 20vh;
  width: 25%;
}
</style>

 

 

他人作品效果：