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>
    </div>
    <div class="chart" ref="carbonChart"></div>
  </Card>
</template>

<script>
import echarts from "echarts4";
import Card from "../components/Card.vue";

export default {
  components: {
    Card,
  },
  data() {
    return {
      time1:'',
    }
  },
  mounted() {
    this.createCarbonChart();
  },
  methods: {
    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参数为提示语前面的小圆点
            return (
              params[0].name +
              "<br>" +
              // params[0].marker +
              "碳排放：" +
              params[0].value +
              "<br>" +
              // params[1].marker +
              "减少碳排放：" +
              -params[1].value +
              "<br>" +
              // params[1].marker +
              "净碳排放：" +
              params[2].value
            );
          },
        },
        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: [320, 302, 341, 374, 390, 450, 420, 200, 220, 322, 245, 215],
          },

          {
            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: [
              -120, -132, -101, -134, -190, -230, -210, -210, -210, -210, -210,
              -210,
            ],
          },
          {
            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: [220, 202, 241, 274, 190, 150, 120, 200, 220, 222, 145, 215],
          },
        ],
      };
      monitor.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.chart {
  width: 100%;
  height: calc(100% - 37px);
  margin-top: 23px
}
.carbonEmission {
    cursor:pointer;
    margin-left: 79%;
    width: 210;
    height: 17px;
  }
  ::v-deep .el-date-editor--daterange.el-input__inner {
    cursor:pointer;
    width: 235px;
    height: 30px;
    background-color: #182337;
    border: 1px solid #264b5e;
    margin-top: 20px
  }
  ::v-deep .el-range-input {
    cursor:pointer;
    background-color: #182337;
    color: #6ee4f0;
  }
  ::v-deep .el-date-editor {
    cursor:pointer;
    .el-range__icon {
      line-height: 23px;
      color: #6ee4f0;
    }
    .el-range-separator {
      line-height: 23px;
      color: #757d88;
    }
    .el-range__close-icon {
      color: #757d88;
      line-height: 23px;
    }
  }
</style>