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

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

一、从网上找一个喜欢的图

1.首先大屏要先解决屏幕适配的问题

这里用viewport的方案,使用postcss-px-to-viewport插件,在vue项目里新建postcss.config.js配置一下postcss-px-to-viewport:

module.exports = {
    plugins: {
        // ...
        'postcss-px-to-viewport': {
            viewportWidth: 1920,
            unitPrecision: 1,
        }
    }
}

2.大屏设计

咱自己设计的太丑,所以我从站酷上找了一个看起来还不错的设计图,然后照着图写页面。

怎么样?这个页面的效果还挺好的吧?大家觉得怎么样啊。下面我们完成这个页面。

二、分析一下页面,看看哪些适合做成公用组件

很明显是他,他还有两个变形:

所以,先把这个组件实现一下。

三、实现第一个组件:

  1. 整个面板是透明渐变
  2. 左上角是一个渐变三角形,或者整个左边是个矩形,或者没有
  3. 统一的标题

其他的好说,就是这个三角形渐变繁琐点

1. 如果用div的border实现三角形,可以实现,但是怎么实现渐变色呢?

2. 用canvas画三角形,可行,但是想实现布局响应式,适配不同分辩是不是麻烦点?“postcss-px-to-viewport”会对内联css样式,外联css样式有效,对内嵌css样式,js动态css无效,canvas画东西都是在js里面操作。做适配是不是会很麻烦?

  initPanel(){
      //三角形
      let ctx = this.$refs.sanjiaoxing.getContext("2d");
      //设置渐变色
      let grd =ctx.createLinearGradient(0,0,0,100);
      grd.addColorStop(0,"#51acf7");
      grd.addColorStop(1,"#5adce1");
      ctx.fillStyle=grd;
      ctx.lineWidth=0;
      ctx.beginPath();
      ctx.strokeStyle="";
      ctx.moveTo(0,0);
      ctx.lineTo(0,100);
      ctx.lineTo(120,0);
      ctx.closePath();
      ctx.stroke();
      ctx.fill();
      //图片
      let img = new Image(60,45);
      img.src = require("@/views/activity/assets/书包_#ffffff_128_20117032.png")
      img.onload = function () {
        ctx.drawImage(img,5,5,60,45);
      }
    }

先用canvas写一下这个组件。屏幕尺寸改变了,canvas要根据新的尺寸重新渲染,来实现屏幕适配。

3. 用svg实现三角形,svg本身矢量图可以缩放。

看来最好是用svg

<div class="hezi">
   <div class="background"></div>
     <svg class="svg-2" viewBox="0, 0, 100, 100">
       <defs>
         <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
           <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
           <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
         </linearGradient>
       </defs>
       <path d="M 0 0 l 90 0 l -90 90" fill="url(#grad1)"></path>
     </svg>
     <img class="hezi-icon" src="@/views/环动.svg">
</div>

用svg把三角形画出来,从www.iconfont.cn下载个svg的图,然后看下效果,完美!


相关文章
|
3天前
|
前端开发 JavaScript
Vue底层实现原理总结
Vue底层实现原理总结
|
8天前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
64 7
使用 Vue CLI 脚手架生成 Vue 项目
|
6天前
|
JavaScript
|
6天前
|
存储 JavaScript API
Vue状态管理深度剖析:Vuex vs Pinia —— 从原理到实践的全面对比
Vue状态管理深度剖析:Vuex vs Pinia —— 从原理到实践的全面对比
13 2
|
10天前
|
JavaScript 算法
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
11 1
|
10天前
|
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【已解决】
24 1
|
2天前
|
JavaScript 前端开发
Vue躬行记(7)——渲染函数和JSX
Vue躬行记(7)——渲染函数和JSX
|
JavaScript 数据安全/隐私保护
work02_vue页面打印水印
work02_vue页面打印水印
289 0
work02_vue页面打印水印
|
11天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息录入
【vue实战项目】通用管理系统:信息列表,信息录入
19 3