用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要根据新的尺寸重新渲染，来实现屏幕适配。

1. 用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的图，然后看下效果，完美！