vue+echarts实现图表展示，数据是从后台请求获取

2024-04-03 03:34| 来源: 网络整理| 查看: 265

前段时间，项目中大量用到了echarts图表，因为之前没有细究echarts的官网文档，走了很多的弯路，现在来这里总结一下，也请各位大神多多指教。

我的项目中使用了Echarts里面的柱状图、饼图和中国地图，就以柱状图为例讲述一下，它们都有异曲同工之处。项目我是用Vue2.0脚手架搭建的，具体如何搭建就不做介绍了，要使用echarts只需npm install，最好将npm升级成淘宝镜像cnpm，如下：将npm转化成cnpm 安装echarts npm run dev重新启动项目后，在项目代码的main.js里面引入，如下：

//main.js import echarts from 'echarts' Vue.prototype.$echarts = echarts

现在就可以在需要的页面中实现图表数据展示啦。开始介绍柱状图：项目中我的展示方式是弹框，就是该柱状图在一个弹框里面，我用到了elementUI里面的dialog组件来展示弹框，弹框中就是柱状图，首先在template里面写弹框和存放图表的容器，如下：

dialog组件的属性可以查看elementui文档来写自己需要的，上述代码的div就是来盛放柱状图的容器了，我为了方便把样式写在了行内，现在需要在data中声明控制弹框显示隐藏的变量了，如下：

data(){ return{ shujixiaoForm:false //先将该弹框默认为隐藏，根据具体的需求，你可以给想要显示这个弹框的元素加点击事件，将它设为true即可 } }

methods中还需写个事件来关闭这个弹框，上述代码中有提到，即@close=“closeDialog”

closeDialog(){ this.shujixiaoForm = false; }

现在就要写最主要的代码了，柱状图显示代码，如下：

//柱状图显示 zhuzhuang(){ //来获取存放柱状图的dom元素 var motank = this.$echarts.init(document.getElementById("zhuSalesProv")); window.addEventListener('resize', function () { motank.resize() }) //柱状图动态获取数据 var that = this; that.$http.post('接口地址',{ //参数 }).then(res=>{ // console.log(res.data.data) //先声明一个空数组来存放获取到的柱状条的数据 let seriesData = []; //还需声明一个空数组来存放与柱状条数据对应的名称 let nameDatas = []; //获取到的数据需要转换成Json字符串,这里我也不是很明白，在控制台调试的时候，获取到的数据都是[object,Object]这样的格式，所以我只能转换一下 let outdata =JSON.stringify(res.data.data); //这里还需eval来处理一下字符串转为json对象，如此就能获取到数据了 let xqo = eval('('+outdata+')'); //根据返回的数据，循环遍历出你要展示的数据 for(var i in xqo){ //这里我展示的是后台返回的每条数据里面的bookname和num nameDatas.push(xqo[i].bookname); seriesData.push(xqo[i].num); } //这里是柱状图的配置，最重要的是series里面的data和xAxis中的data都是数组，用来存放数据，上面从后台获取到的seriesData和nameDatas赋值给它们，就可以展示所需要的数据 motank.setOption({ title: { text:'',//柱状图大标题 subtext: //柱状图小标题, left: 'left'//标题摆放的位置 }, color:['#3398DB'], tooltip:{ trigger:'axis', axisPointer:{ type:'shadow' } }, legend:{ data:[''] }, grid:{ left:'3%', right:'4%', bottom:'3%', containLabel:true }, xAxis:[ { type:'category', data:nameDatas,//这里是和柱状条数据对应的名称 axisTick:{ alignWithLabel:true } } ], yAxis:[ { type:'value' } ], series:[ { name: '',//数据的名称，例如销量 type: 'bar', barWidth:'60%', data:seriesData//一定要赋值给data } ], }) }).catch(res=>{ that.$message.error('不好意思,图表请求数据失败啦！') }) },

最后，根据自己的需要在想要显示这个弹框和这个柱状图的事件里面加一句代码并且调用这个zhuzhuang()函数，还需使用vue的this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行，不然会报错，如下：

this.shujixiaoForm = true; this.$nextTick(() =>{ //延迟等待渲染完再加载 this.zhuzhuang() })

如此在弹框中的柱状图数据展示就完成了。还需提一句柱状图与饼图和中国地图塞数据的不同之处，就是series，饼图和中国地图的数据都是放在series的data数组中，并且这个data的里面有两个属性name和value，详情可以去查看echarts官方文档来了解。Echarts官网上述代码的不足之处也请大家多多指教，完结。

【本文地址】

公司简介

联系我们