eacharts寬度自適應

圖表自適應chart.resize()

話不多說上代碼，搞了好久

npm

npm install echarts --save

引入echarts   main.js中// echarts  

import Echarts from 'echarts' import 'echarts/theme/macarons.js'  //引入echarts樣式主題

//Vue.prototype.echarts = Echarts //因為我是只有一個頁面就只在需要的頁面中引入了echarts，這里就不在vue原型上定義了
 Vue.use(Echarts)

 需要頁面引入echarts

import echarts from "echarts";

html代碼

<div id="echarts" class="hq-height-50 echartsStyle"></div>

// 注意：echarts要給定一個高度

updata() {
    this.$nextTick(() => {
      let dom = document.getElementById("echarts");
      let myChart = echarts.init(dom, "macarons"); // dom：元素  macarons：樣式 macarons.js  若果是全局原型上定義的在echarts前面加this.
     // 添加一個定時器給window注冊一個onresize事件，給圖表加resize（）方法 就可以實現寬高自適應了
      window.onresize = function() {
        myChart.resize();
        };
       myChart.setOption(option);
      });
    }