简介
在使用echarts时，发现它不是自适应的。
比如浏览器全屏时打开了有echarts的页面，加载完后，缩小窗口，就会很奇怪，所以研究了一下怎么实现主动适应。
具体实现
在app.vue中通过window.onresize事件进行实时存储值，vuex中写一个数字++的方法// app.vue// 初始化数据initDataFun() {// 监听屏幕高度、宽度变化，同步存储高度、宽度window.onresize = () => {return (() => {this.$mit('common/SET_WINDOW_ONRESIZE'); // 通知网页内容区域可视化宽高有变化})();};}// vuexconst state = {windowOnResizeNum: 0}const mutations = {// 通知浏览器宽高有变化SET_WINDOW_ONRESIZE: (state) => {state.windowOnResizeNum++;}}
在echarts组件中引入vuex存储的宽高值，并进行监听，
宽高值有变化时，重新初始化echarts的大小
**
注意：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>
最后
觉得有用的朋友请用你的金手指点一下赞，或者评论留言一起探讨技术！
