#

Junjie

2024-09-25 f7a5fb8c05a7ed70ee96043481fc074cdd9b0e51

 zy-asrs-admin/src/views/HomeView.vue

@@ -1,6 +1,140 @@
<script setup>
import { getCurrentInstance, ref } from 'vue';
import { getCurrentInstance, ref, onMounted } from 'vue';
import { get, post } from '@/utils/request.js'
import * as echarts from "echarts";
const context = getCurrentInstance()?.appContext.config.globalProperties;

let chartPie = null;
const chartPieContainer = ref(null);
let chartLine = null;
const chartLineContainer = ref(null);

function getPieOptions() {
  post('/api/charts/loc/use', {}).then(resp => {
    let result = resp.data;
    if (result.code == 200) {
      let data = result.data;

      let pieOptions = {
        title: {
          text: '库位使用比例',
          left: 'center',
          top: '0%'
        },
        tooltip: {
          trigger: 'item',
          top: '0%'
        },
        grid: {
          top: '0%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        // legend: {
        //   orient: 'vertical',
        //   left: 'left'
        // },
        series: [
          {
            type: 'pie',
            radius: '70%',
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      chartPie.setOption(pieOptions);

    }
  })
}

function getLineOptions() {
  post('/api/charts/loc/line', {}).then(resp => {
    let result = resp.data;
    if (result.code == 200) {
      let data = result.data;

      let lineOptions = {
        title: {
          text: '日出入库数量',
          left: 'center',
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['入库数量', '出库数量'],
          top: '10%'
        },
        grid: {
          top: '20%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: data.days
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '入库数量',
            type: 'line',
            data: data.in.value,
            smooth: true
          },
          {
            name: '出库数量',
            type: 'line',
            data: data.out.value,
            smooth: true
          }
        ]
      }

      console.log(lineOptions);
      
      chartLine.setOption(lineOptions);

    }
  })
}

function initChart() {
  chartPie = echarts.init(chartPieContainer.value);
  chartPie.setOption({
    type: Object,
    required: true
  })

  chartLine = echarts.init(chartLineContainer.value);
  chartLine.setOption({
    type: Object,
    required: true
  })
}

onMounted(() => {
  initChart()
  getPieOptions()
  getLineOptions()
})

</script>

<script>
@@ -10,5 +144,9 @@
</script>

<template>
  Hello World
  <div style="display: flex;">
    <div ref="chartPieContainer" style="width: 49%;height: 400px;"></div>
    <div ref="chartLineContainer" style="width: 49%;height: 400px;"></div>
    <!-- <EChartView ref="chartChild2" /> -->
  </div>
</template>