關於Echarts的使用和遇到的問題

對於插件工具，感覺按着官方的教程，便可以使用，但是看這個Echarts有點暈乎乎的，還是不能快速的學習啊。

一、在webpack中使用ECharts

//通過 npm 獲取 echarts
npm install echarts --save

在項目里需要用到的界面中，按需引入需要的模塊，不做全局引入；如果完整引入Echarts，會有很多冗余的文件，體積會比較大，造成資源加載等問題。（注:require和import的引入區別）

// 引入 ECharts 主模塊
import ECharts from "echarts/lib/echarts";
//引入折線圖
import "echarts/lib/chart/line";
//引入提示框
import "echarts/lib/component/tooltip";
//引入標題
import "echarts/lib/component/title";
//引入圖例標志
import "echarts/lib/component/legend";

<div
    class="statisticsLineEchart"
    ref="lineEchart"
></div>

 //獲取到准備繪制的DOM對象
 const ele = this.$refs["lineEchart"];
 //初始化echarts實例
 this.echart = ECharts.init(ele);
 //繪制表格
 this.echart.setOption(this.lineEchartOptions);    

二、配置選項

lineEchartOptions = {
    color: ["#FFC44F", "#d14a61", "#76D1D7"],//設置顏色
    title: {  //標題，按需引入其模塊，包含表的主標題和副標題的相關配置},
    tooltip: {  //提示，鼠標滑過，鼠標移上去那個提示框的配置},
    legend: {//圖例，如果想要圖例有效果，legend中數據要和series中name的值保持一致 
      data:["新增","刪除"]
    },
    grid: {//網格  },
    toolbox: {//工具箱，內置有導出圖片，數據視圖，動態類型切換，數據區域縮放，重置五個工具},
    xAxis: {//x軸},
    yAxis: { //y軸},
    series: [{ //數據
} ]
};

• 圖例legend樣式：

• 提示tooltip樣式:               

•  

  工具箱toolbox樣式:           

  

三、問題

• 每次數據請求回來后，使用this.nextTick(()=>{})進行繪制圖案
• TypeError:Cannot read property 'getAttribute' of undefined （在執行圖表對象渲染方法init(dom)的時候，確保對象的存在）