今日完成：

  用bootstrap easyui 以及引入highcharts配合json假数据把练习页面写出来了。

明日计划：

调整页面。

遇到的问题：esayui 数据网格中把number值替换成相应的状态图片。

       解决方法：使用esayui中的formatter方法，直接判断单元格的字段的值。返回相应的Html代码。

       代码：

formatter: function (value, row, index) {
    if (row.Usability == 1) {
        return '<img src="images/green.png">';
    } else if (row.Usability == 2) {
        return '<img src="images/yellow.png">';
    } else if (row.Usability == 3) {
        return '<img src="images/red.png">';
    }
}

第二个问题就是：进度条(progressbar),也是用formatter方法但是根据API上面返回 

1. <div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>

并没有效果。

最后在博客园上看到这段代码，才解决掉

 formatter: function (value, row, index) {
                        if (value <= 30) {
                            var htmlstr =
                                '<div  class="easyui-progressbar progressbar  " data-options="value:' + value + '" style="width: 100%; height: 12px;">' +
//                                '<span>' + value + '%</span>'+
//                                '<div class="progressbar-text" style="width: 99%; height: 12px; line-height: 12px;">' + value + '%</div>' +
                                '<div class="progressbar-value1" style="width: ' + value + '%; height: 12px; line-height: 12px;"><p class="progressbar-text1">' + value + '%</p></div>' +

                                '</div>';
                            return htmlstr;

                        } else if (value <= 70) {
                            var htmlstr = '<div class="easyui-progressbar progressbar " data-options="value:' + value + '" style="width: 100%; height: 12px;">' +

                                '<div class="progressbar-value2" style="width: ' + value + '%; height: 12px; line-height: 12px;">' +
                                '<div class="progressbar-text2" style="width: 99%; height: 12px; line-height: 12px;">' + value + '%</div></div>' +
                                '</div>';
                            return htmlstr;

                        } else if (value > 70) {
                            var htmlstr = '<div  class="easyui-progressbar progressbar " data-options="value:' + value + '" style="width: 100%; height: 12px;">' +

                                '<div class="progressbar-value3" style="width: ' + value + '%; height: 12px; line-height: 12px;">' +
                                '<div class="progressbar-text3" style="width: 99%; height: 12px; line-height: 12px;">' + value + '%</div></div>' +
                                '</div>';
                            return htmlstr;

                        }

                    }

虽然解决了，但不知道为什么要这要拼装。

还有就是弄好了还要根据进度值改变颜色。弄了好久。

先想到的第一方法就是，写好拼装的Html，后面跟If判断，最后return 这个片段，最后发现不行。虽然当时改变了，但最后返回的片段时，片段的样式又改回来了。

然后又想获取这个进度条的值。判断这个值，然后再准备改变颜色。因为是返回的html片段，又获取不到这个ID。

最后没办法了，我把片段加在每个判断语句里。然后在返回。这样解决了。

今日收获：

学到了easyui的formatter方法。和progressbar。以及熟悉了highcharts一个图形的最基本的几个属性。