vue中设置echarts宽度自适应

简介: vue中设置echarts宽度自适应

highlight: a11y-dark

问题描述

我们使用vue做项目的时候,常常需要做到echarts图表的自适应,一般是根据页面的宽度做对应的适应。本文记录一下设置echarts图表的自适应的步骤。我们先看一下没有做echarts自适应的效果

无自适应效果图

GIF 2021-6-22 13-05-54.gif

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

有自适应效果图

GIF 2021-6-22 13-07-37.gif

很显然,这个才是我们想要的效果

代码步骤

echart图表本身提供了一个resize的函数,我们只需要监听页面的resize变化以后,去执行echarts的resize方法即可重绘canvas,从而实现对应自适应效果。请看代码中的注释步骤

<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();
        ......
        */
      });
    },
    beforeDestroy() {
      /* 页面组件销毁的时候,别忘了移除绑定的监听resize事件,否则的话,多渲染几次
      容易导致内存泄漏和额外CPU或GPU占用哦*/
      window.removeEventListener("resize", () => {
        this.myChart.resize();
      });
    },
  },
};
</script>

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

总结

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

相关文章
|
1月前
|
JavaScript
vue基于vw实现移动端自适应
vue基于vw实现移动端自适应
19 0
|
2月前
|
JavaScript 算法 前端开发
vue + echarts实现国省市三级下钻联动
vue + echarts实现国省市三级下钻联动
57 0
echarts设置单位的偏移
echarts设置单位的偏移
|
3月前
|
JavaScript 数据可视化 前端开发
Vue整合HighCharts和ECharts实现数据可视化
Vue整合HighCharts和ECharts实现数据可视化
24 0
|
3月前
|
JSON JavaScript 定位技术
Vue中使用echarts@4.x中国地图及AMap相关API的使用
Vue中使用echarts@4.x中国地图及AMap相关API的使用
144 0
Vue中使用echarts@4.x中国地图及AMap相关API的使用
|
3月前
|
JavaScript 数据可视化 前端开发
ECharts 的配置语法:配置选项、数据格式、样式设置
ECharts 的配置语法:配置选项、数据格式、样式设置
103 1
echarts设置多条折线不是你想的那样简单
echarts设置多条折线不是你想的那样简单
echarts去掉y轴线、设置x轴线的颜色、x轴文字颜色
echarts去掉y轴线、设置x轴线的颜色、x轴文字颜色
|
4月前
|
JavaScript 容器
vue echarts图表自适应屏幕变化
vue echarts图表自适应屏幕变化
63 0