87 lines
2.2 KiB
JavaScript
87 lines
2.2 KiB
JavaScript
import { rotate } from "ol/coordinate";
|
|
|
|
|
|
export default function userBarOption(data) {
|
|
const appList = data.appList.map(item => ({
|
|
...item, appCount: item?.count
|
|
}))
|
|
const webList = data.webList.map(item => ({
|
|
...item, webCount: item?.count
|
|
}))
|
|
const arr = [...appList,...webList]
|
|
const compareLength = appList.length - webList.length;
|
|
// 找出长度大的数组
|
|
const mapArr1 = compareLength >= 0 ? appList : webList;
|
|
// 找出长度小的数组
|
|
const mapArr2 = compareLength < 0 ? appList : webList;
|
|
|
|
const maxY = Math.ceil(Math.max(...arr.map(item => item.count)))
|
|
const minY = Math.floor(Math.min(...arr.map(item => item.count)))
|
|
const result = mapArr1.map(item => {
|
|
let filterData = mapArr2.find(o => item.name == o.name)
|
|
return {
|
|
...item,
|
|
...filterData,
|
|
}
|
|
})
|
|
return {
|
|
grid: {
|
|
top: "15%",
|
|
bottom:"20%"
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
},
|
|
legend: {
|
|
show:true
|
|
},
|
|
|
|
calculable: true,
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
axisLabel:{
|
|
interval:0,
|
|
rotate:15
|
|
},
|
|
data:result.map(item => item.name),
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
name:"访问次数",
|
|
min:minY - 1,
|
|
max:maxY + 1,
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "WEB端",
|
|
type: "bar",
|
|
barWidth:"13%",
|
|
itemStyle: {
|
|
color:"#357efe"
|
|
},
|
|
data:result.map(item => item?.webCount || 0),
|
|
},
|
|
{
|
|
name: "移动端",
|
|
type: "bar",
|
|
barWidth:"13%",
|
|
|
|
itemStyle: {
|
|
color:"#62dffe"
|
|
},
|
|
data:result.map(item => item?.appCount || 0),
|
|
},
|
|
],
|
|
}
|
|
} |