数据可视化

原创 已于 2023-01-05 20:02:22 修改 · 188 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

于 2023-01-01 20:02:48 首次发布
文章探讨了HTML5的Canvas标签及其坐标系统，展示了如何绘制矩形和清除区域。同时，提到了Canvas与SVG的区别，SVG作为矢量图在缩放时不失真。文章还通过Echarts的示例说明了在Web开发中的数据可视化应用，并讨论了在Vue或React组件中使用Echarts的注意事项。最后，文章深入介绍了多种大屏适配方案，包括使用rem、vw单位和scale函数，以解决不同分辨率下页面布局的问题。

Canvans优缺点

在这里插入图片描述

基本使用

在这里插入图片描述
canvas 标签内部的内容是当前浏览器不兼容才会显示的
getContext(‘2d’)是用来获取上下文的api

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            background-color: rebeccapurple;
        }
    </style>S
</head>

<body>
    <canvas id="canvs" width="200px" height="200px">
        您的浏览器不兼容canvans
    </canvas>
    <script>
        var c = document.querySelector('#canvs')
        let ctx = c.getContext('2d')
        console.log(ctx)
    </script>
</body>

</html>

canvans的坐标系统

在这里插入图片描述

绘制矩形

在这里插入图片描述

使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <canvas id="canvs" width="200px" height="200px">
        您的浏览器不兼容canvans
    </canvas>
    <script>
        var c = document.querySelector('#canvs')
        let ctx = c.getContext('2d')
        //绘制矩形
        ctx.fillRect(0,0,100,100)
        //绘制边框
        ctx.strokeRect(100,100,10,10)
        //清除矩形
        ctx.clearRect(0,0,50,50)
    </script>
</body>

</html>

效果
在这里插入图片描述

svg与canvans的区别

svg缩放不会失真模糊，因为是矢量图，做适配的话用svg
在这里插入图片描述

Echarts

根据官网进行一个demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

</body>

</html>

如果说我们想在vue/react组件中使用，那么我们需要注意要等待组件实例渲染完成再操作dom。

Echarts的渲染原理

在这里插入图片描述
可以在echarts.init()中进行渲染器的切换

options配置

在这里插入图片描述
坐标系配置
在这里插入图片描述
折线图
在这里插入图片描述

大屏适配方案

背景

近期公司投放在展厅大屏中演示的大数据页面，出现了文字、图表、表格等多类组件显示错乱的情况。

目的

解决页面错乱问题，实现多种分辨率的大屏适配

大屏适配方案1 – rem + font-size

动态设置HTML根字体大小 和 body 字体大小,也就是说要在缩放时动态改变HTML根字体大小 和 body 字体大小
我们可以写一个flexible.js来完成，监听onresize 事件
flexible.js

(function flexible(window, document) {
  var docEl = document.documentElement;
  var dpr = window.devicePixelRatio || 1;
  console.log(dpr)
  function setBodyFontSize() {
    if (document.body) {
      // 1.body 字体大小默认为 16px
      document.body.style.fontSize = 16 * dpr + "px";
    } else {
      document.addEventListener("DOMContentLoaded", setBodyFontSize);
    }
  }
  setBodyFontSize();

  // 这里默认平均分成 10 等分(适用移动端)
  function setRemUnit() {
    // 2.这里改成了24，将网页分成 24 等份，这样每个 1rem 对应的为 80px
    // 3.为什么要分成 24份 ？ 目的是让缩放的细腻度更小，比如 0.1rem -> 8px
    var rem = docEl.clientWidth / 24;
    docEl.style.fontSize = rem + "px";
  }

  setRemUnit();

  window.addEventListener("resize", setRemUnit);
  window.addEventListener("pageshow", function (e) {
    if (e.persisted) {
      setRemUnit();
    }
  });

  if (dpr >= 2) {
    var fakeBody = document.createElement("body");
    var testElement = document.createElement("div");
    testElement.style.border = ".5px solid transparent";
    fakeBody.appendChild(testElement);
    docEl.appendChild(fakeBody);
    if (testElement.offsetHeight === 1) {
      docEl.classList.add("hairlines");
    }
    docEl.removeChild(fakeBody);
  }
})(window, document);

