关于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>

总结

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