用Vue搭建一个大屏数据可视化页面实战二(Vue实战系列)

本文涉及的产品
可视分析地图(DataV-Atlas),3 个项目,100M 存储空间
简介: 用Vue搭建一个大屏数据可视化页面实战二(Vue实战系列)


接上文

把之前写的代码抽离成组件

把之前写的一个个的panel抽离成组件,方便后期复用,形状功能类似的我们考虑把他们统一封装成组件

whr-panel-c1为例

<!--whr-panel-c1  2021/4/15 @王浩然QQ378237242-->
<template>
  <div class="panel-hezi" ref="panelhezi">
    <div class="panel-hezi-background"></div>
    <!--    <svg class="svg-head"  preserveAspectRatio="xMaxYMax" viewBox="0,0,100,100" v-if="type=='triangle'">-->
    <svg class="svg-triangle-head" preserveAspectRatio="xMaxYMax" :viewBox="`0,0,${tipSize.width},${tipSize.height}`"
         v-if="type=='triangle'">
      <defs>
        <linearGradient :id="randomId" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" :style="{stopColor:tipColor[0],stopOpacity:1}"/>
          <stop offset="100%" :style="{stopColor:tipColor[1],stopOpacity:1}"/>
        </linearGradient>
      </defs>
      <!--      <path d="M 0 0 l 90 0 l -90 90" :fill="`url(#${randomId})`"></path>-->
      <path :d="dpath" :fill="`url(#${randomId})`"></path>
    </svg>
    <div class="rectangle-head" v-if="type=='rectangle'">
      <div class="rectangle-head-box">
        <div>
          <img class="hezi-rectangle-icon" :src="tipIcon">
        </div>

        <div style="display: table">
          <div class="title" style="display: table-cell;vertical-align: middle">{{ title }}</div>
        </div>
      </div>
    </div>
    <img class="hezi-triangle-icon" :src="tipIcon" v-if="type=='triangle'">

    <div class="panel-hezi-triangle-title" v-if="type=='triangle'">
      <div class="title flex">
        <div class="triangle-title">{{ title }}</div>
        <div style="width: 100%;overflow: hidden">
          <svg preserveAspectRatio="xMaxYMax" :viewBox="`0,0,${panelSize.width - tipSize.width - 20},50`">
            <polyline points="0,15 50,15 60,10,65,18 70,15 90,15 95,5 100,25 105,15 120,15 130,15 140,5 150,20 160,15 190,15,200,8 210,20 220,15 230,15 250,15"
                      style="fill:none;stroke:white;stroke-width:1.5" />
            <!--          <path :d="dpath" :fill="`url(#${randomId})`"></path>-->
          </svg>
        </div>

      </div>
    </div>
    <div class="panel-hezi-triangle-body" v-if="type=='triangle'">
      <slot name="tbody"></slot>
    </div>
    <div class="panel-hezi-rectangle-body" v-if="type=='rectangle'">
      <slot name="tbody"></slot>
    </div>
  </div>
</template>

调用whr-panel-c1组件

  <whr-panel-c1 :tip-icon-size="{width:90,height:90}" :tip-size="{width:200,height:150}"
                    :tip-color="['#f61792','#c0d7e3']" :tip-icon="require('@/views/网络.svg')">
        <template v-slot:tbody>
          123
        </template>
      </whr-panel-c1>
      <whr-panel-c1 :panel-size="{width:200,height:200}" :tip-color="['#2a529d','#990ef1']"
                    :tip-icon="require('@/views/环动.svg')"></whr-panel-c1>
      <whr-panel-c1 type="triangle" :tip-size="{width:200,height:150}" :tip-color="['#f61792','#c0d7e3']"
                    :tip-icon="require('@/views/网络.svg')">
        <template v-slot:tbody>
          123
        </template>
      </whr-panel-c1>
      <whr-panel-c1 type="triangle" :tip-color="['#2a529d','#990ef1']"
                    :tip-icon="require('@/views/环动.svg')"></whr-panel-c1>

所涉及到的参数:

props: {
    //种类呗:triangle三角形rectangle矩形
    type: {
      required: true,
      type: String,
      default: "rectangle"
    },
    title: {
      type: String,
      default: "标题"
    },
    //背景色一个数组,传入俩颜色渐变
    backgroundColor: {
      type: Array,
      default: function () {
        return ["#1d6bfc", "#1eb1fd"]
      }
    },
    panelSize: {
      required: true,
      default: function () {
        return {
          width: 400,
          height: 300
        }
      }
    },
    //tip尺寸
    tipSize: {
      type: Object,
      default: function () {
        return {
          width: 100,
          height: 100
        }
      }
    },
    //tip
    tipIconSize: {
      type: Object,
      default: function () {
        return {
          width: 32,
          height: 32
        }
      }
    },
    //图标区域颜色,渐变色
    tipColor: {
      type: Array,
      default: function () {
        return ["#51acf6", "#59d6e3"]
      }
    },
    //图标
    tipIcon: {
      type: String,
      default: ""
    }
  },

这样我们所涉及到的参数基本都可以调整。

重写组织页面页面排版

这里遇到一个问题

谷歌浏览器里的样式



火狐浏览器里面没有问题。

这是什么原因,有小伙伴知道吗?

在Vue中搭建一个大屏数据可视化页面,通常涉及到组件的开发与整合。这里,我们将通过实战二来演示如何开发Vue组件,并整合到大屏页面中。

实战二:组件开发

步骤一:创建Vue组件

