vue中echart宽度自适应

首先根据echart的官网完成图表的绘制

重点来了

需要在mounted钩子函数中加入一个window.onresize = （）=> {}即可
此为一个图表的解决办法，仅为个人记录

直接上代码吧

<template>
  <div>
    <span>日期</span>
    <button :class="{active:shows==1}" @click="drawLine();change1()">近一周</button>
    <button :class="{active:shows==2}" @click="drawLine2();change2()">近两周</button>
    <div id="ChartDiv">
      <div
      id="myChart"
      :style="{width:'100%',height:'500px'}"
    />
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
      shows: 1
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.drawLine()
      window.onresize = () => {
      // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'));
        myChart.resize();
      };
    })
  },
  methods: {
    drawLine() {
      var chartDom = document.getElementById('myChart')
      var myChart = echarts.init(chartDom)
      var option = {
        title: {
          show: true,
          text: '近一周收入',
          subtext: '仅展示最近'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c}$ '
        },
        grid: {
          top: '20%',
          left: '10%'
        },

        xAxis: {
          type: 'category',
          boundaryGap: false,

          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value',
          scale: true
        },
        series: [
          {
            data: [0, 0, 0, 0, 0, 0, 0],
            type: 'line',
					  symbolSize: 12, // 折线点的大小
            itemStyle: {
              normal: {
                lineStyle: {
                  color: 'green'
                }
              }
            },
            markLine: {
              data: [
                {
                  type: 'average'
                }
              ]
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    drawLine2() {
      var chartDom = document.getElementById('myChart')
      var myChart = echarts.init(chartDom)
      var option = {
        title: {
          show: true,
          text: '近两周收入',
          subtext: '仅展示最近'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c}$ '
        },
        grid: {
          top: '20%',
          left: '10%'
        },

        xAxis: {
          type: 'category',
          boundaryGap: false,

          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value',
          scale: true
        },
        series: [
          {
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            type: 'line',
					  symbolSize: 12, // 折线点的大小
            itemStyle: {
              normal: {
                lineStyle: {
                  color: 'green'
                }
              }
            },
            markLine: {
              data: [
                {
                  type: 'average'
                }
              ]
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    change1() {
      this.shows = 1
    },
    change2() {
      this.shows = 2
    }
  }
}
</script>

<style scoped>
h2 {
  text-align: center;
  padding: 30px;
  font-size: 18px;
}
.ChartDiv{
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
#myChart {
  margin-top:25px;
  width: 50%;
  height: 500px;
  /* border: 1px solid red; */
  /* margin: 0 auto; */
}
span{
  padding-left:20px;
}
button{
  height:30px;
  width:80px;
  margin: 10px;
  background: #fff;
  border-radius: 10px;
  outline: none;
  color:#000
}
.active{
  height:30px;
  width:80px;
  margin: 10px;
  background:green;
  border-radius: 10px;
  outline: none;
  color: #fff;
}
#myChart{
  width:100%;
  height:100%;
}
</style>