2019-8-10 seo達人
很多朋友在開發的過程中要把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();
//如果有多個表變動在下方依次寫下去就可以了
}
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。