1.开发环境vue+typescripts+dataV
2.电脑系统windows10专业版
3.在开发的过程中,我们会使用到一些图表框架,在这里我使用的是dataV,在使用dataV的使用,你可能会遇到这一中情况,那就是dataV赋值成功了后台的数据,但是却渲染不出来,使用假数据是没有问题的,这个是什么问题造成的呢?解决方法是?
4.解决方法如下,在return中添加如下代码:
//后台传给你的值,必须是一个对象形式
//注意,这个数据结构是 datav环形图的
BtObj: {
data: [
{
name: "周口",
value: 55,
},
{
name: "南阳",
value: 120,
},
],
color: ["#C23531", "#0F8A61"],
},
5.然后在数据请求的时候,直接把这个值重新赋值为后台的数据就可以啦,实例代码如下:
chen().then((res) => {
console.log(res);
console.log(res.data);
let _Rthis: any = this;
let ChenArr: any = res.data.data;
console.log("我是data");
console.log(_Rthis.BtObj.data);
console.log("结束");
_Rthis.BtObj = res.data.config;
console.log("我是data");
console.log(_Rthis.BtObj.data);
console.log("结束");
})
6.然后在template中添加如下代码:
<dv-active-ring-chart
:config="BtObj"
style="width: 300px; height: 300px"
/>
7.本期的教程到了这里就结束啦,是不是很简单,让我们一起努力走向巅峰!