Merge remote-tracking branch 'origin/master'

xiangpei

2024-03-19 5309f0aae4dc789cee92a8d7de4985c22d6ce259

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

@@ -1,61 +1,68 @@
<template>
  <div class="chart-container">
    <div class="rank-chart" ref="rankChart"></div>
    <div class="rank-chart">
      <div class="hola-item" v-for="item in dataList" :key="item.id">
        <examine-hola :startColor="'#02C77E'" :endColor="'#017770'" :centerValue="item.value"
          :bottomTitle="item.name"></examine-hola>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import ExamineHola from './examine-hola.vue';
let barChart = null;
export default {
  name: 'ExamineChart',
  components: {
    ExamineHola
  },
  data() {
    return {

      dataList: [
        {id: 1,name: '平台在线率', value: 60},
        {id: 2,name: '一机一档合格率', value: 20},
        {id: 3,name: '档案考核比', value: 60},
        {id: 4,name: '点位在线率', value: 40},
        {id: 5,name: '录像可用率', value: 80},
        {id: 6,name: '重点点位录像可用率', value: 20},
        {id: 7,name: '一机一档合格率', value: 60},
        {id: 8,name: '卡门过车数据一致性', value: 40},
        
      ]
    }
  },

  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;
  height: 100%;

  .rank-chart {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: space-between;
    padding: 20px 0;
    box-sizing: border-box;

    .hola-item {
      flex-shrink: 0;
      width: 240px;
      height: 200px;
      color: #008000
    }
  }
}
</style>