关于vue-echarts数据更新不刷新的问题

Question

html部分

<template>
    <v-chart v-if="isShow" :options="getChartOption" theme="th" />
</template>

getChartOption

computed: {
    getChartOption() { return this.chartOption}
},

修改数据方面

setDefaulChartOption() {
    this.chartOption = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
        }]
    }
}

页面显示

打印 chartOption 数据可以打印出来
但是 图表 出不来。

Answer 1

页雨 2020-07-22 00:47:11

个人猜测是在你引用这个组件的父容器没有设置有效的高度，也就是包裹这个 v-chart 的容器高度为 0 造成的。如果是跟着老师的步骤走的，那么你的 v-chart 容器的样式肯定也是设置 width:100%; height: 100%; 然后高度坍塌了

Answer 2

扬_灵 2020-07-21 17:54:52

同学你好，你可以看一下下面的这个案例。

<template>
<v-chart :options="getChartOption" />
<span @click="setDefaulChartOption">退货率 </span> 
</template>
<script>
export default {
computed: {
getChartOption() {
return this.chartOption
}
},
data() {
return {
chartOption: {} // 如果初始这里没有图表的属性相关的设置不会显示图表的
}
},
methods: {
// 当点击事件触发后会执行computed事件这时才会显示数据
setDefaulChartOption() {
this.chartOption = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}
]
}
}
}
}
</script>

或者你也可以将你的完成代码发一下，我在本地帮你定位一下，如果不能解决你的问题，可以继续追问。

• 提问者 希卡利 #1

  我找到问题了，虽然我设置了高度，但是组件初始化的时候，高度是0，当组件有高度的时候 vue-echats的resezi是对全局的所以没有东西。