echarts切换飞线图未清空_解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)...

1.问题描述：在echarts弹框中嵌入echarts，在页面数据改变时，echarts视图不更新；

2.解决办法：

数据更新时以为drawLine()函数在updated()里面执行(这种情况之前碰到过)，后来发现热更新之后视图更新了，所以跟周期函数没有关系；参考了一下网上的一些资料，发现可以用vue中的watch()函数来监听数据的更新，一旦数据更新了，那么就在watch()函数中调用drawLine()函数，发现视图更新了，完美解决。

补充知识：vue echarts line动态刷新数据组件

我就废话不多说了，大家还是直接看代码吧~

{ {echartData.title}}

{ {echartData.title2}}

{ {echartData.title3}}

export default {

name: "echartLine",

props: {

echartData: {

type: Object,

default: () => {}

}

},

data() {

return {

img: require("../assets/time_bj.png")

};

},

mounted() {

setTimeout(() => {

this.ButtomDrawLine();

}, 500);

},

created() {},

methods: {

ButtomDrawLine() {

let t = this;

let myChart = this.$echarts.init(this.$refs.lineDom);

myChart.setOption({

title: { text: "" },

tooltip: {

trigger: "axis",

borderRadius: 8, //边框圆角

backgroundColor: "rgba(51,204,204,0)", //背景颜色(此时为默认色)

formatter: function(params) {

let value = params[0].value;

let name = params[0].name;

let html = `

${value}

${t.echartData.title3}

${name}

`;

return html;

},

textStyle: { color: "#f