标签: css

前端可视化(ECharts与大屏可视化)

丰富的图表类型

提供开箱即用的 20 多种图表和十几种组件，并且支持各种图表以及组件的任意组合；

强劲的渲染引擎

Canvas、SVG 双引擎一键切换，增量渲染等技术实现千万级数据的流畅交互；

简单易容，上手容易

直接通过编写配置，便可以生成各种图表，并且支持多种集成方式；

活跃的社区

活跃的社区用户保证了项目的健康发展，也贡献了丰富的第三方插件满足不同场景的需求；

zzf2023/6/17大约 37 分钟

前端可视化(SVG)

SVG介绍

SVG 全称为（Scalable Vector Graphics），即可缩放矢量图形。
SVG 是一种基于XML格式的矢量图，主要用于定义二维图形，支持交互和动画。
SVG 规范是万维网联盟(W3C) 自 1998 年以来开发的标准。
SVG 图像可在不损失质量的情况下按比例缩放，并支持压缩。
基于XML的SVG可轻松的用文本编辑器或矢量图形编辑器创建和编辑，并可以直接在浏览器显示。SVG

zzf2023/6/11大约 46 分钟

前端可视化(CSS3D-Canvas)

2D动画transform

常见的函数transform function有：

平移：translate(x, y)
缩放：scale(x, y)
旋转：rotate(deg) 在lineTo前使用
倾斜：skew(deg, deg)
CSS 中的每个元素都有一个坐标系，其原点位于元素的左上角，左上角这被称为初始坐标系。
用transform时，坐标系的原点默认会移动到元素的中心(重点)。
因为transform-origin属性的默认值为50% 50%，即该原点将会作为变换元素的中心点。
用transform属性旋转或倾斜元素，会变换或倾斜元素的坐标系。并且该元素所有后续变换都将基于新坐标系的变换。
因此，transform属性中变换函数的顺序非常重要——不同的顺序会导致不同的变换结果。

zzf2023/6/8大约 25 分钟

杂项知识

文件下载(iframe、a)

const getAwardStudentTemplate = () => {
  exportAwardStudentsList({}).then((res) => {
    if (res.data.Data !== null) {
      const a = document.createElement('a') // a标签导出下载
      a.href = res.data.Data.DownloadUrl
      a.click()
      a.remove()
    }
  })
  getImportFileTemplate({ params: { TabName: 'AwardA' } }).then((res) => {
    if (res.data.Data !== null) {
      let downloadUrl2 = res.data.Data.DownloadUrl
      let iframe = document.createElement('iframe') // iframe导出下载
      iframe.id = 'iframe2'
      iframe.style.display = 'none'
      document.body.appendChild(iframe)
      iframe.src = downloadUrl2
    }
  })
}

zzf2022/9/10大约 43 分钟

CSS记录

css记录

滚动条相关

// 去除横向、竖向滚动条
body {
  overflow-x: hidden;
  overflow-y: hidden;
}
// 给某个div添加滚动条
// 要实现滚动条必须先设置好width和height的限制，超过该范围则出现滚动条
// overflow-x overflow-y  设置为auto、scroll或hidden，对应显示或隐藏滚动条
.content {
    width: 100%;
    height: calc(100% - 49px);
    overflow-x: hidden;
    overflow-y: auto;
    &::-webkit-scrollbar { // 滚动条宽高
        width: 6px; // 不要设置width: 0px;不然会出现莫名的padding
        height: 6px;
        // display: none; // 隐藏滚动条
    }
    &::-webkit-scrollbar-track { // 滚动条轨道样式设置
        box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
        border-radius: 10px;
        background-color: #cccccc;
    }
    &::-webkit-scrollbar-thumb { // 滚动条样式设置
        border-radius: 10px;
        box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
        background-color: rgba(148, 148, 148, 0.5);
    }
}

zzf2022/8/3大约 13 分钟