<!DOCTYPE html>
<html style="height: 100%;width: 100%;">
<head>
<meta charset="utf-8">
<title>规定echarts图表的站用面积</title>
</head>
<body>
<div id="container" style="height:80%;width:100%;"></div>
</body>
//echarts图表初始化
var MyChart = echarts.init(document.getElementById('container'));
//option里为echarts的图表结构
var option = {
title:{
text:'人均记录时长',
},
color: ['#0086d0'],
backgroundColor: '#fff',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function (objs, index) {
let obj = objs[0];
return `${obj.name}<br/>${obj.marker}${obj.seriesName} : ${obj.value}%`;
},
},
grid: {
top: '3%',
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
data: [],
interval: 20,
min: 0,
max: 500,
splitLine: {
lineStyle: {
type: 'dashed'
}
},
axisLine: {
show: false,
lineStyle: {
color: '#909396',
}
},
axisLabel: {
formatter: function (value, index) {
return value + '%';
},
color: '#303439'
},
axisTick: {
show: false,
}
},
yAxis: {
type: 'category',
boundaryGap: true,
splitArea: {
areaStyle: {
opacity: 0
}
},
axisLine: {
lineStyle: {
color: '#909396',
}
},
data: []
},
series: [
{
name: 'Scoring Attributes',
barMaxWidth: 20,
type: 'bar',
data: [
{
value: 10,
itemStyle: {
color: '#0086d0',
}
},
{
value: 20,
itemStyle: {
color: '#6fccff',
}
},
{
value: 40,
itemStyle: {
color: '#0086d0',
}
},
{
value: 60,
itemStyle: {
color: '#6fccff',
}
},
{
value: 70,
itemStyle: {
color: '#0086d0',
}
},
{
value: 80,
itemStyle: {
color: '#6fccff',
}
},
{
value: 90,
itemStyle: {
color: '#0086d0',
}
},
{
value: 100,
itemStyle: {
color: '#6fccff',
}
},
{
value: 100,
itemStyle: {
color: '#6fccff',
}
},
{
value: 100,
itemStyle: {
color: '#6fccff',
}
},
]
},
]
};
//图表赋值
MyChart.setOption(option);
//在页面下需要加载的方法
function getAvgTime(){
//数组清空上次加载的数据,防止重复加载
namelist=[];
avghour=[];
//ajax后台请求
postHttp(baseUrl+"/tm/query/getDepartmentQuery",JSON.stringify(params),function(res){
for(var i=0;i<res.avgTimedata.length;i++){
namelist.push(res.avgTimedata[i].org_name);
avghour.push(res.avgTimedata[i].avg_hour);
}
//echarts图表异步加载更新
MyChart.setOption({
yAxis: {
data: namelist
},
xAxis: {
data: avghour,
},
series: [{
name: '人均记录时长',
data: avghour
}]
})
});
}