<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 700px;height: 500px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("main"));
// 計(jì)算百分比數(shù)據(jù)
var rec = [0.7, 0.73, 0.80, 0.82, 0.90, 0.91, 0.92, 0.93, 0.98, 1];
var res = [];
for(var i in rec){
res.push(rec[i] * 100);
};
// 獲取X軸數(shù)據(jù)
var data_xaxis = ['導(dǎo)入收費(fèi)信息',
'Start Tenant...',
'病例',
'刷全部診所...',
'更新病例匯...',
'導(dǎo)入預(yù)約模塊',
'導(dǎo)入患者',
'隨訪',
'新增患者家...',
'修正患者聯(lián)...'];
// 獲取左側(cè)Y軸數(shù)據(jù)(分鐘)
var data_yaxis_left = [1380, 300, 198, 120, 115,
78, 75, 56, 56, 48];
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#283b56'
}
}
},
legend: {
data: ['分鐘', '百分比']
},
dataZoom: {
show: false,
start: 0,
end: 100
},
xAxis: [{
type: 'category',
boundaryGap: true,
data: data_xaxis,
axisLabel:{
rotate: 45,
interval: 0,
margin:5
}
}, {
type: 'category',
boundaryGap: true,
data: []
}],
yAxis: [{
type: 'value',
scale: true,
name: '分鐘',
max: 1500,
min: 0,
boundaryGap: [0.2, 0.2],
}, {
axisLabel: {
formatter: function(value){
return value + '%';
}
},
type: 'value',
scale: true,
name: '耗時(shí)占比',
max: 100,
min: 0,
boundaryGap: [0.2, 0.2]
}],
series: [{
name: '分鐘',
type: 'bar',
xAxisIndex: 0,
yAxisIndex: 0,
data: data_yaxis_left
}, {
name: '百分比',
yAxisIndex: 1,
data: res,
type: 'line',
smooth: true
}]
};
myChart.setOption(option);
</script>
</body>
</html>
pareto
