echars 图表根据容器宽度自适应

首先要创一个echars图表实例。我是用vue写的。

<script>

export default {

  data() {

    return {

      chartInstance: null,

   ｝

 ｝

运用生命钩子在监听窗口改变事件，当窗口发生变化时执行echars的resize方法.

mounted() {

  window.onresize = () => {

     this.chartInstance.resize()

 ｝

},

methods: {

// 初始化echarts图表给chartInstance 赋值

  drawLine() {

    let dom = this.$refs.chart

    this.chartInstance = this.$echarts.init(dom, 'light')

    // 图表清空缓存

    this.chartInstance.clear()

    this.chartInstance.setOption(this.chartOptions, true)

  }

}

<script>