当前位置:   article > 正文

vue项目中如何实现将后台接口返回的数据映射成echarts饼形图_从后端传入的数据 list 取list的值生成echart

从后端传入的数据 list 取list的值生成echart

data的代码
假如从后台拿到的原始数据是list这种格式,我将原始的数据进行一系列的处理,拿到我想要的数据类型的数组title和result。
在这里插入图片描述
methods的代码
1、从list数组中分离处理后,拿到我想要的title数组和result数组;
2、将title和result赋值给画布中的option里边对应的data。
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
mounted中的代码
在这里插入图片描述
在这里插入图片描述

有时在使用echarts实现将相关数据生成想要的图形表时

1、会出现浏览器中看到dom结构已经有了,但是画布里边的图形没有渲染出来,可能的原因就是,你在需要用来转成画布图形的数据还没有拿到或没有拿全,就已经调用了创建画布容器的方法,所以在实际开发中需要保证想要的数据已经拿到的基础上再去调用创建画布的方法。

2、 还有建议将创建画布的方法放在this.$nextTick中。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/AllinToyou/article/detail/108800
推荐阅读