echarts自适应父级盒子宽度

效果:手动改变窗口大小,echarts实现自动适应父级盒子宽度

1.在vue中安装一个插件element-resize-detector-----这是一个元素调整大小检测器

npm install element-resize-detector

2.安装成功后在页面引用

<template>
 <div>
 <div id='echartsWarp'>
 <div id="speeds" :style="{ width: '100%', height: '450px' }"></div>
 <div>
 </div>
</template>
<script>
// 直接导入使用，也可以在main.js中引入
//elementResizeDetectorMaker，该全局函数是使元素调整大小检测器实例的maker函数。
var elementResizeDetectorMaker = require("element-resize-detector");
export default {
  name: "Index",
  data() {
    return {
    }
    },
    mounted(){
    this.changeEchartsWidthApi();
    },
    methods:{
    //监听盒子大小,改变echarts宽度,实现echarts自适应
    changeEchartsWidthApi() {
      // 创建实例，无参数
      var erd = elementResizeDetectorMaker(); //使用默认选项（将使用基于对象的方法）
      // 创建实例带参数
      // 使用基于超快速滚动的方法。
      // 这是推荐的策略。
      var erdUltraFast = elementResizeDetectorMaker({
        strategy: "scroll",
        callOnAdd: true, //callOnAdd选项，用于确定在添加侦听器时是否应调用它们。默认为true。
        //如果为true，则确保在添加侦听器后将对其进行调用。如果为false，则在添加侦听器时将不保证其
        //被调用（不会阻止其被调用）
        debug: true,
      });
      //监听class为staticNextMain的元素 大小变化
      var self = this;
      //侦听元素的调整大小事件，并使用元素作为调整大小事件的参数来调用侦听器函数。传递给函数的选项将
      //覆盖实例选项
      erd.listenTo(document.getElementById("echartsWarp"), function (element) {
        //今日车速
        self.speedChartsApi();
      });
    },
      //今日车速
    speedChartsApi() {
      // 基于准备好的dom，初始化echarts实例
      this.$nextTick((_) => {
        const dom = document.getElementById("speeds");
        dom.style.width = dom.parentNode.parentNode.clientWidth + "px";
        // let myChart = this.$echarts.init(document.getElementById("speeds"));
        let myChart = this.$echarts.init(dom);
        // 绘制图表
        myChart.setOption({
          title: {
            text: "2022-01-14",
            left: "50px",
            textStyle: {
              color: "#666666", //颜色
              fontStyle: "normal", //风格
              fontWeight: "normal", //粗细
              fontFamily: "Microsoft yahei", //字体
              fontSize: 16, //大小
              align: "center", //水平对齐
            },
          },
          legend: {
            data: ["历史车速"],
          },
          tooltip: {
            trigger: "axis",
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: [
              "06:15",
              "07:15",
              "08:15",
              "09:15",
              "10:15",
              "11:15",
              "12:15",
              "13:15",
              "14:15",
              "15:15",
              "16:15",
              "17:15",
              "18:15",
              "19:15",
              "20:15",
              "21:15",
              "22:15",
              "23:15",
            ],
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: [
                820, 932, 901, 934, 1290, 1330, 1320, 2344, 234, 123, 222, 111,
                333, 345, 1234, 234, 5678, 234,
              ],
              name: "历史车速",
              type: "line",
              smooth: true, //平滑
              color: "#24C2DC",
              stack: "Total",
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#7CE2D8", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#E9FAF8", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
          ],
        });
        myChart.resize();
        setTimeout(function () {
          window.addEventListener('resize', () => {
            myChart.resize();
          })
        }, 200);
      });
    },
    }
    }
</script>