开发笔记一

1.关于时间。

项目中很多地方很多时候都会涉及到时间的概念，而对于时间，前端需要显示具体时间，后端处理和存库往往是时间戳。这些接触开发的初期就会用到。

最基础的，后端返回时间后前端获取：new Date(timeString).toLocaleString()--转化为年月日时分秒的格式；其中如果timeString不填则默认取的是系统当前时间；

24小时制：上边获取到默认是12小时制，转化为24小时：new Date(timeString).toLocaleString('chinese', { hour12: false })；

ISO时间：new Date(timeString).toISOString();改方法获取到的时间可以作为new Date的参数再次转化；

获取时间戳：new Date(timeString).getTime()；

其余还有很多，比如getYear等，也可以使用这些方法进行自定义生成一些时间格式；需要注意的是，获取到的月份是比实际要小1的,new Date(timeString).getMonth()，所有在用的时候需要加1才是正确的月份，这是因为月份是从0开始计算的。

 

2.栅格化样式。

这是一个页面排版的概念，简单来说就是将页面宽度分为12等分。这个概念在很多前端框架都有使用，比如element-ui，layui，bootstrap。他们对应的写法类似，比如bootstrap的col-sm-4 col-md-4 ，layui的layui-col-sm-4 layui-col-md-4 ；

相关联使用的就是container容器，必须包含在容器中才有效，row，行样式；

 

3.echarts的一些需要注意的地方。

restore()还原

clear()清空

dispose()销毁

refresh()

getImage(string imgType)获取一个当前图表的img，imgType 图片类型，支持png|jpeg，默认为png，示例代码片段

getDataURL(string imgType)获取当前图表的Base64图片dataURL，imgType 图片类型，支持png|jpeg，默认为png

getZrender()获取当前图表所用ZRender实例，可用于添加额外图形或进行深度定制

showLoading(Object loadingOption)

hideLoading()

on(string eventName,function eventListner)事件绑定

un(string eventName,function eventListner)事件解绑

addData(....)

getSeries()

setSeries(Array series,{boolean=}notMerge)

getOption()

setOption(Object option,{boolean = true} notMerge)

 

关于图例：图例是按照data中的name进行匹配的，所有如果进行了name的定制fomatter，图例可能会无法渲染，当然也可以进行图例的定制；

关于环形图：中间的文字，除了可以在对应的echarts原生方法中重写之外，还可以额外添加graphic：

graphic:{  
                         type:'text',  
                         left:'center',  
                         top:'center',  
                         z:1,  
                         zlevel:100,  
                         style:{  
                            text: data.data.questionCount+'\n\n题目总数',  
                            x:100,  
                            y:100,  
                            textAlign:'center',  
                            fill:'black',  
                            fontSize:'50',
                            fontWeight: 'bold'
                         }  
                     }

对于饼图，如果设置了label，会导致指示线不显示；

 

echarts的功能很丰富，属性也很复杂，想要绘制高端大气的图表，还是需要一定的使用经验的。