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),
            },
          ],
    }
}