直角坐標系中的常用配置
直角坐標系圖表：柱狀圖、折線圖、散點圖
配置1：網格 grid
grid是用來控制直角坐標系的布局和大小，x軸和y軸就是在grid的基礎上進行繪制的。
顯示grid：show進行控制
grid的邊框：borderWidth、borderColor
grid的位置和大小：left、top、right、bottom；width、height
var option = {
// 網格
grid: {
show: true, // 控制網格的顯示
borderWidth: 10, // 網格邊框寬度
borderColor: 'pink', // 邊框顏色
top: 120, //邊框位置
left: 120,
width: 100, // 邊框和圖表大小
height: 100
},
}
配置2：坐標軸 axis
坐標軸分為x軸和y軸（xAxis、yAxis）
一個grid中最多有兩種位置的x軸和y軸
坐標軸類型 type：
value：數值軸，自動從series中的data中讀取數據；
category：類目軸，該類型必須通過data設置類目數據
顯示位置 position：
xAxis：可取值為top或者bottom；
yAxis：可取值為left或者right
xAxis: {
type: 'category',
data: xDataArr,
position:'top'
},
yAxis: {
type: 'value',
scale: true,
position:'right'
},
series: [{
name: '語文',
type: 'bar',
data: yDataArr,
}]
配置3：區域縮放 dataZoom
dataZoom用於區域縮放，對數據范圍過濾，x軸和y軸都可以擁有；
dataZoom是一個數組，意味着可以配置多個區域縮放器。
類型 type：
slider：滑塊
inside：內置，依靠鼠標滾輪或者雙指縮放
指明產生作用的軸：
xAxisIndex：設置縮放組件控制的是哪個x軸，一般寫0即可；
yAxisIndex：設置縮放組件控制的是哪個y軸，一般寫0即可。
指明初始狀態的縮放情況：
start：數據窗口范圍的起始百分比；
end：數據窗口范圍的結束百分比。
var option = {
// // 區域縮放
// toolbox: {
// feature:{
// dataZoom: {}
// }
// },
// 多個區域縮放器
dataZoom: [{
xAxisIndex:0, // 設置縮放組件控制的是哪個x軸
// type:'slider' // 底部滑塊進行篩選
type: "inside" // 滾輪輪動進行篩選
}, {
yAxisIndex:0,
type: 'slider',
// 指明初始狀態的縮放情況
start:0,
end:50
}],
如圖：
