zhgdyun/src/views/projectAdmin/fourEngin/carbon/rightCenter.vue

<template>
  <Card title="能耗统计">
    <div class="contentBox">
      <!-- 能耗统计结构 -->
      <div class="topWater">
        <div class="leftWaterDiv">
          <div class="waterDiv">
            <span class="span1">本月用电</span>
            <span class="numberStyle">2700</span>
            <span>度</span>
          </div>

          <div class="waterDiv">
            <span class="span2" id="spanes">用电超标值 </span>
            <span class="numberStyle">2700</span>
            <span >度</span>
          </div>
          <div class="waterDiv">
            <span class="span3">累计节约电量</span>
            <span class="numberStyle">2700</span>
            <span>度</span>
          </div>
        </div>

        <div class="rightWaterDiv">
          <div class="waterDiv">
            <span  class="span1">本月用水</span>
            <span class="numberStyle">2700</span>
            <span>吨</span>
          </div>

          <div class="waterDiv">
            <span class="span2">用水超标值</span>
            <span class="numberStyle">2700</span>
            <span>吨</span>
          </div>
          <div class="waterDiv">
            <span class="span3">累计节约水量</span>
            <span class="numberStyle">2700</span>
            <span>吨</span>
          </div>
        </div>
      </div>
      <!-- 年度节电趋势图 -->
      <div id="bottomElectric"></div>
    </div>
  </Card>
</template>

<script>
import Card from '../components/Card.vue'
import echarts from 'echarts4'
export default {
  components: { Card },
  data() {
    return {}
  },
  mounted() {
    this.containerEcharts()
  },
  methods: {
    containerEcharts() {
      // 基于准备好的dom，初始化echarts实例
      const day = echarts.init(document.getElementById('bottomElectric'))
      // 指定图表的配置项和数据
      // const day_options = {
      //   title: {
      //     // text: '日报表'
      //     // subtext: '单位：条'
      //   },
      //   tooltip: {
      //     trigger: 'axis',
      //      axisPointer : {
      //       // 坐标轴指示器，坐标轴触发有效
      //       type : 'line'
      //       // 默认为直线，可选为：'line' | 'shadow'
      //   }
      //   },
      //   xAxis: {
      //     type: 'category',
      //     boundaryGap: false,
      //     data: [
      //       '1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
      //       axisLabel:{
      // 		color:"#fff"
      //       },
      //        splitLine: { lineStyle: { color: '#D0FFF6', type: 'dashed' } } //x轴

      //   },
      //   yAxis:[
      //     {
      //     type: 'value',
      //      axisLabel:{
      // 		color:"#fff"
      //       },
      //       //  axisLine: { show: true, lineStyle: { color: '#D0FFF6' } },
      //        splitLine: { lineStyle: { color: '#D0FFF6', type: 'dashed' } } // 除x轴的横轴
      //   },
      //   ],
      //   series: [
      //     {
      //       name: '发电趋势图',
      //       type: 'line',
      //       data: [1, 4, 5, 10, 1,4,6,6,7,9,11,12],
      //       smooth: true,
      //       Symbol:false,
      //        symbolSize: 0,
      //        itemStyle: {
      //       normal: {
      //      color:'#FFC303 ', //折线点的颜色
      //     // borderColor: '#ffffff', //拐点边框颜色
      //      // borderWidth: 2, //拐点边框大小
      //   },
      // },
      //     },

      //   ]
      // }
      const day_options = {
        legend: {
          // 图例配置选项
          orient: 'horizontal', //图例布局方式：水平 'horizontal' 、垂直 'vertical'
          x: 'left', // 横向放置位置，选项：'center'、'left'、'right'、'number'（横向值 px）
          y: '-2%', // 纵向放置位置，选项：'top'、'bottom'、'center'、'number'（纵向值 px）
           itemGap: 90,
          data: ['本年度节电趋势图', '本年度节水趋势图'],
          textStyle: {
            //图例文字的样式
            color: '#fff',
            fontSize: 10
          }
        },
        grid: {
          // 图表距离边框的距离，可用百分比和数字（px）配置
          top: '15%',
          left: '0%',
          right: '4%',
          bottom: '20%',
          containLabel: true
        },

        xAxis: {
          boundaryGap: false,
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          axisLabel: {
            color: '#fff'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          }
        },

        yAxis: {
          type:'value',
         // scale:true,
          min:0, // 配置 Y 轴刻度最小值
          max:200,  // 配置 Y 轴刻度最大值
          splitNumber: 7, // 配置 Y 轴数值间隔
         // boundaryGap : [ 0.2, 0.2 ],
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',   
              color: 'rgba(255, 255, 255,0.3)'
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle:{
              type:'dashed'
            }
          },
          axisLabel: {
            formatter: function() {
              return ''
            }
          }
        },

        series: [
          {
            name: '本年度节水趋势图',
            data: [23, 51, 61, 13, 66, 18, 90, 120, 17, 10, 83, 29],
            textStyle:{
              fontSize:10
            },
            type: 'line',
            symbolSize: 0, //设置折线上圆点大小
            smooth: true,
            itemStyle: {
              normal: {
                label: {
                  show: false // 在折线拐点上显示数据
                },
                lineStyle: {
                  width: 3, // 设置虚线宽度
                  type: 'dotted' // 虚线'dotted' 实线'solid'
                },
                lineStyle: {
                  color: '#6EE4F0' // 折线颜色设置为0，即只显示点，不显示折线
                }
              }
            }
          },

          {
            name: '本年度节电趋势图',
            data: [55, 51, 61, 93, 56, 150, 44, 170, 90, 30, 40, 50],
            type: 'line',
            symbolSize: 0, //设置折线上圆点大小
            smooth: true, // 设置折线弧度
            itemStyle: {
              normal: {
                label: {
                  show: false // 在折线拐点上显示数据
                },
                lineStyle: {
                  width: 3, // 设置虚线宽度
                  type: 'dotted' // 虚线'dotted' 实线'solid'
                },
                lineStyle: {
                  color: '#E7622A ' // 折线颜色设置为0，即只显示点，不显示折线
                }
              }
            }
          }
        ],
        color: ['#6EE4F0', '#E7622A'] // 二个折线的颜色
      }
      day.setOption(day_options)
    }
  }
}
</script>

<style lang="less" scoped>
.contentBox {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  .topWater {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 20%;
    padding-bottom: 35px;
    // margin-top: 5px;
    .leftWaterDiv,
    .rightWaterDiv {
      width: 50%;
      height: 100%;
      display: flex;
      flex-flow: column;
      text-align: center;
      .waterDiv {
        margin-bottom: 23px;
        margin-right: 20px;
        .numberStyle {
          display: inline-block;
         // margin-top: 5px;
          // padding-top: 15px;
          width: 80px;
          height: 35px;
          text-align: center;
          background-image: url(../assets/images/common/num_bg.png);
          background-repeat: no-repeat;
          background-size: 100%;
          font-size: 16px;
          line-height: 35px;
          margin: 0 10px 0 0;
          color: #fff;
          font-size: 16px;
        }
        span {
          color: #6ee4f0;
          
          font-size: 12px;
        }
        .span1{
          margin-right: 26px;
        }
        .span2{
          margin-right: 14px !important;
        }
        .span3{
          padding-right: 5px;
        }
        
       
      }
    }
  }
  #bottomElectric {
    width: 100%;
    height: 60%;
    margin-bottom: -65px;
  }
}
</style>