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

<template>
  <Card title="总碳排放分析">
    <div class="carbonEmission">
      <!-- <el-date-picker
          v-model="time1"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          size="mini"
        ></el-date-picker> -->
      <el-select
        style="margin-top: 20px"
        v-model="date"
        placeholder="请选择日期"
        @change="credad"
      >
        <el-option
          v-for="(item, index) in yearsList"
          :key="index"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="chart" ref="carbonChart"></div>
  </Card>
</template>

<script>
import { getdoubleCarbonApi } from "@/assets/js/api/zhongjianFourth";
import echarts from "echarts4";
import Card from "../components/Card.vue";

export default {
  components: {
    Card,
  },
  data() {
    return {
      yearsList: [
        {
          value: "1",
          label: "最近1年",
        },
        {
          value: "2",
          label: "最近14天",
        },
        {
          value: "3",
          label: "最近7天",
        },
      ],
      date: "", //日期
      projectSn: this.$store.state.projectSn, //项目sn
      typeId: "", //日期类型
      carbonListNum: [], //总数据
      carbonList1: [], //碳排放
      carbonList2: [], //减少碳排放
      carbonList3: [], //净碳排放
    };
  },
  created() {
    this.credad();
  },
  mounted() {
    this.createCarbonChart();
  },
  methods: {
    credad(val) {
      this.carbonList1 = []
      this.carbonList2 = []
      this.carbonList3 = []

      //获取总碳排放分析数据
      getdoubleCarbonApi({
        projectSn: this.projectSn,
        typeId: val == null? 3 : val,
      }).then((res) => {
        console.log('res',res);
        if (res.code == 200) {
          this.carbonListNum = res.result;
          this.carbonListNum.forEach((item) => {
            this.carbonList1.push(item.carbonValue);
            this.carbonList2.push(item.reduceValue);
            this.carbonList3.push(item.cleanValue);
          });
          this.createCarbonChart();
        }
      });
    },
    createCarbonChart() {
      let monitor = echarts.init(this.$refs.carbonChart);
      var colors = ["#3A85D3", "#5AD8A6", "#008000", "#5470c6", "#61a0a8"];

      var option = {
        color: colors, //下面这种直接配置演示也行
        //color: ['#3A85D3','#5AD8A6','#5470c6',  '#008000', '#61a0a8'], //依次选择颜色，默认为第一个颜色，多根柱子多个颜色

        title: {
          left: "center", //title 组件离容器左侧的距离，也可以是像素，和百分比
        },

        tooltip: {
          trigger: "axis", //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: false, // 默认为直线，可选为：'line' | 'shadow' | 'cross' , shadow表示阴影，cross为十字准星
          },

          formatter: function (params) {
            //params[0].marker,marker参数为提示语前面的小圆点
            let data = "";
            if(params.length >= 1) {
              data = params[0].name +  "<br>" 
             }
            params.forEach(res =>{
              data =  data + res.seriesName +":"+
              res.value +
              "<br>"  ;
            })
            return ( data );
          },
        },
        legend: {
          textStyle: {
            //图例文字的样式
            color: "#fff",
          },
          data: ["碳排放", "减少碳排放", "净碳排放"],
          left: "5%", //组件离容器左侧的距离，可以是left,center,right，也可以是像素px和百分比10%
        },
        //backgroundColor: '#00199',//整个绘图背景色
        grid: {
          left: "3%",
          right: "1%",
          bottom: "0%", //网格图（柱状图、折线图、气泡图等）离底部的距离，也可以用像素比如10px
          containLabel: true, //grid 区域是否包含坐标轴的刻度标签。false可能溢出，默认为false
        },

        xAxis: [
          {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            axisLabel: {
              textStyle: {
                color: "#fff", //坐标值得具体的颜色
                fontSize: 16,
              },
            },
            axisLine: {
              //不显示坐标轴线
              lineStyle: {
                type: "dashed",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false,
            },
            axisLabel: {
              //让x轴左边的数显示为正数
              formatter: function (v) {
                return v > 0 ? v : -v;
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
            axisLine: {
              //这是y轴文字颜色
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#fff", //坐标值得具体的颜色
                fontSize: 16,
              },
            },
          },
        ],
        series: [
          {
            name: "碳排放",
            type: "bar",
            stack: "总量",
            showSymbol: true, //是否默认展示圆点
            symbol: "circle", //设定为实心点
            barMaxWidth: 30,
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(204, 89, 42, 1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(204, 89, 42, 0)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },

            label: {
              show: true,
              position: "top",
              color: "#fff",
            },

            data: this.carbonList1,
          },

          {
            name: "减少碳排放",
            type: "bar",
            stack: "总量",
            barMaxWidth: 30,
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(81, 166, 178, 0)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(81, 166, 178, 1)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },

            label: {
              show: true, //控制柱状图是否显示数值
              position: "bottom",
              color: "#fff",
              // formatter: function (params) {
              //   //格式化柱状图里的数字
              //   return -params.value;
              // },
            },
            data: this.carbonList2,
          },
          {
            name: "净碳排放",
            type: "line",
            symbolSize: 10,
            symbol: "circle",
            smooth: true,
            itemStyle: {
              normal: {
                color: "#fff",
                barBorderRadius: 0,
              },
            },
            lineStyle: {
              normal: {
                width: 4,
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(255, 195, 3, 1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(255, 195, 3, 1)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            data: this.carbonList3,
          },
        ],
      };
      monitor.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.chart {
  width: 100%;
  height: calc(100% - 37px);
  margin-top: 23px;
}
.carbonEmission {
  cursor: pointer;
  margin-left: 81%;
  width: 210;
  height: 17px;
}
</style>