http://echarts.baidu.com/examples.html
作者:雷子(QQ:952943386)【就是拿百度柱形图js框架改写的,其实就是copy过来,再改改啦~~~】
<script type="text/javascript">
var dom = document.getElementById("main");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
title: {
text: '测试数据',
subtext: '为单次测试所占的百分比,数据来源于之前测试数据'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#283b56'
}
}
},
legend: {
data:['通过率', '失败率']
},
color:['green', 'red'],
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
show: true,
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
dataZoom: {
show: false,
start: 0,
end: 100
},
xAxis: [
{
type: 'category',
boundaryGap: true,
data: (function (){
var now = document.getElementsByClassName('test_date');
var res = [];
for (var i=0;i<now.length;i++) {
res.push((now[i].innerHTML).substring(0,18) );
}
return res;
})()
},
{
type: 'category',
boundaryGap: true,
data: (function (){
var now = document.getElementsByClassName('test_date');
var res = [];
for (var i=0;i<now.length;i++) {
res.push((now[i].innerHTML).substring(0,18) );
}
return res;
})()
}
],
yAxis: [
{
type: 'value',
scale: true,
name: '',
max: 100,
min: 0,
boundaryGap: [0.5, 0.2]
},
{
type: 'value',
scale: true,
name: '',
max: 100,
min: 0,
boundaryGap: [0.5, 0.2]
}
],
series: [
{
name:'通过率',
type:'bar',
xAxisIndex: 1,
yAxisIndex: 1,
data:(function (){
var res = [];
var data = document.getElementsByClassName('proce');
for (var i=0;i<data.length;i++) {
res.push((data[i].innerHTML)*100);
}
return res;
})()
},
{
name:'失败率',
type:'line',
data:(function (){
var res = [];
var data = document.getElementsByClassName('fail_num');
var test_num=document.getElementsByClassName('test_num');
for (var i=0;i<data.length;i++) {
res.push(parseFloat((data[i].innerHTML)/(test_num[i].innerHTML))*100);
}
return res;
})()
}
]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>