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

<template>
  <Card title="用电用水">
    <div class="contentBox">
      <!-- 上结构 -->
      <div class="topWater">
        <div class="waterDiv">用水</div>
        <div class="electricDiv">用电</div>
        <div class="DateTime">
          <el-date-picker
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            size="mini"
          ></el-date-picker>
        </div>
      </div>
      <!-- 下echarts结构 -->
      <div id="waterMain"></div>
    </div>
  </Card>
</template>

<script>
import Card from '../components/Card.vue'
import echarts from 'echarts4'
export default {
  components: { Card },
  data() {
    return {}
  },
  mounted() {
    this.wEacharts()
  },
  methods: {
    wEacharts() {
      // 基于准备好的dom，初始化echarts实例
      let waterEch = echarts.init(document.getElementById('waterMain'))
      let xData = (function() {
        let data = []
        for (let i = 1; i < 13; i++) {
          data.push(i + '月')
        }
        return data
      })()

      let option = {
      
        title: {
          x: '4%',

          textStyle: {
            color: '#fff',
            fontSize: '8'
          },
          subtextStyle: {
            color: '#90979c',
            fontSize: '8'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            textStyle: {
              color: '#fff'
            }
          }
        },
        grid: {
          // 图表距离边框的距离，可用百分比和数字（px）配置
          top: '5%',
          left: '4%',
          right: '4%',
          bottom: '25%',
          containLabel: true
        },

        legend: {
          x: '4%',
          top: '5%',
          bottom: '0%',
          textStyle: {
            color: '#90979c'
          }
        },

        calculable: true,
        xAxis: [
          {
            type: 'category',

            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitArea: {
              show: false
            },
            axisLabel: {
              interval: 0
            },
            data: xData
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255, 255, 255,0.3)',
                type: 'dashed'
              }
            },
            axisLine: {
               show:true,
              lineStyle: {
                 type:'dashed',
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitArea: {
              show: false
            }
          }
        ],
        // "dataZoom": [{
        //     "show": true,
        //     "height": 30,
        //     "xAxisIndex": [
        //         0
        //     ],
        //     bottom: 30,
        //     "start": 10,
        //     "end": 80,
        //     // handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
        //     handleSize: '110%',
        //     handleStyle:{
        //         color:"#d3dee5",

        //     },
        //       textStyle:{
        //         color:"#fff"},
        //       borderColor:"#90979c"

        // }, {
        //     "type": "inside",
        //     "show": true,
        //     "height": 15,
        //     "start": 1,
        //     "end": 35
        // }],
        series: [
          {
            type: 'bar',
            stack: '总量',
            barMaxWidth: 25,
            barGap: '10%',
            symbol:'circle',
            itemStyle: {
              normal: {
                color: '#6EE4F0',
                lineStyle:{
                  color:'#fff'
                },
                label: {
                  show: false,
                  textStyle: {
                    color: '#fff'
                  },
                  position: 'inside',
                  formatter: function(p) {
                    return p.value > 0 ? p.value : ''
                  }
                }
              }
            },
            data: [709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208, 3372, 2484, 4078]
          },

          {
            type: 'bar',
            stack: '总量',
            itemStyle: {
              normal: {
                color: '#E7622A',
                barBorderRadius: 0,
                label: {
                  show: false,
                  position: 'inside',
                  formatter: function(p) {
                    return p.value > 0 ? p.value : ''
                  }
                }
              }
            },
            data: [327, 1776, 507, 1200, 800, 482, 204, 1390, 1001, 951, 381, 220]
          },
          {
            type: 'line',
            symbolSize: 8,
            symbol: 'circle',
            smooth: true,
            itemStyle: {
              normal: {
                color: '#fff',
                barBorderRadius: 2,
                lineStyle:{
                  color:'#FFC303'
                },
                label: {
                  show: false,
                  position: 'bottom',
                  formatter: function(p) {
                    return p.value > 0 ? p.value : ''
                  }
                }
              }
            },
            data: [1036, 3693, 2962, 3810, 2519, 1915, 1748, 4675, 6209, 4323, 2865, 4298]
          }
        ]
      }
      waterEch.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped>
.contentBox {
  box-sizing: border-box;
  padding-top: 20px;
  width: 100%;
  height: 100%;
  .topWater {
    width: 100%;
    height: 20%;
    display: flex;
    .waterDiv {
      display: inline-block;
      // margin-top: 5px;
      // padding-top: 15px;
      width: 80px;
      height: 35px;
      text-align: center;
      background-image: url(../assets/images/common/bg_water.png);
      background-repeat: no-repeat;
      background-size: 100%;
      font-size: 16px;
      line-height: 38px;
      margin: 0 10px 0 0;
      color: #fff;
      font-size: 14px;
    }

    .electricDiv {
      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: 38px;
      margin: 0 10px 0 0;
      color: #fff;
      font-size: 14px;
    }
    .DateTime {
      flex: 1;
      margin-left: 80px;
      margin-top: 4px;
      ::v-deep .el-date-editor--daterange.el-input__inner {
        width: 210px;
        height: 30px;
        background-color: #182337;
        border: 1px solid #264b5e;
      }
      ::v-deep .el-range-input {
        margin-left: 15px;
        background-color: #182337;
        color: #6ee4f0;
      }
      ::v-deep .el-date-editor {
        .el-range__icon {
          line-height: 20px;
          color: #6ee4f0;
          margin-left: 10px;
        }
        .el-range-separator {
          line-height: 20px;
          color: #757d88;
        }
        .el-range__close-icon {
          color: #757d88;
          line-height: 20px;
        }
      }
    }
  }
  #waterMain {
    width: 100%;
    height: 100%;
  }
}
</style>