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