Vue下echarts图表加载中状态（loading）如何实现？

本文共计1096个文字，预计阅读时间需要5分钟。

目录 + ECharts 图表实现 Loading 效果 + Vue 使用 ECharts 图表总结 + 安装 ECharts 依赖 + 创建图表 + 在页面中的使用（此处使用局部引入）+ ECharts 图表实现 Loading 效果 + main.js 中配置 Vue 属性 echart + // 引入 echart

目录

• echarts图表实现loading效果
• Vue使用echarts图表总结
• 安装echarts依赖
• 创建图表
• 在页面中的使用（在这里我用的局部引入）

echarts图表实现loading效果

main.js 中配置Vue属性ecahrts

// 引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts 

• data() 初始化数据调用数据
• mounted() 周期函数内获取画布节点,并且调用加载loading和图表渲染
• computed计算属性内定义echarts渲染内容以及数据请求

当服务器返回数据 hideLoading()

注意：loading方法要定义在计算属性的get方法中,set可以不做任何定义。