关于echarts:vue中设置echarts宽度自适应效果

问题形容

咱们应用 vue 做我的项目的时候，经常须要做到 echarts 图表的自适应，个别是依据页面的宽度做对应的适应。本文记录一下设置 echarts 图表的自适应的步骤。咱们先看一下没有做 echarts 自适应的成果

无自适应效果图

咱们发现 echarts 图的宽度并没有随着页面宽度的变动而变动

有自适应效果图

很显然，这个才是咱们想要的成果

代码步骤

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

<script>
// 第一步，引入 echarts 插件以供应用
import Echarts from "echarts";
export default {data() {
    return {
      myChart: null, // 定义变量用来寄存 echarts 实例
      option: { // 配置项写在 data 外面方便管理
        title: {text: "ECharts 示例",},
        tooltip: {},
        xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      },
    };
  },
  mounted() {
    // 第二步，在页面加载渲染的时候执行 echarts 画图办法
    this.drawEcharts();},
  methods: {drawEcharts() {
      // 第三步，通过 echarts 的 init 办法实例化一个 echarts 对象 myChart，并，保留在 data 变量中
      this.myChart = Echarts.init(document.getElementById("echart"));
      // 第四步，执行 myChart 的 setOption 办法去画图，当然至于配置项，咱们要提前配置好，这里的配置项
      //         写在 data 中，不便咱们在一些事件中去批改对应配置项，比方点击按钮更改配置项数据
      this.myChart.setOption(this.option);
      // 第五步，在页面初始化加载的时候绑定页面 resize 事件监听。补充 resize 事件：resize 事件是在浏览器窗口大小扭转时，会触发。//        如当用户调整窗口大小，或者最大化、最小化、复原窗口大小显示时触发 resize 事件。//        咱们个别应用这个事件去做窗口大小与对应元素的大小适配
      window.addEventListener("resize", () => {
        // 第六步，执行 echarts 自带的 resize 办法，即可做到让 echarts 图表自适应
        this.myChart.resize();
        // 如果有多个 echarts，就在这里执行多个 echarts 实例的 resize 办法, 不过个别要做组件化开发，即一个.vue 文件只会搁置一个 echarts 实例
        /*
        this.myChart2.resize();
        this.myChart3.resize();
        ......
        */
      });
    },
  },
};
</script>

<style lang="less" scoped>
#echart {
  width: 100%;
  height: 600px;
}
</style>

总结

好忘性不如烂笔头，记录一下吧。欢送各位大佬批评指正