Vue：echarts异步加载数据显示

直接将图表数据绑定为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>

Vue：echarts异步加载数据显示相关推荐

在Vue中异步加载数据渲染到Dom
在Vue中异步加载数据渲染到Dom 问题 <div v-for="o in resmessage" :key="o" class="text i ...
学习下ECharts 异步加载数据
ECharts 通常数据设置在 setOption 中,如果我们需要异步加载数据,可以配合 jQuery等工具,在异步获取数据后通过 setOption 填入数据和配置项就行. ECharts 通常数 ...
echarts异步加载柱状图遇到的错误- Error: Component series. not exists. Load it first.
今天看了下echarts教程之中的异步加载柱状图,我按照教程中的代码敲出来之后再运行,就报了一个 Error: Component series. not exists. Load it first. ...
ECharts 异步加载数据及loading 动画
异步加载 echarts 示例中的数据是在初始化后setOption中直接填入的,但是很多时候可能数据需要异步加载后再填入.ECharts 中实现异步数据的更新非常简单,在图表初始化后不管任何时候只要 ...
Echarts异步加载后端接口返回的Json数据生成图表
一.Echarts 是一款很好用的前端报表制作工具,根据官网的开发文档,我们可以导入假数据制作各种分析的图表.详情看官网:Echarts官网案例.但是如果要根据实际情况导入真实的数据呢?怎么 ...
echarts异步加载数据
第一步,在项目中添加echarts库第二步,使用json文件模拟后台数据,json文件如下: 第三步,详细看代码实现,柱形图 jquery的get()方法,请求jsonfile02.json文件 j ...
可视化 | Echarts基础异步加载数据交互组件数据集
目录 1. ECharts 简介 2. ECharts 安装 3. ECharts 配置语法 4. ECharts 图饼 5. ECharts 样式设置 6. ECharts 异步加载数据 7. EC ...
Echarts 图表在异步加载数据时，增加loading动画，提升用户体验感
文章目录一.简介二.增加loading加载动效 2.1 实现原理 2.2 实现步骤 2.3 实现效果图三.完整源代码及解析一.简介 Echarts 图表在异步请求数据时,如果加载时间较长,一个 ...
异步加载在Vue生命周期哪个阶段更合理
react高阶面试题中有这么一道:为什么异步请求数据在didMount阶段更合适?同为MVVM中的翘楚,Vue是否也有类似问题呢?另外,我在平时也无开发过程中也会发现,每个人选择的那个生命周期阶段去异 ...
echarts asp mysql 源码_如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)...
ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息.ECharts官网提供了中国地图.世界地图等地图数据下载,通过js引入或异步加载json文件的形式调用地图. 本文将结合实例 ...

Vue：echarts异步加载数据显示

Vue：echarts异步加载数据显示相关推荐

最新文章

热门文章