第三张明显是用的背景图，

两种方式可以实现：

①使用html标签自定义进度条效果，参考：图形化显示数据(进度条/等级)-http://help.finereport.com/doc-view-366.html

"

②使用条形图实现，去掉不必要的元素，设置系列间隔为-100（即重叠），其中一个系列设置成一样的数据用于显示底部背景

js实现根据色系变色

var obj =${".x-table tr"};

var _length=_obj.length;

debugger;

for(var i=0;i<_length;i++)

{

var _td=obj_eq(i).find("td").eq();

debugger;

var txt=_td.text();

_td.css("background-color",txt);

}

----------------------------华丽分割线

var status = $('td[id^=F2-]').text();

js实现自定义按钮全屏显示

var docEIm=doucument.document.documentEL

--现阶段用的进度条

"

"

--第一个C4指的是进度条左侧的进度，第二个100-C4指的是右侧空白的进度

最后面的指的是显示的数字。

之前整理的资料，你可以看看

或者限麻烦的话，，直接去下个插件也行

或者你选一个百分比堆积条形图，获取单元格的数据就可以实现