视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
docloud后台管理项目(前端篇)-无痕、
2020-11-27 16:43:56 责编:小采
文档

  以下内容与主题无关,如果不想看可以直接忽视

  !--忽视开始--!

  给大家推荐一款强大的编辑器,那就是集响应快、体验好、逼格高、功能丰富为一体的sublime text 3。它除了以上特点,还有一个最重要的功能:方便快捷的插件扩展,支持大量插件而且均支持命令行安装,只要一条简单的命令就可以完成插件的安装。想要提高开发效率,sublime是一个很好的选择!

  !--忽视结束--!

  以下为项目开发时遇到的问题或者学习到的前端技术:

  

  1、height:100%设置无效

  解决方法:html,body{margin:0;height:100%}

  2、div居中

  解决方法:

    两种方案

    1、第一种情况,div宽度固定的情况下,给div设置width,然后margin:0 auto;

    2、第二种情况,div宽度不固定或者说不想给div加宽度,给div设置display:inline-block;然后给他的父元素加上text-align:center;

  3、纯css实现奇偶行

    解决方法:

      使用css的:nth-child(odd)选择器就可以了:tr:nth-child(odd){background-color: #eee}

  4、css内进行简单运算

    解决方法:

      使用calc函数:th{width: calc(100%/7);}

  5、遍历js对象

    解决方法:

      for (var k in jsObj) {

        console.info("key:" + k + ",value:" + jsObj[k]);

      }

  6、解决ie Date.getTime兼容性问题

    解决方法:

      由于ie不兼容 yyyy-mm-dd的日期格式,所以把“-”替换为“/”就可以解决问题

    function getTime(dateStr){
      dateStr = dateStr.replace("-", "/");
      return Date.parse(dateStr);
    }

  

  由于是数据分析的后台,所以用到了图表,我所采用的插件是highcharts,一下是使用highcharts的一点经验:

  

  为了方便数据的修改和呈现,一般定义一个全局的参数

  

//图表参数
var chart = {
 chart: {
 zoomType: 'x',
 spacingRight: 20
 },
 title: {
 text: '曲线图'
 },
 xAxis: {
 type: 'datetime',
 title: {
 text: '时间'
 },
 dateTimeLabelFormats: {
 second: '%H:%M:%s',
 minute: '%d日 %H:%M',
 hour: '%m月%d日%H点',
 day: '%Y年%m月%d',
 week: '%Y-%m-%d',
 month: '%Y年%m月',
 year: '%Y年'
 }
 },
 yAxis: {
 title: {
 text: '体温'
 }
 }
};

  里面的参数都见名知意,就不一一解释了,具体可以看相关文档。这里xAxis 里面的type: 'datetime'表示x轴按照时间显示。

  这是图表初始化方法:

var ser = []; 
var ser = [];
ser[0] = {
 type:'line',
 name: "参数名",
 data: [
 ["X值","Y值"],
 ["X值","Y值"],
 ["X值","Y值"]
 ]
};
chart.series = ser; 
$('#container').highcharts(chart);

  X轴按照时间显示的时候X值应该为时间戳,绑定之前记得对数组进行按X轴升序排序。

下载本文
显示全文
专题