ECharts的resize失效原因以及使用方法

原创

A吴迪网络工作室 2022-03-21 15:19:31 ©著作权

文章标签 ECharts的resize失效解决办法 ECharts随窗口大小自适应大小 ECharts的resize使用方法 ECharts做自适应大小 Echarts的resize无效解决办法 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者A吴迪网络工作室的原创作品，请联系作者获取转载授权，否则将追究法律责任

感谢内容提供者：金牛区吴迪软件开发工作室

很多朋友在开发的过程中要把ECharts图标做成自适应浏览器宽高的效果。于是去翻看ECharts官网发现了resize方法，结果用了之后发现没用，而且根本不知道什么原因。

解决办法：

不能给ECharts的容器设置固定的宽高。

宽度要写百分比

高度要写vh

然后再搭配resize方法才可以实现根据浏览器大小而改变大小的功能

示例代码：

let ECharts = echarts.init(document.getElementById('wrapBox'));
//ECharts的配置项和数据
let option = {
  title: {
    text: 'demo'
  },
  tooltip: {},
  legend: {
    data: ['dataSource']
  },
  xAxis: {
    data: ['aa', 'bb', 'cc']
  },
  yAxis: {},
  series: [{
    name: 'dataSource',
    type: 'bar',
    data: [2, 5, 6],
  }]
};
//配置图表数据及配置项
ECharts.setOption(option);

//根据浏览器大小改变大小
window.onresize = () => {
  ECarts.resize();
  //如果有多个表变动在下方依次写下去就可以了
}