feat:考核成绩柱形图

ZhangXianQiang

2024-03-18 99d0cefca0ba2b3d5a5b07080e21a311348a3d13

feat:考核成绩柱形图

 src/views/screen/components/screen-detection/index.vue

@@ -28,7 +28,7 @@
</template>

<script>
import WrapperTitle from '../wrapper-title/index'
import WrapperTitle from '../wrapper-title/index';
export default {
  components: {
    WrapperTitle

 src/views/screen/components/screen-examine/components/examine-chart.vue

New file
@@ -0,0 +1,61 @@
<template>
  <div class="chart-container">
    <div class="rank-chart" ref="rankChart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
let barChart = null;
export default {
  name: 'ExamineChart',
  data() {
    return {

    }
  },

  methods: {
    initChart() {
      const options = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }
        ]
      }
      barChart.setOption(options,true);
    }
  },
  mounted() {
    barChart = echarts.init(this.$refs.rankChart);

    this.initChart();
  },
  beforeDestroy() {
    if (lineChart) {
      barChart.dispose();
    }
  },

}
</script>

<style lang="scss" scoped>
.chart-container {
  width: 100%;
  height: 400px;
  .rank-chart {
    width: 100%;
    height: 100%;
  }
}
</style>

 src/views/screen/components/screen-examine/index.vue

New file
@@ -0,0 +1,47 @@
<template>
  <div class="examine-container">
    <wrapper-title :title="'考核成绩数据'"></wrapper-title>
    <div class="examine-content">
      <div class="examine-wrapper">
        <examine-chart></examine-chart>
      </div>
    </div>
  </div>
</template>

<script>
import WrapperTitle from '../wrapper-title/index';
import ExamineChart from './components/examine-chart';
export default {
  name: 'ScreenExamine',
  components: {
    WrapperTitle,
    ExamineChart
  }
}

</script>

<style lang="scss" scoped>
.examine-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.examine-content {
  width: 100%;
  flex: 1;
  background: rgba(67, 102, 155, 0.3);
  border: 1px solid rgba(47, 91, 157, 0.8);
  padding: 20px 20px;
  position: relative;
  .examine-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
</style>

 src/views/screen/components/screen-wrapper/index.vue

@@ -8,7 +8,7 @@
        <screen-detection></screen-detection>
      </div>
      <div class="right-container wrapper">

        <screen-examine></screen-examine>
      </div>
    </div>
  </div>
@@ -17,11 +17,13 @@
<script>
import ScreenFace from '../screen-face/index';
import ScreenDetection from '../screen-detection/index';
import ScreenExamine from '../screen-examine/index';
export default {
  name: 'ScreenWrapper',
  components: {
    ScreenFace,
    ScreenDetection
    ScreenDetection,
    ScreenExamine,
  },
}
</script>