技術標籤：echarts + vuevueecharts資料視覺化

專案場景：

vue中使用echarts折線圖，需要點選獲取資料然後顯示對應的折線圖

問題描述：

顯示折線圖時發現太小，只能顯示一部分，圖表大小並沒有自適應，初始化時已經給了resize

this.linechart = echarts.init(this.$refs.linechart);
this.linechart.setOption(this.lineOption);
window.addEventListener("resize", () => {
  this.linechart.
 
resize();
});

原因分析：

Ajax請求獲取資料慢，圖表已經顯示出來了，沒有獲取到dom的高度和寬度

解決方案：

在獲取資料成功之後再呼叫setOption

//子元件中：
setOption(){
  this.linechart = echarts.init(this.$refs.linechart);
  this.linechart.setOption(this.lineOption);
   window.addEventListener("resize", () => {
    this.linechart.resize();
  });
 

}

//父元件中
<line-chart :chartData="xAxis" ref="xchildecharts" />
//獲取資料之後
this.$nextTick(function () {
  this.$refs.xchildecharts.setOption()
});