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

<template>
  <div class="box">
    <tit :title="'碳排放月总量环比'">
      <!-- <div class="tit-r">单位：kw·h</div> -->
    </tit>
    <div id="mainRingPercent"></div>
  </div>
</template>

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

  },
  mounted() {

  },
  methods: {
    getData() {
      getSixMonthCarbonQoq().then(res => {
        const data = res.data.data
        const sortedKeys = Object.keys(data).sort()

        let json = {}

        sortedKeys.forEach(e => {
          json[e] = data[e]
        })
        let yAxisData = sortedKeys.map(r => this.$moment(r).format('M') + '月')
        let arr = []
        for (let k in json) {
          arr.push({

            value: json[k], 
            label: { position:  json[k] >= 0 ? 'right': 'left' },
            itemStyle: {
              color: "#63D5FF"
            }

          })
        }
        this.echartsInit(arr, yAxisData)
      })
    },
    echartsInit(seriesData, yAxisData) {
      const chartDom = document.getElementById('mainRingPercent');
      const myChart = this.$echarts.init(chartDom);
      const option = {
        // title: {
        //   text: 'Bar Chart with Negative Value'
        // },
        // tooltip: {
        //   trigger: 'axis',
        //   axisPointer: {
        //     type: 'shadow'
        //   }
        // },
        grid: {
          top: "10%",
          left: "10",
          right: "20",
          bottom: "0",
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          // position: 'top',
          axisLabel: { formatter: '{value}%' },
          color: "#fff",
          splitLine: {
            lineStyle: {
              type: 'solid',
              color: "#9fabc1",
            }
          }
        },
        yAxis: {
          type: 'category',
          axisLine: { show: false },
          axisLabel: { show: false },
          axisTick: { show: false },
          splitLine: { show: false },
          data: yAxisData
        },
        series: [
          {
            name: 'Cost',
            type: 'bar',
            stack: 'Total',
            label: {
              show: true,
              formatter: '{b}',
              color: "#fff"
            },
            data: seriesData
          }
        ]
      };
      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/ringPercent.png");
  background-size: 100% 100%;
  padding: 0.54rem 0.22rem 0 0.22rem;
  position: absolute;
  bottom: 0.24rem;
  left: 4.94rem;
  z-index: 29;

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

  #mainRingPercent {
    height: 1.8rem;
  }
}
</style>