Vue：echarts异步加载数据显示

最新推荐文章于 2024-04-21 10:54:42 发布

KaiSarH

最新推荐文章于 2024-04-21 10:54:42 发布

阅读量1.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.csdn.net/KaiSarH/article/details/117791414

Vue 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了一种在Vue应用中利用async/await结合ECharts实现异步数据加载的方法，并展示了如何在页面挂载完成后初始化图表并展示动态获取的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接将图表数据绑定为data中数据，然后在mounted中进行图表初始化无法加载异步获取的数据
使用async await进行数据请求

<template>
  <div class="publicationIntro">
    <div class="publicationIntroInfo">
      截至{{ getCurrentTime() }},平台累计收录各类数据共{{ totalCount }}种，详情如下
    </div>
    <div class="publicationCharts" id="publicationCharts"></div>
    <el-button style="margin-left: 50px" @click="handleClick('quarter')" type="success">查看季报</el-button>
    <el-button style="margin-left: 50px" @click="handleClick('month')" type="success">查看月报</el-button>
  </div>
</template>

<script>
import {queryPublicationCount} from "@/service/sdk";

export default {
  name: "PublicationIntro",
  data() {
    return {
      totalCount: 0
    }
  },
  methods: {
    getCurrentTime() {
      const DATE = new Date();
      return `${DATE.getFullYear()}年${DATE.getMonth() + 1}月${DATE.getDate()}日${DATE.getHours()}时`
    },
    // getTotalCount() {
    //   return eval(Object.values(this.dataArr).join("+"));
    // },
    handleClick(params) {
      this.$router.push(`/publication/detail/${params}`,)
    },
    async init() {
      this.$echarts.init(document.getElementById("publicationCharts")).showLoading();
      const _chart = this.$echarts.init(document.getElementById("publicationCharts"));
      await queryPublicationCount().then(res => {
        this.totalCount = res.data.
        this.$echarts.init(document.getElementById("publicationCharts")).hideLoading();
        const option = {
          title: {
            text: '数据分布',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
          },
          series: [
            {
              name: '来源',
              type: 'pie',
              radius: '80%',
              data: [
                {value: res.data.a_count, name: 'A'},
                {value: res.data.b_count, name: 'B'},
                {value: res.data.c_count, name: 'C'},
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        _chart.setOption(option);
      })
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
@import "./../../style/global";

.publicationIntro {
  width: 100%;
  height: 100%;

  .publicationIntroInfo {
    margin-left: 40px;
    font-size: 20px;
    font-weight: bolder;
  }

  .publicationCharts {
    width: 500px;
    height: 430px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    margin: 50px auto;
  }
}
</style>