外掛echarts使資料視覺化後，圖隨視窗自適應變化的方法
注：自己去echarts官網下載echarts.js，引入到html。
一、HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>echart</title>
<script src="echarts.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="ecm3"></div>
</body>
</html>
二、CSS程式碼
*{margin:0;padding: 0;}
#ecm3{height:500px;margin:100px auto;width: 80%;}
三、JS程式碼
var myChart = echarts.init(document.getElementById('ecm3'));
option = {
tooltip: {
trigger: 'axis',
axisPointer: { // 座標軸指示器，座標軸觸發有效
type: 'shadow' // 預設為直線，可選為：'line' | 'shadow'
}
},
legend: {
data: ['正常', '任務', '休息', '請假', '遲到', '曠工'],
right: '40%'
},
calculable: true,
xAxis: [{
axisLabel: {
rotate: 70,
interval: 0
},
type: 'category',
data: ["區域一","區域二","區域三","區域四","區域五","區域六","區域七"]
}],
grid: { // 控制圖的大小，調整下面這些值就可以，
x: 40,
x2: 80,
y2: 125, // y2可以控制 X軸跟Zoom控制元件之間的間隔，避免以為傾斜後造成 label重疊到zoom上
},
yAxis: [{
type: 'value'
}],
series: [{
name: '正常',
type: 'bar',
barWidth: 10,
stack: '總量',
itemStyle: {
normal: {
label: {
show: false,
position: 'insideRight'
},
color: "#01c2b1"
}
},
data: [10,9,8,5,6,4,2]
}, {
name: '任務',
type: 'bar',
barWidth: 10,
stack: '總量',
itemStyle: {
normal: {
label: {
show: false,
position: 'insideRight'
},
color: "#f6be1f"
}
},
data: [2,5,4,5,8,6,4]
},
{
name: '請假',
type: 'bar',
barWidth: 10,
stack: '總量',
itemStyle: {
normal: {
label: {
show: false,
position: 'insideRight'
},
color: "#ee6531"
}
},
data: [2,5,4,5,8,4,5]
}, {
name: '遲到',
type: 'bar',
barWidth: 10,
stack: '總量',
itemStyle: {
normal: {
label: {
show: false,
position: 'insideRight'
},
color: "#b5b5b5"
}
},
data: [2,0,1,0,1,2,0]
}, {
name: '曠工',
type: 'bar',
barWidth: 10,
stack: '總量',
itemStyle: {
normal: {
label: {
show: false,
position: 'insideRight'
},
color: "#c65885"
}
},
data: [0,1,0,1,1,0,2]
}
]
};
myChart.setOption(option);
方法介紹：
首先，如果介面只有一個柱形圖或其他圖形，讓圖形自適應，可以在JS裡面新增如下程式碼：
window.onresize = myChart.resize;
或
window.onresize = function(){
myChart.resize();
}
其次，如果介面有多個柱形圖或其他圖形，讓圖形自適應，只能在JS裡面新增如下程式碼：
window.onresize = function(){
myChart.resize();
myChart2.resize();
myChart3.resize();
myChartN.resize();
}
圖片如下：
