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

<template>
  <div class="box">
    <tit :title="'近6个月用电趋势'">
      <!-- <div class="tit-r">单位：kw·h</div> -->
    </tit>
    <div id="mainElectricity"></div>
  </div>
</template>

<script>
import tit from "./tit.vue";

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

  },
  mounted() {

  },
  methods: {
    getData() {
      getSixMonthElectricity().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: {}

          })
        }
        arr.forEach((e, i) => {
          if (i == 0) {
            e.label.offset = [12, 0]
          } else if (i == arr.length - 1) {
            e.label.offset = [-30, 0]
          } else { 
            e.label.offset = [0, 0]
          }
        })
        this.echartsInit(arr, yAxisData)
      })
    },
    echartsInit(seriesData, yAxisData) {
      const chartDom = document.getElementById('mainElectricity');
      const myChart = this.$echarts.init(chartDom);
      const option = {
        // title: {
        //   show: true,
        //   text: "温度（单位：℃）",
        //   textStyle: {
        //     fontWeight: 400,
        //     fontSize: 14,
        //     color: "#009fff",
        //   },
        //   top: 10,
        // },

        grid: {
          top: "10",
          left: "0",
          right: "10",
          bottom: "0",
          containLabel: true,
        },
        // 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",
            boundaryGap: false,
            data: yAxisData,
            axisLabel: {
              //y轴文字的配置
              textStyle: {
                color: "#9fa9b5",
                margin: 14,
              },
            },
            axisTick: {
              show: true,
              inside: true,
              lineStyle: {
                color: "#9fabc1",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#9fabc1",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            show: true, //是否显示y轴
            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",
              },
            },
          },
        ],
        series: [
          {
            type: "line",
            smooth: true,
            lineStyle: {
              width: 2,
              color: "#00FFFC",
            },
            label: {
              show: true,
              color: "#fff",
              backgroundColor: "rgba(26, 208, 163, 1)",
              padding: [4, 4, 2, 4]
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#031a45",
                  },
                  {
                    offset: 1,
                    color: "#00FFFC",
                  },
                ],
                global: false, //  缺省为  false
              },
            },
            data: seriesData,
            // markPoint: {
            //   symbolSize: 40,
            //   itemStyle: {
            //     color: '#14a876'
            //   },
            //   data: [
            //     { type: "max", name: "Max" },
            //     { type: "min", name: "Min" },
            //   ],
            // },
          },
        ],
      };
      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/electricity.png");
  background-size: 100% 100%;
  padding: 0.54rem 0.22rem 0 0.22rem;
  position: absolute;
  top: 8rem;
  left: 0.24rem;
  z-index: 9;

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

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