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

来源：8-14 顶部核心指标组件数据接入

希卡利

2020-07-21

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 数据可以打印出来
但是图表出不来。

写回答

2回答

页雨

2020-07-22

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

扬_灵

2020-07-21

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

<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>

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

希卡利

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

2020-07-22

共1条回复

数据可视化入门到精通-打造前端差异化竞争力

同级别前端，掌握数据可视化薪资更高

1520 学习 · 1043 问题

查看课程

相似问题

vue-cli 是4 了，vue-echarts 到6 版本了 echarts 到5了

回答 2