数据在vue中是被灵活操作的
当遇到如图这种echarts的数据需要通过接口获取,并且进行相应的删除和添加操作时,echarts的数量与数据要与数据同步刷新
想要独立的echarts动态渲染,我想到通过封装echarts组件通过props传递接口数据来实现
import yearCom from "./yearCom.vue";//在父组件中引入封装好的echarts组件
export default {
components: { yearCom },//注册组件
data() {}
}
我们在父组件获取到接口数据时,将接口返回数组(此图以数组为例)的总数count或通过.length获取该数据的长度,在data中定义一个变量dataCount将数组长度存起来
export default {
components: { yearCom },//注册组件
data() {
dataCount:[],
}
}
async getData() {
const { data } = await this.$post(url);//这里我直接用了封装好的axios
this.dataCount = Object.keys(data.data);//将对象的key值转存在数组中
}
这里接口返回的数据的格式为
可以看到数据的格式为数组嵌套数组每个二级数组中有一个对象 我们用到对象中的name作为echarts的title value的值作为series的数据. 每个echrts中需要的数据格式是
arrList: [
{ value: 123, name: "辣椒酱" },
{ value: 102, name: "豆瓣酱" },
],
所以我们将接口返回的数据进行处理
async getData() {
const { data } = await this.$post(url);//这里我直接用了封装好的axios
this.dataCount = Object.keys(data.data);//获取到数组的长度
this.dataList = [];
for (var key in datass) {
datass[key].forEach((val) => {
val.value = val.type;
});
this.dataList.push(datass[key]);//将对象中value push到一个空的新数组
}
}
最后得到名称数组:dataCount 数据数组:dataList和的数据格式为
处理好了数据,接下来就可以使用了
通过循环种类数组来控制组件需要被调用的次数,同时item可以用做无数据时的提示信息,这样就可以根据数组的长度动态渲染出组件的个数了(注意:echarts的组件容器必须要有高度),因为组件是被循环渲染的,所以即使是组件共用一个id也不会有问题,也就是说虽然在一个页面多次出现,但是组件之间是相互独立的!
<div v-for="(item, index) in dataCount" :key="index">
<div v-if="dataList[index] != ''">
<year-com
v-if="hackReset"
:opinionData="dataList[index]"
></year-com>
</div>
<div v-else>{{ item }}暂无数据</div>
</div>
效果已经初步实现
但是在测试中我发现当反复请求接口时,虽然数据发生了变化,但是echarts并没有实时刷新,传过去的数据也和获取到的不一致,而通过echarts组件中每次执行前销毁echarts这个方法是不能实现的,原因是我们是多次调用组件而并非只是简单执行echarts函数 [奉上echarts销毁方法 this.
e
c
h
a
r
t
s
.
i
n
i
t
(
t
h
i
s
.
echarts.init(this.
echarts.init(this.refs.yearHasDatas).dispose();] yearHasDatas为echarts容器的ref
为了解决这个问题,我想到了通过watch监听要传给组件的数据的变化,一旦数据发生变化,我们就将组件全部销毁,然后重新建立,再传入新值
hackReset 用于组件销毁与重建,与定义变量相似,但是值为true,或false,同样也是在data()中定义
<year-com
v-if="hackReset"
:opinionData="dataList[index]"
></year-com>
export default {
components: { yearCom },
data() {
return {
hackReset: false,
}
},
watch: {
dataList(newVal, oldVal) {
this.hackReset = false; //销毁组件
this.$nextTick(() => {
this.hackReset = true; //重建组件
});
this.dataList = newVal;//传入新值
},
},
}
通过这些方法vue动态渲染echarts的各种问题就迎刃而解了