Vue中的echarts图表怎么实现loading效果

这篇文章主要讲解了“Vue中的echarts图表怎么实现loading效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue中的echarts图表怎么实现loading效果”吧！

echarts图表实现loading效果

main.js 中配置Vue属性ecahrts

//引入echartsimportechartsfrom'echarts'Vue.prototype.$echarts=echarts

• data() 初始化数据调用数据

• mounted() 周期函数内获取画布节点,并且调用加载loading和图表渲染

• <codeputed计算属性内定义echarts渲染内容以及数据请求

当服务器返回数据 hideLoading()

注意：loading方法要定义在计算属性的get方法中,set可以不做任何定义。这样图表于loading样式在画布上不会冲突

<template><div><divclass="echarts-wrap"><divid="dev-echarts"></div></div></div></template>

<script>exportdefault{name:"echarts",data(){return{one:[],two:[],three:[],four:[]}},mounted(){this.echartsG=this.$echarts.init(document.getElementById('dev-echarts'),'dark');this.loadingthis.initDrawDevEchart},&nbspputed:{initDrawDevEchart(){this.$axios.get("getEchartsUrl",{params:{id:1}}).then((response)=>{this.one=response.data.onethis.two=response.data.twothis.three=response.data.threethis.xAxis=response.data.xaxisthis.echartsG.hideLoading()letoptionG={backgroundColor:'rgba(128,128,128,0)',title:{text:'loading效果演示',},dataZoom:{},tooltip:{trigger:'axis'},legend:{data:['一','二','三']},xAxis:{type:'category',//调整柱状图位置boundaryGap:true,data:this.xAxis},yAxis:{type:'value',axisLabel:{formatter:'{value}'}},series:[{name:'一',type:'bar',data:this.one,},{name:'二',type:'bar',data:this.two},{name:'三',type:'bar',data:this.three}]};this.echartsG.setOption(optionG);}).catch((err=>{console.log(err)}))},loading:{get:function(){this.echartsG.setOption({backgroundColor:'rgba(128,128,128,0)',legend:{data:['一','二','三']},xAxis:{type:'category',boundaryGap:true,data:[]},yAxis:{type:'value',axisLabel:{formatter:'{value}'}},series:[{name:'一',type:'bar',data:[]},{name:'二',type:'bar',data:[]},{name:'三',type:'bar',data:[]}]});this.echartsG.showLoading({text:'统计中，请稍候...',maskColor:'rgba(3,3,8,0.5)',textColor:'#fff600'});},set(e){}}}}</script>

Vue使用echarts图表总结

今天在写后台项目的时候，使用echarts来绘制图表。下面来说说怎么使用echarts。

echarts地址：echarts.apache.org/zh/index

效果：

代码：

在vue项目中使用echarts图表的步骤：

安装echarts依赖

npminstallecharts-S

或者使用淘宝的镜像

npminstall-g&nbsppm--registry=registry.npm.taobao.orgcnpminstallecharts-S

创建图表

一、全局引入

在main.js中

//引入echartsimportechartsfrom'echarts'Vue.prototype.$echarts=echarts

二、局部引入（在需要的页面中引入）

importechartsfrom"echarts";

在页面中的使用（在这里我用的局部引入）

完整的代码：

<template><div><!--面包屑--><BreadCrumblevel1="数据统计"level2="数据报表"></BreadCrumb><!--内容--><el-card><!--为Echarts准备一个Dom--><divid="main"></div></el-card></div></template>

<script>import{getReports}from"../../http/api";importechartsfrom"echarts";import_from"lodash";exportdefault{data(){return{//需要合并的数据options:{title:{text:"用户来源"},tooltip:{trigger:"axis",axisPointer:{type:"cross",label:{backgroundColor:"#E9EEF3"}}},grid:{left:"3%",right:"4%",bottom:"3%",containLabel:true},xAxis:[{boundaryGap:false}],yAxis:[{type:"value"}]}};},mounted(){this.reports();},methods:{asyncreports(){varmyChart=echarts.init(document.getElementById("main"));constres=awaitgetReports();console.log(res);constresultJieg=_.merge(res.result,this.options);//展示数据myChart.setOption(resultJieg);}}};</script><style></style>

解释：

1、需要在页面上给一个挂载点

<!--为Echarts准备一个Dom--><divid="main"></div>

2、在data里面定义一下

//需要合并的数据options:{title:{text:"用户来源"},tooltip:{trigger:"axis",axisPointer:{type:"cross",label:{backgroundColor:"#E9EEF3"}}},grid:{left:"3%",right:"4%",bottom:"3%",containLabel:true},xAxis:[{boundaryGap:false}],yAxis:[{type:"value"}]}

3、初始化数据

mounted(){this.reports();},methods:{asyncreports(){//获取在页面中挂载的数据varmyChart=echarts.init(document.getElementById("main"));//调用接口（即后台返回的数据）constres=awaitgetReports();console.log(res);//使用lodash来合并数据constresultJieg=_.merge(res.result,this.options);//展示数据myChart.setOption(resultJieg);}}

总结一下：

在vue中使用echarts图表，分为二步：

1.在页面中给图表一个挂载的元素。

2.在mounted的函数里初始化数据。

• 通过echarts.init来拿到页面中挂载的节点。

• 调用数据

• 最后通过setOption来展示数据。

感谢各位的阅读，以上就是“Vue中的echarts图表怎么实现loading效果”的内容了，经过本文的学习后，相信大家对Vue中的echarts图表怎么实现loading效果这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是主机评测网，小编将为大家推送更多相关知识点的文章，欢迎关注！

上一篇：python?slack桌面自动化开发工具怎么使用

下一篇：JS前端中的设计模式和使用场景是什么

---