bigScreen/js/lendAcross.js

// var ajaxUrl = 'http://192.168.99.107:7070'
var ajaxUrl = 'http://192.168.1.100:7070'

var chartDom = document.getElementById('chart1');
var myChart = echarts.init(chartDom);
var option;
var lendData = []

var echartsTimer = null
// 每隔一分钟刷新档案借阅和档案类型的数据
echartsTimer = setInterval(() => {
  lendData = []
  option.series[0].data = lendData
  FetchInitBorrowerNumStatistics()
  myChart.setOption(option)
}, 60000)

option = {
  tooltip: {
    trigger: 'item'
  },
  grid: { // 边距
    left: '10%',
    right: '16%',
    bottom: '3%',
    top: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01],
    show: false
  },
  yAxis: {
    type: 'category',
    offset: 20,
    axisLabel: {// 轴文字的配置
      show: true,
      textStyle: {
        color: '#fff',
        fontSize: '14'
      }
    },
    axisLine: {// 轴线的颜色以及宽度
      show: false
    },
    axisTick: {
      show: false
    },
    data: ['异常档案', '逾期档案', '待借档案', '已借档案', '在库档案']
  },
  series: [
    {
      name: '数量',
      type: 'bar',
      barWidth: 15, // 柱图宽度
      barGap: 25,
      showBackground: true,
      backgroundStyle: {
        color: '#02255F',
        barBorderRadius: [0, 10, 10, 0] // 背景圆角
      },
      itemStyle: {
        normal: {
          label: {
            show: true,		// 开启显示
            distance: 20, // 条柱之间的距离
            position: 'right',	// 在上方top在右侧right显示
            textStyle: { // 数值样式
              color: '#fff',
              fontSize: 14
            }
          },
          // 设置柱子圆角
          barBorderRadius: [0, 10, 10, 0],
          color: function (params) {
            var colorList = [
              ['#FF77AA', '#E6236D'],
              ['#FF7A7D', '#FF3438'],
              ['#FBCE9B', '#FF801E'],
              ['#84DFC0', '#0D9D81'],
              ['#5FA2E2', '#1C54EE']
            ]
            var colorItem = colorList[params.dataIndex]
            return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: colorItem[0]
            },
            {
              offset: 1,
              color: colorItem[1]
            }
            ], false)
          }
        }
      },
      data: []
    }
  ]
};

FetchInitBorrowerNumStatistics()
function FetchInitBorrowerNumStatistics(){
  $.ajax({
    url: ajaxUrl+'/api/borrow/initBorrowerNumStatistics',
    type: 'GET',
    data: {},
    success: function (res) {
      if (res.data && res.data.length !== 0) {
        delete res.data.total
        // 固定排序 '在库档案', '已借档案', '待借档案', '逾期档案', '异常档案'
        const borrowerArr = []
        for (const i in res.data) {
          const obj = {}
          obj.name = i
          obj.value = res.data[i]
          if (i === 'inStorage') {
            obj.sequence = 1
          } else if (i === 'borrow') {
            obj.sequence = 2
          } else if (i === 'waitBorrow') {
            obj.sequence = 3
          } else if (i === 'overdue') {
            obj.sequence = 4
          } else if (i === 'abnormal') {
            obj.sequence = 5
          }
          borrowerArr.push(obj)
        }
        arrSortByKey(borrowerArr, 'sequence', false)
        borrowerArr.forEach(item => {
          lendData.push(item.value)
        })
        option.series[0].data = lendData
        myChart.setOption(option)
      } else {
        var str = '<div class="empty-main">'
        +'<i class="empty-img"></i>'
        +'<p>暂无数据</p>'
        +'</div>'
        $("#chart1").html(str)
      }
    },
    error: function (err) {
      console.log(err);
    }
  });
}

if (option && typeof option === "object") {
  myChart.setOption(option, true);
};

function arrSortByKey (array, property, order) {
  return array.sort(function (a, b) {
    const value1 = a[property]
    const value2 = b[property]
    if (order) { // 升序
      return value1 - value2
    } else { // 降序
      return value2 - value1
    }
  })
}