1问题描述

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

无自适应效果图

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

有自适应效果图

2 解决

下载依赖：

cnpm install echarts --save

代码步骤

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

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

<script>
import * as echarts from 'echarts'
export default {
  name: 'HelloWorld',
  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(this.$refs.chartDom)
      // 第四步，执行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 scoped>
#echart {
  width: 100%;
  height: 600px;
}
</style>

参考：https://auroras.blog.csdn.net/article/details/122410853

#echart {

  width: 100%;

  height:20vh

}

可以实现宽高都自适应

3 使用社区的 例子

ChartLib

 

常用社区：

ECharts社区 合集整理_SangHongxv的博客-CSDN博客

4 总结项目中使用方法

 echarts的使用

1 安装 ：cnpm install echarts --save

2 引入

全局引入

局部引入 哪使用引用到那

3 使用

【flex + 图标缩放】 实现echarts图标  让元素跟随页面大小的改变而改变

1 只设置flex 发现其他盒子都会随着页面缩放而变化，但是echart即使用了flex也没有变化，因为

图表没有跟着改变

2 解决：

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

<template>
  <div id="echart" ref="chartDom"></div>
</template>
 
<script>
import * as echarts from 'echarts'
export default {
  name: 'HelloWorld',
  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(this.$refs.chartDom)
      // 第四步，执行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 scoped>
#echart {
  width: 100%;
  height: 600px;
}
</style>

3 防止页面一直随着屏幕变化，可以给最外边的大盒子一个min-widhth;低于最小宽度，就不会随着屏幕变化了

#home {
	height: 100%;
	min-width: 1400px;
}

4 可以实现宽高都自适应

#echart {

  width: 100%;

  height:20vh

}