大屏可视化,vue2+dataV+Echarts

安装dataV库:

yarn add @jiaminghi/data-view

放入全屏容器

设置布局使用flex布局+百分比

<dv-full-screen-container>全屏容器<dv-full-screen-container>
  • 导入边框
<dv-full-screen-container>
  <dv-border-box3></dv-border-box3>
<dv-full-screen-container>
  • 添加样式 设置布局

使用flex布局

// 这里采用一行三列
 <dv-full-screen-container>
        <div class="content-moduleBox">
            <div style="flex:0 1 30%">
                <dv-border-box-3 style="width: 100%;height: 200px;"></dv-border-box-3>
            </div>
            <div style="flex:0 1 40%">
                <dv-border-box-8 style="width: 100%;height: 200px;"></dv-border-box-8>
            </div>
            <div style="flex:0 1 30%">
                <dv-border-box-3 style="width: 100%;height: 200px;"></dv-border-box-3>
            </div>
        </div>
    </dv-full-screen-container>

设置三行三列展示

<dv-full-screen-container>
        <div class="content-moduleBox">
            <div style="flex:0 1 25%">
                <dv-border-box-3 style="width: 100%;height: 200px;"></dv-border-box-3>
                <dv-border-box-7 style="width: 100%;height: 200px;"></dv-border-box-7>
                <dv-border-box-8 style="width: 100%;height: 200px;"></dv-border-box-8>
            </div>
            <div style="flex:0 1 50%">
                <dv-border-box-8 style="width: 100%;height: 600px;"></dv-border-box-8>
            </div>
            <div style="flex:0 1 25%">
                <dv-border-box-3 style="width: 100%;height: 200px;"></dv-border-box-3>
                <dv-border-box-7 style="width: 100%;height: 200px;"></dv-border-box-7>
                <dv-border-box-8 style="width: 100%;height: 200px;"></dv-border-box-8>
            </div>
        </div>
    </dv-full-screen-container>
  1. 设置标题样式
<!-- 标题部分 -->
        <div-module-box class="content-moduleBox">
            <div style="flex:0 1 25%">
                <dv-decoration-10 style="height: 50px;"></dv-decoration-10>
            </div>
            <div style="flex:0 1 50%">
                <!-- 三等分 -->
                <div class="content-moduleBox-title">
                    <dv-decoration-8 style="height: 50px;flex: 1;"></dv-decoration-8>
                    <div>智慧工程</div>
                    <dv-decoration-8 style="height: 50px;flex: 1;" reverse="true"></dv-decoration-8>
                </div>
            </div>
            <div style="flex:0 1 25%">
                <dv-decoration-10 style="height: 50px;transform: rotate(180deg);"></dv-decoration-10>
            </div>
        </div-module-box>

标题中间的表头部分采用flex布局,使用dataV的dv-decoration-8,对称使用reverse flex等分布局

  1. 添加胶囊图
<dv-border-box-10 style="width: 100%;height: 200px;">
    <dv-capsule-chart :config="config" style="width: 100%;height: 200px;"></dv-capsule-chart>
 </dv-border-box-10>

config的配置:

config: {
        data: [
                 {
                     name: '南阳',
                     value: 167
                 },
                    {
                        name: '周口',
                        value: 67
                    },
                    {
                        name: '漯河',
                        value: 123
                    }
                ]
            }
  1. 飞线图
<dv-flyline-chart :config="config3" style="width: 100%;height: 600px;"></dv-flyline-chart>

飞线图数据配置:

 config3: {
                centerPoint: [0.48, 0.35],
                points: [
                    {
                        position: [0.52, 0.235],
                        text: '新乡'
                    },
                    {
                        position: [0.43, 0.29],
                        text: '焦作'
                    }
                ],
                bgImgUrl: require('../assets/map.jpg'),
            }

Vue图片引入使用require()

  1. echarts使用
    跟echarts配置一样

webSocket

webSocket是一种网络通信协议
因为传统的HTTP是无状态协议,每次请求-应答需要客户端于服务端建立连接的模式。WebSocket是类似Socket的TCP长连接通讯模式。

  1. WebSocket构造函数
var ws = new Websocket
  1. 连接成功触发
 ws.onopen = function(){
    alert('连接成功')
}
  1. 连接失败触发
ws.onerror = function(){

}
  1. 接收到信息
ws.onmessage = function(res){
     console.log(res)
     let data = JSON.parse(res.data)
     this.lists = data.message
     this.echartsInit()
}

这里需要注意的是如果需要图表动态不定时的加载,将图标的初始化放在webscoket接收到信息后初始化

效果图:
大屏可视化,vue2+dataV+Echarts_第1张图片

你可能感兴趣的:(前端)