<!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"));
// 计算百分比数据
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轴数据
var data_xaxis = ['导入收费信息',
'Start Tenant...',
'病例',
'刷全部诊所...',
'更新病例汇...',
'导入预约模块',
'导入患者',
'随访',
'新增患者家...',
'修正患者联...'];
// 获取左侧Y轴数据(分钟)
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: '耗时占比',
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>
echarts-pareto图
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 普通项目中常用的可视化图表,可能也就折线图,柱型图和饼图,如果每次都需要重新配置一遍图表参数,也会很心累,以下是我...
- 天气逐渐炎热,仓库的空调早在前几天就开了起来。很快问题显露,出风口漏水,差点酿成危机,只好找维修队上门解决...