bigScreen/src/views/pageOperation/leftBottom/index.vue

<template>
  <div class="leftBottom">
    <dv-border-box-13>
      <dv-charts :option="option"></dv-charts>
    </dv-border-box-13>
  </div>
</template>

<script>
export default {
  data() {
    return {
      option: {
        grid: {
          left: '18%',
        },
        xAxis: {
          type: 'category',
          data: ['3月', '4月', '5月', '6月', '7月', '8月'],
          axisLabel: {
            style: {
              stroke: '#fff',
              fontSize: 14,
            },
          },
        },
        yAxis: {
          type: 'value',
          data: 'value',
          max: 100,
          min: 0,
          axisLabel: {
            formatter: '{value}%',
            style: {
              stroke: '#fff',
              fontSize: 14,
            },
          },
        },
        series: [
          {
            type: 'line',
            data: [92, 89, 96, 98, 95, 95],
            label: {
              show: true,
              position: 'top',
              formatter: '{value}%',
              style: {
                stroke: '#fff',
                fontSize: 14,
              },
            },
          },
        ],
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.leftBottom {
  height: 39%;
}
</style>