假如你的大屏是1920px宽度
 将设计稿的宽（1920）平均分成 24 等份， 每一份为 80px。
 HTML字体大小就设置为 80 px，即1rem = 80px， 24rem = 1920px
 body字体大小设置为 16px。
安装 cssrem 插件， root font size 设置为 80px。这个是px单位转rem的参考值
进入插件设置安装设计稿修改
在这里插入图片描述

 接着就可以按照 1920px * 1080px 的设计稿愉快开发，此时的页面已经是响应式，并且宽高比不变。
我们将代码中的px手动改为rem即可，比如li的字体大小，div的宽高，这些改完后我们进行页面的缩放发现字体大小与宽高都会等比例缩放了
demo

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>

    body {
      margin: 0;
      padding: 0;
    }

    ul {
      margin: 0;
      padding: 0;
    }

    body {
      width: 24rem;
      height: 13.5rem;
      box-sizing: border-box;
      background-color: rgba(255, 0, 0, 0.1);
      border: 3px solid rebeccapurple;
    }

    ul {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      list-style: none;
      width: 100%;
      height: 100%;
    }

    li {
      width: 33.333%;
      height: 50%;
      box-sizing: border-box;
      border: 3px solid green;
      font-size: 0.375rem;
    }
  </style>
</head>

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>

  <script src="../js/lib_flexible.js"></script>
</body>

</html>

大屏适配方案2 - vw

◼ 直接使用vw单位。
 屏幕的宽默认为 100vw，那么100vw = 1920px， 1vw = 19.2px 。
 安装 cssrem 插件， body的宽高（1920px * 1080px）直接把px单位转vw单位
在这里插入图片描述
 接着就可以按照 1920px * 1080px 的设计稿愉快开发，此时的页面已经是响应式，并宽高比不变。
