可视化数据大屏项目总结

REM

这个项目有一堆chart,所以最重要的就是尺寸比例。设计图中的尺寸为2420px*1361px,为16:9的比例，我们页面内容应该保持16：9的比例。当屏幕的尺寸比例大于16/9时，内容宽度为屏幕宽度，当屏幕比例小于16/9时内容长度为屏幕长度。

而且页面中所有的尺寸都应该是相对于屏幕的尺寸，或随着根元素的尺寸变化而变化。这就引入了REM的方法，渲染前获得页面尺寸，将html的font-size设置为屏幕宽度的百分之一，这样就可以使用rem单位了。

<script>
    // index.html 的 head 标签中
    const clientWidth = document.documentElement.clientWidth
    const clientHeight = document.documentElement.clientHeight
    // 声明为全局变量，方便各组件使用
    window.pageWidth = clientWidth / clientHeight > 16 / 9 ? clientHeight * (16 / 9) : clientWidth
    const pageHeight = pageWidth / (16 / 9)
    const string = `<style>html{
      font-size: ${pageWidth / 100}px
    }</style>`
    document.write(string)
  </script>

为了方便我们开发，还可以声明一个将像素转换为rem的函数，这样开发中可以使用像素的值px(n)

// _helper.scss
@function px($n){
  @return $n / 2420 * 100rem;
}

神奇的css--box-shadow

神奇的css,利用box-shadow竟然可以做出三色边框!

xxx {
    border: 1px solid #0764bc;
    border-radius: 4px;
    position: relative;
    box-shadow: 0 0 2px 0 #0e325f, inset 0 0 2px 0 #0e325f;
    &::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        border-radius: 4px;
        box-shadow: 17px 0 0 -16px #0e325f,
        -17px 0 0 -16px #0e325f,
        0 17px 0 -16px #0e325f,
        0 -17px 0 -16px #0e325f,
        9px 0 0 -8px #0d4483,
        -9px 0 0 -8px #0d4483,
        0 9px 0 -8px #0d4483,
        0 -9px 0 -8px #0d4483,;
        /* 不妨碍下层元素的鼠标事件 */
        pointer-events: none;
    }
}

查ECharts文档

ECharts的文档很很贴心,容易上手。找功能先去术语速查手册 查术语，快速了解功能名称，直接定位到配置项手册

渐变色

给柱子添加渐变色

itemStyle: {
    normal: {
      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
        offset: 0,
        color: '#b92ae8'
      }, {
        offset: 1,
        color: '#6773e7'
      }]),
    }
}