v-charts没有根据数据刷新动态渲染的问题

 vue工程中需要用到echarts显示柱形图,而echarts有个对vue很友好的开源封装项目叫v-charts,而使用v-charts的过程中碰到了数据更新但是v-charts图形不刷新的问题,也就是没监听到数据,下面是未更新图形的代码写法:

    
 export default {
        name: "...",
        props: {
            ...
        },
        computed: {
            ...
        },
        data() {
            return {
                xAxis: {
                    type: 'value'
                },
                yAxis: {
                    type: 'category',
                    data: this.categroy
                },
               
                ...
                category:[],
                ...
            }
        },
        created() {
        },
        watch: {
            ...
        },
        methods: {
            loadData() {
                // 发起请求得到数据
                this.apiRmp.cmcApi.getCt7AvgTimeSummaryMetrics(this.params)
                .then(data => {
                    ...
                    this.populateData();
                }).catch(e => this.$cdpMsgAlert('Failed to load CT7 average time summary metrics',
                        e)).finally(() => {
                });
            },
            populateData() {
                // 这里对数据进行更新,domUtils是项目封装的工具模块不用关心
                if (domUtils.isNotEmptyArray(data)) {
                    data.forEach(i => {
                        // 更新 category 数据,这样v-charts不会监听到
                        this.category.push(i.name);
                    });
                }
            },
            ...
        }
    }

populateData对this.category进行更新,但是发现y轴的维度没有更新,很奇怪,查了很久没有答案,后来尝试以下写法得以成功:

 export default {
        name: "...",
        props: {
            ...
        },
        computed: {
            ...
        },
        data() {
            return {
                xAxis: {
                    type: 'value'
                },
                yAxis: {
                    type: 'category',
                    // 直接初始化yAxis.data为数组
                    data: []
                },
               
                ...
                // 去掉category
                // category:[],
                ...
            }
        },
        created() {
        },
        watch: {
            ...
        },
        methods: {
            ...
            populateData() {
                if (domUtils.isNotEmptyArray(data)) {
                    data.forEach(i => {
                        // 直接使用到yAxis中要更新的数组
                        this.yAxis.data.push(i.name);
                    });
                }
            },
            ...
        }
    }

成功更新数据刷新v-charts图形。是个挺麻烦的问题,这里记录下,希望能给有困扰的人一些帮助^.^

你可能感兴趣的:(vue,v-charts,echarts,柱形图,渲染失败,javascript)