首先,在Vue项目中创建一个新的组件,比如DataVisualization.vue。这个组件将用于封装大屏数据可视化的逻辑和样式。

<template>
  <div class="data-visualization">
    <!-- 在这里添加数据可视化的图表元素 -->
  </div>
</template>

<script>
export default {
  name: 'DataVisualization',
  props: {
    // 定义传入的属性,比如数据、配置等
  },
  data() {
    return {
      // 组件内部数据
    };
  },
  mounted() {
    // 组件加载完成后执行的逻辑,比如初始化图表等
  },
  methods: {
    // 定义组件的方法
  }
};
</script>

<style scoped>
.data-visualization {
  /* 在这里添加组件的样式 */
}
</style>

步骤二:添加图表库

大屏数据可视化通常需要使用图表库来展示数据。你可以选择使用ECharts、Chart.js、D3.js等流行的图表库。

以ECharts为例,你可以通过npm安装ECharts:

npm install echarts --save

然后在组件中引入ECharts,并创建一个图表实例:

<template>
  <div class="data-visualization" ref="chartContainer"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  // ...
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      // 基于准备好的dom,初始化echarts实例
      const myChart = echarts.init(this.$refs.chartContainer);
      // 绘制图表
      myChart.setOption({
        // 在这里配置图表选项
      });
    }
  }
};
</script>

步骤三:封装组件属性和方法

为了让组件更加通用和可复用,你可以封装组件的属性和方法。

比如,你可以定义一个chartData属性来接收父组件传入的数据,然后在组件内部使用这些数据来渲染图表:

<script>
export default {
  // ...
  props: {
    chartData: {
      type: Object,
      required: true
    }
  },
  methods: {
    initChart() {
      const myChart = echarts.init(this.$refs.chartContainer);
      myChart.setOption(this.getChartOption(this.chartData));
    },
    getChartOption(data) {
      // 根据传入的数据生成ECharts的配置选项
      return {
        // ...
      };
    }
  }
};
</script>

步骤四:在父组件中使用

最后,在父组件中使用DataVisualization组件,并传入相应的数据:

<template>
  <div class="dashboard">
    <DataVisualization :chartData="myChartData" />
  </div>
</template>

<script>
import DataVisualization from './DataVisualization.vue';

export default {
  components: {
    DataVisualization
  },
  data() {
    return {
      myChartData: {
        // 在这里准备图表所需的数据
      }
    };
  }
};
</script>

确保你的父组件中有myChartData这个数据属性,并且它的结构是DataVisualization组件所期望的。

通过以上的步骤,你就可以开发出Vue中的大屏数据可视化组件,并将其整合到大屏页面中。根据实际需要,你还可以添加更多的交互逻辑、样式和组件来提升用户体验和数据展示效果。

相关实践学习
基于Hologres轻松玩转一站式实时仓库
本场景介绍如何利用阿里云MaxCompute、实时计算Flink和交互式分析服务Hologres开发离线、实时数据融合分析的数据大屏应用。
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3&nbsp;)前置知识要求 &nbsp; 课程大纲 第一章&nbsp;了解数据仓库概念 初步了解数据仓库是干什么的 第二章&nbsp;按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章&nbsp;数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章&nbsp;采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章&nbsp;用户行为数据仓库 严格按照企业的标准开发 第六章&nbsp;搭建业务数仓理论基础和对表的分类同步 第七章&nbsp;业务数仓的搭建&nbsp; 业务行为数仓效果图&nbsp;&nbsp;
相关文章
|
7天前
|
监控 JavaScript 前端开发
使用Vue.js开发员工上网行为监控的实时数据展示页面
使用Vue.js开发的实时员工上网行为监控页面,展示员工访问的网站、应用和时间等数据。页面响应式设计,适应不同设备。通过Vue组件显示实时数据,如`&lt;li v-for=&quot;activity in activities&quot;&gt;`循环渲染。数据定时更新,利用Vue的生命周期钩子和axios从服务器获取并自动刷新,确保数据的时效性。该页面有助于管理者即时了解员工网络活动,保障企业网络安全和资源管理。
41 5
|
2天前
|
JavaScript
|
3天前
|
存储 JavaScript API
Vue状态管理深度剖析:Vuex vs Pinia —— 从原理到实践的全面对比
Vue状态管理深度剖析:Vuex vs Pinia —— 从原理到实践的全面对比
11 2
|
5天前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
60 7
使用 Vue CLI 脚手架生成 Vue 项目
|
6天前
|
JavaScript 算法
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
8 1
|
6天前
|
JavaScript
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
15 1
|
8天前
|
JavaScript 前端开发 Java
【vue实战项目】通用管理系统:作业列表
【vue实战项目】通用管理系统:作业列表
22 0
|
8天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
23 2
|
JavaScript
vue实战中的一些技巧《一》
vue实战中的一些技巧《一》
776 0
vue实战中的一些技巧《一》
|
14天前
|
JavaScript 前端开发 开发者
vue3+ts配置跨域报错问题解决:> newpro2@0.1.0 serve > vue-cli-service serve ERROR Invalid options in vue.
【6月更文挑战第3天】在 Vue CLI 项目中遇到 &quot;ERROR Invalid options in vue.config.js: ‘server’ is not allowed&quot; 错误是因为尝试在 `vue.config.js` 中使用不被支持的 `server` 选项。正确配置开发服务器(如代理)应使用 `devServer` 对象,例如设置代理到 `http://xxx.com/`: ```javascript module.exports = { devServer: {
25 1