Vue echart折线图 自适应大小

1.安装
npm install echarts --save
2.引入使用
首先新建一个组件文件

如果报echarts undefined错误，就用as xxx from xxx引入
必须要设置定高，不然不会显示

<template>
  <div id="chartLineBox"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "",
  data() {
    return {};
  },
  methods: {},

  mounted() {
    this.chartLine = echarts.init(document.getElementById("chartLineBox"));
    window.addEventListener("resize", () => {
      //自适应处理
      this.chartLine.resize();
    });
    // 指定图表的配置项和数据
    var option = {
      tooltip: {
        //设置tip提示
        trigger: "axis",
      },

      legend: {
        left: "center",
        top: "top",
        itemWidth: 20,
        itemHeight: 10,
        formatter: "{name}",
        textStyle: {
          color: "#6495ED",
        },
        data: ["招商银行", "浦发银行"],
        calculable: true,//小标题配置
      },
      color: ["#F4A460", "#DDA0DD"], //设置区分（每条线是什么颜色，和 legend 一一对应）
      xAxis: {
        type: "category", // 还有其他的type，可以去官网喵两眼哦
        axisLine: {
          lineStyle: {
            color: "#6495ED",
            width: 2,//竖线宽度
          },
        },

        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // x轴数据
      },
      yAxis: {
        type: "value",
        axisLine: {
          show: true, //设置竖线是否显示
          lineStyle: {
            color: "#6495ED",
            width: 2,
          },
        },
        axisTick: { show: false }, //是否显示刻度线
      },
      series: [
        {
          name: "招商银行",
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: "line",
           lineStyle: {
            color: "#F4A460",
            width: 2,
          },
        },
        {
          name: "浦发银行",
          data: [620, 711, 823, 934, 1445, 1456, 1178],
          type: "line",
          lineStyle: {
            color: "#DDA0DD",
            width: 2,
          },
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    this.chartLine.setOption(option);
  },
};
</script>
<style scoped>
#chartLineBox {
  width: 100%;
  height: 100%;
}
</style>

3.引入组件使用

/*
 *@Author: yanglirong
 *@Date: 2021-04-19 11:06:27
 *@Description: 
*/
<template>
  <div class="statistics">
    <div class="line_box">
      <EchartLine></EchartLine>
    </div>
  </div>
</template>

<script>
import EchartLine from "@/views/components/echartsline";
export default {
  name: "",
  components: {
    EchartLine,
  },
};
</script>
<style lang="scss" scoped>
.statistics {
  width: 100%;
  height: 100%;
  padding: 20px;
  background-color: #f2f5f8; 
  .line_box {
    padding: 30px;
    height: calc(100vh - 170px);
    margin-top: 25px;
    background-color: #ffffff;
    box-shadow: 0px 1px 10px gainsboro;
    border-radius: 10px;
  }
}
</style>

效果图：白框可以根据窗口的大小自适应，直接上代码

getHeight() { //计算高度
      let box = document.getElementById("top_box");
      var Height = box.clientHeight || box.offsetHeight; //元素高度
      let line = document.getElementById("line");
      line.style.height = (window.innerHeight - Height - 130) +"px";
      // window.innerHeight  窗口高度
    },
mounted() {
    window.onresize = () => {  //监听到窗口大小变化时，就重新计算高度
      this.getHeight();  
    };
    this.getHeight(); //页面初始化时计算高度
  },