jiaoxuelou_data/src/components/leftTop.vue

<template>
  <div class="cointan">
    <div class="title1">
      <div style="margin-left:25px;line-height: 22px;">近30日能耗管理</div>
    </div>
    <!-- 区域图 -->
    <div class="chart" ref="chart"></div>
  </div>
</template>

<script>
export default {
  name: 'leftTop',
  props: {
    msg: String
  },
  data() {
    return {
      
    }
  },
  mounted(){
    this.getEchartData()
  },
  methods:{
    // 用电用水
    getEchartData() {
      let _this = this;
      const chart = this.$refs.chart;
      var option = null;
      const myChart = this.$echarts.init(chart);
      option = {
        color: ['#00E0DB', '#43BAFF'],
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#0FEBFF'
            }
          }
        },
        legend: {
          type:'scroll',
          data: ['用电', '用水'],
          textStyle:{
            color:'#FFFFFF',
            fontSize:12,
          },
          // left: 460, //图例位置（可设置top,bottom,left,right）
          icon:'roundRect',//图形样式
          // itemHeight: 11, //修改icon图形大小
          // itemWidth:11,//图例图标的宽度
        },
        grid: {
          left: '1%',
          right: '8%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: [
          {
            axisLabel: {
              show: true,
              height: 19,
              fontSize: 12,
              color: "#FFFFFF",//人数的颜色
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#2E3F44", 
              },
            },
            type: 'category',
            boundaryGap: false,
            data: ['02-01', '02-02', '02-03', '02-04', '02-05', '02-06', '02-07']
          }
        ],
        yAxis: [
          {
            alignTicks: true,
            name:'单位：kw/h',
            nameTextStyle: {
              color: "#00E0DB",
            },
            axisLabel: {
              show: true,
              height: 19,
              fontSize: 12,
              color: "#FFFFFF",
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#FFFFFF",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: [5, 10],
                dashOffset: 5,
                color:'#606060'
              }
            },
            type: 'value'
          },
          {
            name:'单位：t',
            nameTextStyle: {
              color: "#00E0DB",
            },
            axisLine: {
              show: false,
            },
            type: 'value',
            position: 'right',
            alignTicks: true,
            axisLabel: {
              show: true,
              height: 19,
              fontSize: 12,
              color: "#FFFFFF",
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: [5, 10],
                dashOffset: 5,
                color:'#606060'
              }
            },
          }
        ],
        series: [
          {
            name: '用电',
            type: 'line',
            // stack: 'Total',
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(19, 255, 231, 1)'
                },
                {
                  offset: 1,
                  color: 'rgba(19, 255, 231, 0)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [30, 32, 71, 264, 90, 340, 250]
          },{
            name: '用水',
            type: 'line',
            // stack: 'Total',
            smooth: true,
            yAxisIndex: 1,
            showSymbol: false,
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(48, 97, 192, 1)'
                },
                {
                  offset: 1,
                  color: 'rgba(48, 97, 192, 0)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [120, 282, 111, 234, 220, 340, 310]
          },
        ]
      };
      myChart.setOption(option);

      myChart.off("click");

      myChart.on("click", function (params) {
        // console.log(params);
        _this.$emit("openPop");
      });

      window.addEventListener("resize", function () {
        myChart.resize();
      });
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", function () {
          chart.resize();
        });
      });
      return option;
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.cointan{
  width: 450px;
  height: 302px;
  background-image: url('../assets/index/litterbackground.png');
  background-size: 100%;
  
}
.title1{
  position: absolute;
  margin: 9px 0 0 10px;
  font-size: 20px;
  font-family : '优设标题黑';
  color: rgba(255, 255, 255, 1);
  font-weight: 400;
}
// 区域图
.chart{
  position: absolute;
  margin: 60px 0 0 30px;
  width: 420px;
  height: 220px;
}
</style>