通知接口

xiangpei

2024-04-07 b2ef755893a694ea07b7ca2f46e4571bbc8e9cb9

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

@@ -1,61 +1,67 @@
<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"
          :routerPath="item.routerUrl"></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, routerUrl: '/car/vehicle-data-monitor/index' },
        { id: 2, name: '一机一档合格率', value: 20, routerUrl: '/car/vehicle-data-monitor/index' },
        { id: 3, name: '档案考核比', value: 60, routerUrl: '/car/vehicle-data-monitor/index' },
        { id: 4, name: '点位在线率', value: 40, routerUrl: '/car/vehicle-data-monitor/index' },
        { id: 5, name: '录像可用率', value: 80, routerUrl: '/car/vehicle-data-monitor/index' },
        { id: 6, name: '重点点位录像可用率', value: 20, routerUrl: '/car/vehicle-data-monitor/index' },
        { id: 7, name: '信息采集准确率', value: 60, routerUrl: '/car/vehicle-data-monitor/index' },
        { id: 8, name: '车辆过卡口数据一致性', value: 40, routerUrl: '/car/vehicle-data-monitor/index' },

      ]
    }
  },

  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: 180px;
      height: 180px;
    }
  }
}
</style>
</style>