demo

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body,
      ul {
        margin: 0;
        padding: 0;
      }
      body {
        width: 100vw;
        height: 56.25vw;
        box-sizing: border-box;
        border: 2px solid red;
        background-color: rgba(255, 0, 0, 0.1);
      }

      ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        list-style: none;
        width: 100%;
        height: 100%;
      }

      li {
        width: 33.333%;
        height: 50%;
        box-sizing: border-box;
        border: 3px solid green;
        font-size: 1.5625vw;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
  </body>
</html>

大屏适配方案3（推荐） - scale

思路：
动态计算网页宽高比，决定是是否按照宽度的比率进行scale缩放。
demo
transform-origin: left top;代表设置缩放的原点为左上角

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    body,
    ul {
      margin: 0;
      padding: 0;
    }

    body {
      position: relative;
      box-sizing: border-box;
      border: 2px solid red;
      background-color: rgba(255, 0, 0, 0.1);
      transform-origin: left top;
    }

    ul {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      list-style: none;
      width: 100%;
      height: 100%;
    }

    li {
      width: 33.333%;
      height: 50%;
      box-sizing: border-box;
      border: 3px solid green;
      font-size: 30px;
    }
  </style>
</head>

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>

  <script>
    window.onload = function () {
      triggerScale();
      window.addEventListener("resize", function () {
        triggerScale();
      });
    };

    function triggerScale() {
      var targetX = 1920;
      var targetY = 1080;
      var targetRatio = 1920 / 1080;//宽高比率(16/9)
      // 获取html的宽度和高度（不包含滚动条）
      var currentX =
        document.documentElement.clientWidth || document.body.clientWidth;
      var currentY =
        document.documentElement.clientHeight || document.body.clientHeight;
      console.log(currentX, currentY)
      // 1.缩放比例  3840 / 2160 => 2
      var ratio = currentX / targetX;
      var currentRatio = currentX / currentY;
      var transformStr = "";
      //超宽屏,如果还是参照宽度缩放，那么高度会有问题，因为宽高已经不等比了
      if (currentRatio > targetRatio) {
        ratio = currentY / targetY;//参照高度缩放
        //除了缩放，还要进行居中
        transformStr = `width:${targetX}px;height:${targetY}px; transform:scale(${ratio}) translateX(-${targetX / 2
          }px); left:50%;`;
      } else {
        transformStr = `width:${targetX}px;height:${targetY}px; transform:scale(${ratio})`;
      }
      var bodyEl = document.querySelector("body");
      // 2.需要修改缩放的原点
      bodyEl.setAttribute("style", transformStr);
    }
  </script>
</body>

</html>

具体可以在app.vue的onMounted函数中通过节流执行这个函数
我们可以封装一个hook
useScalePage.js

import { onMounted, onUnmounted } from "vue";
import _ from "lodash";

export default function useScalePage() {
  let resizeChange = _.throttle(function () {
    triggerScale();
  }, 100);

  onMounted(function () {
    triggerScale();
    window.addEventListener("resize", resizeChange);
  });

  onUnmounted(function () {
    console.log("useScale onUnmounted");
    window.removeEventListener("resize", resizeChange);
  });

  function triggerScale(option = {}) {
    let targetX = option.targetX || 1920;
    let targetY = option.targetY || 1080;
    let targetRatio = option.targetRatio || 16 / 9;

    // 1.拿到当前屏幕的宽高
    let currentX =
      document.documentElement.clientWidth || document.body.clientWidth;
    let currentY =
      document.documentElement.clientHeight || document.body.clientHeight;

    // 2.计算缩放的比例
    let scaleRatio = currentX / targetX;

    // 当前的屏幕宽高比
    let currentRatio = currentX / currentY;
    if (currentRatio > targetRatio) {
      scaleRatio = currentY / targetY;
      // 3.设置缩放( 类似图片放大 )
      document.body.setAttribute(
        "style",
        `width:${targetX}px;height:${targetY}px;transform: scale(${scaleRatio})  translateX(-50%); left:50%`
      );
    } else {
      // 3.设置缩放( 类似图片放大 )
      document.body.setAttribute(
        "style",
        `width:${targetX}px;height:${targetY}px;transform: scale(${scaleRatio})`
      );
    }
  }
}

app.vue
在这里插入图片描述

三种适配方案的对比

在这里插入图片描述

Clavin.
关注
Echarts大屏数据可视化集合数据可视化集合案例源码 .zip
05-22
Echarts的大屏数据可视化集合数据可视化集合案例源码，包含会议展览、业务监控、风险预警、数据分析展示等多种展示需求可视化集合。（75+24套）数据可视化集合，75套数据可视化源码，24套数据可视化源码。Echarts的...
数据可视化课程设计大作业echarts特种设备综合监管数据可视化大屏源码.zip
06-17
数据可视化大屏课程设计大作业echarts特种设备综合监管数据可视化大屏源码数据可视化大屏课程设计大作业echarts特种设备综合监管数据可视化大屏源码数据可视化大屏课程设计大作业echarts特种设备综合监管数据可视化...
Canvans （一）初识
sinat_37138973的博客
01-20 2873
介绍 <canvas>元素用来绘制2D图形（可以通过改变位置实现伪3D效果，WebGL 使用了基于OpenGL ES的3D上下文）。 Canvas 的默认大小为300像素×150像素（宽×高，像素的单位是px，可以修改）。 <canvas id="tutorial" width="150" height="150"></canvas> canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。 var canvas = docume
关于canvas的使用（超详细的canvas知识体系讲解）
adminsir0的博客
06-07 1万+
canvas,js特效，图形绘制，路径绘制，图片绘制，动画效果，贝塞尔曲线
元素「宽高比」完美适配的方案
weixin_52648900的博客
12-03 2347
使用 CSS 和 JavaScript 方式实现页面的响应式布局，内容区域的尺寸始终保持指定的比例，跟随页面变化而变化。
宽高比例计算实现自适应屏幕
a_strong_pig的博客
12-06 521
通过宽高比+缩放进行页面自适应布局。
Canvas详解
热门推荐
发果叁
05-23 4万+
一、canvas 简介 1.1 什么是 canvas？（了解） 是 HTML5 提供的一种新标签 <canvas></canvas> 英 ['kænvəs] 美 ['kænvəs] 帆布 画布 Canvas 是一个矩形区域的画布，可以用 JavaScript 在上面绘画。控制其每一个像素。 canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 HTML5 之前的 web 页
100套数据可视化html模板
11-07
在当今信息化高速发展的时代，数据可视化作为一种将大量复杂数据转换为图形或图像的技术，已经成为数据分析和展示的重要工具。数据可视化不仅仅是对数据进行简单的图表绘制，它通过各种视觉元素，如颜色、形状、大小...
数据可视化平台源码和资料
04-10
数据可视化平台 技术支持：SSH框架，R语言,Echarts,D3 主要功能：上传数据集、数据源格式转换、数据清洗、数据统计、聚类、关联、决策树、社会网络可视化 数据可视化平台是一款集数据处理与可视化展示于一体的...
25套-Echarts大屏HTML源码-数据可视化展板模板.zip
06-19
在数字时代，数据可视化已成为沟通信息、洞察趋势的关键工具。为此，我们精心整理了一系列多套Echarts大屏HTML源码，旨在为您提供前沿的数据可视化展板模板。 这些源码基于强大的Echarts图表库，结合HTML前端技术，...
用canvans绘制地图的运动轨迹
07-08
用canvans绘制地图的运动轨迹 如何在地图上实现点的运动
Android绘图篇(一)——Canvans基本操作
huxin1875的博客
03-14 5092
前言：Canvans，是Android绘图机制的核心api，可以绘制出矩形、圆形、贝塞尔曲线、路径、文字等等各种图形，在Android的自定义View中需要大量用到这个类。现实生活中，我们在纸上画出一幅画，需要三样东西：画笔、画板、纸张。而Canvans就相当于画板，至于为什么不是纸张，咱们后面再说~ Paint Paint，画笔，绘图三要素之一。常用api如下： //初始化画笔 ...
Canvas[详解] —— 一篇教你学会Canvas和如何快速绘制图形
Lan_0316的博客
04-20 1万+
Canvas是HTML5中的一个标签，用于在网页上动态生成图像和图形。
前端可视化——Canvas
mapbar_front的博客
03-12 1万+
Canvas 基本使用 <canvas id="tutorial" width="300" height="300"></canvas> 1、canvas元素替换内容。 使用文本的方式 <canvas>你的浏览器不支持 canvas，请升级你的浏览器。</canvas> 使用图片的方式 <canvas><img src=...
html5 canvas 学习笔记
amberla的博客
09-24 457
getContext("2d")  对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 fillStyle属性可以是CSS颜色，渐变，或图案 fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。 实例： var c=document.getElementById("myCanvas"); var ctx=c.g
Canvas的基本介绍与使用，图解+案例带你快速上手Canvas
~~~
09-16 6426
Canvas的基本介绍与使用，图解+案例带你快速上手Canvas
一般使用Canvans 的常规操作
hfdxmz_3的博客
04-26 1164
canvas标签类似img，可以设置 width 属性和 height 属性，如果没有设置，canvas 画布的默认宽高是 300 * 150。下面来介绍一些 canvas 的常规操作吧. 1. 使用 canvas 画一个矩形 代码如下 <canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3...
canvans画布随机生成圆圈
weixin_45847765的博客
06-29 518
canvas实现随机落点
Canvas 从入门到上头：手把手带你玩转浏览器绘图
最新发布
Frankabcdefgh的博客
05-05 3923
想用代码画出炫酷动画？Canvas 是你的最佳选择！本文从零开始，带你掌握 Canvas 核心技能：绘制基础图形、添加动态效果、实现用户交互。你将学会如何用几行代码创建流畅动画，优化渲染性能，甚至开发简单小游戏。无论你是前端新手还是想提升图形技能，这篇教程都能让你快速上手。跟着实战示例，一起解锁网页动态绘图的魔力，让你的作品从静态页面跃升为互动体验！
Echarts数据可视化demo展示
资源摘要信息: "大数据可视化页面demo.zip" 是一组包含了五个示例文件的压缩包，这些文件演示了如何使用 ECharts 库来实现数据可视化。ECharts 是一个使用 JavaScript 实现的开源可视化库，它可以在网页上创建丰富的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值