2019-8-10 seo達人
很多朋友在開發(fā)的過程中要把ECharts圖標(biāo)做成自適應(yīng)瀏覽器寬高的效果。于是去翻看ECharts官網(wǎng)發(fā)現(xiàn)了resize方法，結(jié)果用了之后發(fā)現(xiàn)沒用，而且根本不知道什么原因。
解決辦法：
不能給ECharts的容器設(shè)置固定的寬高。
寬度要寫百分比
高度要寫vh
然后再搭配resize方法才可以實現(xiàn)根據(jù)瀏覽器大小而改變大小的功能
示例代碼：
let ECharts = echarts.init(document.getElementById('wrapBox'));
//ECharts的配置項和數(shù)據(jù)
let option = {
title: {
text: 'demo'
},
tooltip: {},
legend: {
data: ['dataSource']
},
xAxis: {
data: ['aa', 'bb', 'cc']
},
yAxis: {},
series: [{
name: 'dataSource',
type: 'bar',
data: [2, 5, 6],
}]
};
//配置圖表數(shù)據(jù)及配置項
ECharts.setOption(option);
//根據(jù)瀏覽器大小改變大小
window.onresize = () => {
ECarts.resize();
//如果有多個表變動在下方依次寫下去就可以了
}
藍藍設(shè)計( tweetduck.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
藍藍設(shè)計的小編 http://tweetduck.com