jiahe_device/src/views/energySourcesProvince/component/togetherPercent.vue

<template>
  <div class="box">
    <tit :title="'碳排放月总量同比'">
      <div class="tit-r">单位：t</div>
    </tit>
    <div id="mainTogetherPercent"></div>
  </div>
</template>

<script>
import tit from "./tit.vue";
import { getSixMonthCarbonYoy } from "@/api/energySourcesProvince/energySourcesProvince"
export default {
  data() {
    return {
    };
  },
  components: {
    tit
  },
  created() {
    this.$nextTick(() => {
      this.getData()
    })

  },
  mounted() {

  },
  methods: {
    getData() {
      getSixMonthCarbonYoy().then(res => {
        const data = res.data.data
        // let monthData = data.map(r => r.jn)
        // monthData.sort()
        data.sort((a, b) => {
          return a.jn.localeCompare(b.jn)
        })

        let xAxisData = data.map(r => this.$moment(r.jn).format('M') + '月')
        let jnpf = data.map(r => r.jnpf)
        let qnpf = data.map(r => r.qnpf)
        let tongbi = data.map(r => r.tongbi)
        this.echartsInit(jnpf, qnpf, tongbi, xAxisData)
      })
    },
    echartsInit(jnpf, qnpf, tongbi, xAxisData) {
      const chartDom = document.getElementById('mainTogetherPercent');
      const myChart = this.$echarts.init(chartDom);
      const option = {
        // title: {
        //   show: true,
        //   text: "温度（单位：℃）",
        //   textStyle: {
        //     fontWeight: 400,
        //     fontSize: 14,
        //     color: "#009fff",
        //   },
        //   top: 10,
        // },
        legend: {
          data: ['上期', '本期', '同比'],
          top: 0,
          right: "12%",
          textStyle: {
            color: "rgba(255,255,255,0.5)",
            fontSize: 14
          },
          itemWidth: 6,
          itemHeight: 6
        },
        grid: {
          // top: "10%",
          left: "0",
          right: "0",
          bottom: "0",
          containLabel: true,
        },
        // toolbox: {
        //   feature: {
        //     dataView: { show: false, readOnly: false },
        //     magicType: { show: false, type: ['line', 'bar'] },
        //     restore: { show: false },
        //     saveAsImage: { show: false }
        //   }
        // },
        // tooltip: {
        //   trigger: "axis",
        //   formatter: (e) => {
        //     return (
        //       e[0].axisValueLabel +
        //       "<br />" +
        //       '<div style="border: 1px solid #12244A;margin:5px 0"></div>' +
        //       '<span style="color:#fff">' +
        //       "温度变化趋势" +
        //       "：" +
        //       "</span>" +
        //       e[0].value +
        //       " ℃" +
        //       "<br />"
        //     );
        //   },
        //   extraCssText:
        //     "font-size: 16px;border-radius: 2px;height:60px;border: 1px solid #0477DF;background: rgba(0, 0, 0, 0.8);text-align:left;color:#00E5FC",
        // },
        xAxis: [
          {
            type: "category",
            axisPointer: {
              type: 'shadow'
            },
            data: xAxisData,
            axisTick: {
              show: true,
              inside: true,
              lineStyle: {
                color: "#9fabc1",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#9fabc1",
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              //y轴文字的配置
              textStyle: {
                color: "#9fa9b5",
              },
            },
            axisTick: {
              show: true,
              inside: true,
              lineStyle: {
                color: "#9fabc1",
              },
            },
            // 刻度线
            axisLine: {
              show: true,
              lineStyle: {
                color: "#9fabc1",
              },
            },
            // 线
            splitLine: {
              show: true,
              lineStyle: {
                color: "#616d87",
              },
            },
          },
          {
            type: 'value',
            show: false,
            axisLabel: {
              formatter: '{value}%'
            },
            splitLine: {
              show: false
            },
          }

        ],
        series: [
          {
            name: '上期',
            type: 'bar',
            // tooltip: {
            //   valueFormatter: function (value) {
            //     return value + ' ml';
            //   }
            // },
            itemStyle: {
              color: "#11A0EB"
            },
            data: qnpf
          },
          {
            name: '本期',
            type: 'bar',
            // tooltip: {
            //   valueFormatter: function (value) {
            //     return value + ' ml';
            //   }
            // },
            itemStyle: {
              color: "#63EEFF"
            },
            data: jnpf
          },
          {
            name: '同比',
            type: 'line',
            yAxisIndex: 1,
            // tooltip: {
            //   valueFormatter: function (value) {
            //     return value + ' °C';
            //   }
            // },
            label: {
              show: true,
              color: "#fff",
              backgroundColor: "#F68E29",
              padding: [2, 4, 2, 4]
            },
            itemStyle: {
              color: "#11A0EB"
            },
            data: tongbi
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>
<style lang="scss" scoped>
.box {
  width: 4.6rem;
  height: 2.55rem;
  border-radius: 4px;
  box-sizing: border-box;
  background: url("../../../../public/img/energySourcesProvince/togetherPercent.png");
  background-size: 100% 100%;
  padding: 0.54rem 0.22rem 0 0.22rem;
  position: absolute;
  bottom: 0.24rem;
  right: 4.94rem;
  z-index: 29;

  .tit-r {
    font-size: 0.14rem;
    color: rgba($color: #fff, $alpha: 0.4);
    margin-top: 0.04rem;
  }

  #mainTogetherPercent {
    height: 2.2rem;
    position: relative;
    top: -0.37rem;
  }
}
</style>