简介

在使用echarts时，发现它不是自适应的。
比如浏览器全屏时打开了有echarts的页面，加载完后，缩小窗口，就会很奇怪，所以研究了一下怎么实现主动适应。
在这里插入图片描述

具体实现

在app.vue中通过window.onresize事件进行实时存储值，vuex中写一个数字++的方法

// app.vue
  // 初始化数据
  initDataFun() {
    // 监听屏幕高度、宽度变化，同步存储高度、宽度
    window.onresize = () => {
      return (() => {
          this.$store.commit('common/SET_WINDOW_ONRESIZE'); // 通知网页内容区域可视化宽高有变化
      })();
    };
  }

// vuex
  const state = {
    windowOnResizeNum: 0
  }
  const mutations = {
    // 通知浏览器宽高有变化
    SET_WINDOW_ONRESIZE: (state) => {
      state.windowOnResizeNum++;
    }
  }

在echarts组件中引入vuex存储的宽高值，并进行监听，
宽高值有变化时，重新初始化echarts的大小
**

echartsdom_34">注意：echarts所在dom容器，宽度需要百分比，高度看使用情况

**，否则还要什么适应宽度呢？

之所以dom用的ref，是因为这是封装的组件，就不能用id（id全局唯一）。

// echarts组件
import { mapGetters } from 'vuex';
export default {
  watch: {
    // 监听浏览器可视区域宽高是否变化
    windowOnResizeNum() {
      this.resizeByWindowFun(); // 初始化echarts图表大小
    },
  },
  computed: {
    ...mapGetters(['screenHeight', 'screenWidth']),
  },
  methods: {
    // 根据窗口大小 初始化echarts图表大小
    resizeByWindowFun() {
      echarts.init(this.$refs.myChartBar).resize();
    },
  },
}

大小窗口时的效果图

在这里插入图片描述

完整代码，附封装的简单柱状图组件页面参数设置

<template>
  <div ref="myChartBar" :style="{ width: width, height: height }"></div>
</template>

<script>
import { mapGetters } from 'vuex';
// 引入基本模板
let echarts = require('echarts/lib/echarts');
// 引入柱状图组件
require('echarts/lib/chart/bar');
// 引入提示框和title组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
export default {
  props: {
    // 数据
    barData: {
      type: Object,
      default() {
        return {
          title: '统计图标题', // 标题
          xAxis: {
            data: [],
          }, // x轴数据
          yAxis: {
            min: null,
            max: null,
          }, // y轴数据
          series: {
            data: [],
          }, // 移入提示数据
        };
      },
    },
    // 宽度-------------划重点---！！！想要自适应，宽度就要百分比，不能固定值！！！--------------
    width: {
      type: String,
      default: '100%',
    },
    // 高度--------合理大小就行，别放大时太扁，缩小时太高
    height: {
      type: String,
      default: '400px',
    },
  },
  data() {
    return {};
  },
  mounted() {
    this.initDataFun({
        xAxis: {
          data: [
            '期终考试',
            '期中考试',
            '期末考试',
            '4月',
            '5月',
            '6月',
            '7月',
            '8月',
            '9月',
            '10月',
            '11月',
            '12月',
          ],
        }, // x轴数据
        series: {
          data: [
            1113,
            823,
            1140,
            1110,
            405,
            813,
            823,
            389,
            678,
            407,
            1178,
            789,
          ],
        }, // 移入提示数据
      }); // 初始化数据
  },
  watch: {
    // 监听浏览器可视区域宽高是否变化
    windowOnResizeNum() {
      this.resizeByWindowFun(); // 初始化echarts图表大小
    },
  },
  computed: {
    ...mapGetters(['windowOnResizeNum']),
  },
  methods: {
    // 初始化数据
    initDataFun(barData) {
      var dataShadow = [];
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs.myChartBar);
      // 绘制图表
      myChart.setOption({
        // title: { text: barData.title },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: barData.xAxis.data,
        },
        yAxis: {
          type: 'value',
          // min: barData.yAxis.min,
          // max: barData.yAxis.max,
        },
        series: [
          {
            type: 'bar',
            data: barData.series.data,
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)',
            },
            itemStyle: {
              color: '#1890FF',
            },
            emphasis: {
              itemStyle: {
                color: '#1890FF',
              },
            },
          },
        ],
      });
    },
    // 根据窗口大小 初始化echarts图表大小
    resizeByWindowFun() {
      echarts.init(this.$refs.myChartBar).resize();
    },
  },
};
</script>

<style scoped></style>