// 数据
let data = [
{ORG_CODE: "103", ORG_NAME: "CCS-Turbo", LOGINUSERCOUNT: 1, USER_QTY: 47},
{ORG_CODE: "102", ORG_NAME: "CCS-FS", LOGINUSERCOUNT: 1, USER_QTY: 31},
{ORG_CODE: "104", ORG_NAME: "CES", LOGINUSERCOUNT: 0, USER_QTY: 15},
{ORG_CODE: "105", ORG_NAME: "CPGC", LOGINUSERCOUNT: 0, USER_QTY: 5}
];
// X轴坐标(机构名称)
let orgNames = data.map(function(item) { return item.ORG_NAME; });
// 登录用户数量
let loginUserCounts = data.map(function(item) { return item.LOGINUSERCOUNT; });
// 用户总数
let userQty = data.map(function(item) { return item.USER_QTY; });
// ECharts 配置项
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
left: 'left',
data: ['使用人数', '用户总数']
},
xAxis: {
type: 'category',
data: orgNames,
axisPointer: {
type: 'shadow'
},
},
yAxis: {
type: 'value'
},
series: [
{
name: '使用人数',
type: 'bar',
data: loginUserCounts,
barMaxWidth: 60,
itemStyle: {
normal: {
color: '#1f77b4',
barBorderRadius: [10, 10, 0, 0]
}
},
markPoint: {
data: loginUserCounts.map(function(val, index) {
return {
name: '使用人数',
coord: [orgNames[index], val],
value: val,
label: {
show: true,
formatter: '{c}'
}
};
})
}
},
{
name: '用户总数',
type: 'bar',
data: userQty,
barMaxWidth: 60,
itemStyle: {
normal: {
color: '#ff7f0e',
barBorderRadius: [10, 10, 0, 0]
}
},
markPoint: {
data: userQty.map(function(val, index) {
return {
name: '用户总数',
coord: [orgNames[index], val],
value: val,
label: {
show: true,
formatter: '{c}'
}
};
})
}
}
]
};