newcpms/ui/src/views/monitor/elec/echart/bottom/bottomRightChart1.vue

<template>
    <div>
      <div id="bottomRightChart1" style="width:100%;height:2.5rem;">
        <div class="bg-color-black">
        </div>
      </div>
    </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";
export default {
  data() {
    return {
      chart:null
    };
  },
  mixins: [echartMixins],
  mounted() {
    this.draw();
  },
  methods: {
    draw() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.echarts.init(document.getElementById('bottomRightChart1'))

      let Option={
        color: ['#00DDFF', '#37A2FF'],
        tooltip: {
          trigger: 'axis',
          type: 'category',
        },
        /* 标识 */
        legend: {
          data: ['实际', '计划'],
          textStyle:{
            color: '#ffffff'//字体颜色
          }
        },
        /* 周围边距 */
        grid: {
          left: '3%',
          right: '3%',
          bottom: '1%',
          top: '13%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
            axisLabel: {//x轴文字的配置
              show: true,
              textStyle: {
                color: '#ffffff',
              }
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              textStyle: {
                fontSize: 10,
                color: '#ffffffff',
                margin: 15
              },
            }
          }
        ],
        series: [
          {
            name: this.$t('实际'),
            type: 'line',
            symbol: "none",
            data: [20, 32, 1, 34, 90, 30, 20, 20, 32, 1, 34, 90, 40, 10, 20, 82, 11, 34, 20, 30, 10, 20, 82, 11, 34, 20, 40, 10]
          },
          {
            name: this.$t('计划'),
            type: 'line',
            symbol: "none",
            data: [20, 82, 11, 24, 20, 30, 10, 20, 82, 11, 24, 20, 10, 20, 20, 32, 21, 34, 10, 30, 20, 20, 32, 21, 34, 19, 13, 20]
          },
        ]
      };
      this.chart.setOption(Option);
    }
  },
  destroyed() {
    window.onresize = null;
  }
};


</script>

<style lang="scss" scoped>
#bottomRight1 {
  padding: 0.2rem 0.2rem 0;
  height: 6.5rem;
  min-width: 3.75rem;
  border-radius: 0.0625rem;
  .bg-color-black {
    height: 6.1875rem;
    border-radius: 0.125rem;
  }
  .text {
    color: #c3cbde;
  } //下滑线动态
  .decoration2 {
    position: absolute;
    right: 0.125rem;
  }
  .chart-box {
    margin-top: 0.2rem;
    width: 2.125rem;
    height: 2.125rem;
    .active-ring-name {
      padding-top: 0.125rem;
    }
  }
  .naturalGasData {
    display: flex;
    justify-content: space-between;
    float: right;
    position: relative;
  }
}
</style>