ll

liukangdong

2024-10-25 f9fd7c038b6405a69c5d070febebab0a59eb821b

 screen/src/views/LogisticsEfficiency.vue

@@ -262,59 +262,161 @@
const initEnergy = () => {
  var myChart = echarts.init(document.querySelector('.energyRef'))
  // 绘制图表
  const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a']
  myChart.setOption({
    legend: {
      itemGap: 12,
      // icon: 'circle',
      right: '12px',
      top: '0',
      data: ['总库存', '当前库存', '库存利用率'],
      itemWidth: 20,
      itemHeight: 10,
      textStyle: {
        color: '#fff',
        borderColor: '#fff'
      },
    },
    grid: {
      top: '20%',
      left: '2%',
      right: '2%',
      bottom: '4%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '16%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line'
      },
      trigger: 'axis'
    },
    xAxis: {
    xAxis: [{
      nameGap: 5,
      type: 'category',
      data: [1, 2, 3, 4, 4, 5]
    },
    yAxis: {
      type: 'value',
      name: 'kw·h',
      nameTextStyle: {
        padding: [0, 0, 4, -30]    // 四个数字分别为上右下左与原位置距离
      },
      splitLine: {
      axisLine: {
        show: true,
        lineStyle: {
          //这里输入线条的样式
          color: 'rgba(255,255,255,0.14)',
        }
          color: '#999'
        },
      },
      axisLabel: {
        color: '#869CC9'
        // fontSize: 24,
      },
      axisTick: {
        show: false,
      },
      data: ['7.1', '7.1', '7.1', '7.1', '7.1'],
    }],
    yAxis: [
      {
        nameTextStyle: {
          color: '#869CC9',
        },
        offset: 0,
        name: '万支',
        type: 'value',
        axisLabel: {
          show: true,
          color: "#869CC9",
        },
        axisLine: {
          show: true,
        },
        splitLine: {
          show: true,
          lineStyle: {
            width: 1,
            color: "rgba(49,105,129,0.4)",
            type: 'dashed'
          }
        },
      },
      {
        type: 'value',
        name: '%',
        min: 0,
        max: 100,
        // interval: 5,
        axisLabel: {
          formatter: '{value}%'
        },
        splitLine: false
      }
    },
    ],
    series: [
      {
        data: [1, 2, 3, 4, 5],
        name: '计划完成数量',
        type: 'bar',
        barWidth: 10,
        barGap: '60%',
        label: {
          show: false,
          position: 'top',
          color: '#fff',
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                { offset: 0, color: arr[1] },
                { offset: 1, color: '#080807' }
              ]
            ),
            barBorderRadius: [10, 10, 0, 0]
          }
        }
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#5bc7d5'
            },
            {
              offset: 1,
              color: '#1a3f55'
            }
          ], false),
          lineStyle: {
            width: 1,
            type: 'solid'
          },
          barBorderRadius: [3, 3, 0, 0],
        },
        data: [900, 438, 485, 631, 689]
      },
      {
        name: '任务完成量',
        type: 'bar',
        barWidth: 10,
        label: {
          show: false,
          position: 'top',
          color: '#fff',
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#edaf3d'
            },
            {
              offset: 1,
              color: '#323522'
            }
          ], false),
          lineStyle: {
            width: 1,
            type: 'solid'
          },
          barBorderRadius: [3, 3, 0, 0],
        },
        data: [438, 485, 631, 689, 900]
      },
      {
        name: '计划任务数',
        type: 'line',
        smooth: false,
        showAllSymbol: true,
        symbol: 'none',
        lineStyle: {
          color: "#1a43bc"
        },
        label: {
          show: false,
          position: 'top',
          color: '#fff',
        },
        data: [485, 631, 389, 224, 287]
      }
    ]
  })

  window.addEventListener('resize', function () {//执行
    myChart.resize()
  })
@@ -772,27 +874,33 @@
          font-size: 14px;
          color: #D2E0FF;
          margin-bottom: 11px;

          .num {
            font-weight: 500;
            font-size: 16px;
            color: #FFFFFF;
          }
        }
        .list{

        .list {
          margin-top: 22px;
          .item{

          .item {
            width: 100%;
            height: 36px;
            display: flex;
            align-items: center;
            &:nth-of-type(2n+1){
              background: rgba(0,152,255,0.13);

            &:nth-of-type(2n+1) {
              background: rgba(0, 152, 255, 0.13);
            }
            .la{

            .la {
              flex: 5;
              padding-left: 20px;
            }
            .val{

            .val {
              flex: 2;
            }
          }
@@ -915,6 +1023,7 @@
  position: relative;
  z-index: -2;
  font-size: 14px;

  .main_bg {
    position: absolute;
    left: 0;