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);
      });
    }

转载于:https://www.cnblogs.com/duhui/p/10469713.html