echarts图表大小自适应

官网lianjie

<template>
  <div class="main"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "",
  props: {
    //父组件传进来的控制高度
    height: {
      type: String,
      default: "300px",
    },
    width: {
      type: String,
      default: "500px",
    },
  },
  data() {
    return {
      myChart: null,
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(
        document.getElementsByClassName("main")[0], //实例容器，一般是一个具有高宽的 DIV 元素
        null, //应用的主题,如果不指定主题，也需在传入opts前先传入null
        {
          //option配置对象，设置当前echarts实例的宽高为600px,这里可以设置string也可以设置为number
          height: "600px",
        }
      );
      // 绘制图表
      this.myChart.setOption({
        title: {
          text: "ECharts 入门示例",
        },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });
      // 当浏览器宽度改变的时候，图表的大小也跟着改变
      window.onresize = () => {
        this.myChart.resize();
      };
    },
  },
};
</script>