echarts渲染图表

接入接口后拿到数据 渲染图表

<template>
  <div class="sewageStatistics">
    <div class="title">污水来源统计</div>
    <div class="line"></div>
    <div class="sewage">
      <div id="source" class="source"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      xData: [],
      yData: [],
    };
  },
  created() {},
  computed: {},
  mounted() {
    this.sewageShow();
    this.getSewageSource();
  },
  methods: {
    getSewageSource() {
      let myChart = this.$echarts.init(document.getElementById("source"));

      this.$store.dispatch("statisticAnalysis/getSewageSource").then((res) => {
        if (res.success) {
          res.result.forEach((item) => {
            this.xData.push(item.label);
            this.yData.push(item.value);
          });
          var option;

          option = {
            tooltip: {},
            xAxis: {
              type: "category",
              data: this.xData,
              splitLine: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
            },
            yAxis: {
              type: "value",
              splitLine: {
                show: true,
                lineStyle: {
                  type: "dashed",
                },
              },
              // axisLine: {
              //   show: true,
              // },
            },
            series: [
              {
                data: this.yData,
                type: "bar",
                barWidth: "10",
              },
            ],
          };

          option && myChart.setOption(option);
        }
      });
    },
    sewageShow() {},
  },
};
</script>
<style lang="scss" scoped>
.title {
  width: 100%;
  height: 3.25rem;
  font-size: 18px;
  font-weight: 700;
  text-align: left;
  color: #43485a;
  padding-left: 1.6rem;
  padding-top: 1rem;
  box-sizing: border-box;
}
.line {
  width: 100%;
  height: 2px;
  background: #f2f2f2;
}
.sewage {
  width: 45rem;
  height: 21rem;
  padding: 0 1rem 0;
  // background-color: #fff;
  box-sizing: border-box;
  .source {
    width: 100%;
    height: 100%;
  }
}
</style>