ECharts组件的定位和布局
定位方式
大部分『组件』和『系列』会遵循两种定位方式:
left/right/top/bottom/width/height 定位方式:
这六个量中,每个量都可以是『绝对值』或者『百分比』或者『位置描述』。
-
绝对值
单位是浏览器像素(px),用 number 形式书写(不写单位)。例如 {left: 23, height: 400}。 -
百分比
表示占 DOM 容器高宽的百分之多少,用 string 形式书写。例如 {right: ‘30%’, bottom: ‘40%’}。 -
位置描述
-
可以设置 left: ‘center’,表示水平居中。
-
可以设置 top: ‘middle’,表示垂直居中。
-
这六个量的概念,和 CSS 中六个量的概念类似:
-
left:距离 DOM 容器左边界的距离。
-
right:距离 DOM 容器右边界的距离。
-
top:距离 DOM 容器上边界的距离。
-
bottom:距离 DOM 容器下边界的距离。
-
width:宽度。
-
height:高度。
在横向,left、right、width 三个量中,只需两个量有值即可,因为任两个量可以决定组件的位置和大小,例如 left 和 right 或者 right 和 width 都可以决定组件的位置和大小。 纵向,top、bottom、height 三个量,和横向类同不赘述。
-
-
center / radius 定位方式:
-
center
是一个数组,表示 [x, y],其中,x、y可以是『绝对值』或者『百分比』,含义和前述相同。 -
radius
是一个数组,表示 [内半径, 外半径],其中,内外半径可以是『绝对值』或者『百分比』,含义和前述相同。
-
在自适应容器大小时,百分比设置是很有用的。
横向(horizontal)和纵向(vertical)
ECharts的『外观狭长』型的组件(如 legend、visualMap、dataZoom、timeline等),大多提供了『横向布局』『纵向布局』的选择。例如,在细长的移动端屏幕上,可能适合使用『纵向布局』;在PC宽屏上,可能适合使用『横向布局』。
横纵向布局的设置,一般在『组件』或者『系列』的 orient 或者 layout 配置项上,设置为 ‘horizontal’ 或者 ‘vertical’。
Media Query
Media Query 提供了『随着容器尺寸改变而改变』的能力。
官网上的例子稍微有点复杂,第一眼看上去就直接劝退。
我觉得Media Query 就像是switch case 语句,
switch 图形比例{
case query{
...}:
option:{
.....}//匹配到对应的option设置后自动应用
},
case query{
...}:
option:{
.....}//匹配到对应的option设置后自动应用
},
{
// 这条里没有写规则,表示『默认』,
option: {
......}// 即所有规则都不满足时,采纳这个option。
}
}
匹配到query 中的内容,就会执行对应的option的配置,当所有的query 都没有匹配到时,
要在 option 中设置 Media Query 须遵循如下格式:
option = {
baseOption: {
// 这里是基本的『原子option』。
title: {
...},
legend: {
...},
series: [{
...}, {
...}, ...],
...
},
media: [ // 这里定义了 media query 的逐条规则。
{
query: {
...}, // 这里写规则。
option: {
// 这里写此规则满足下的option。
legend: {
...},
...
}
},
{
query: {
...}, // 第二个规则。
option: {
// 第二个规则对应的option。
legend: {
...},
...
}
},
{
// 这条里没有写规则,表示『默认』,
option: {
// 即所有规则都不满足时,采纳这个option。
legend: {
...},
...
}
}
]
};
query:
每个 query 类似于这样:
{
minWidth: 200,//最小宽度是200px,即大于等于200px
maxWidth:
minHeight:
maxHeight: 300,
minAspectRatio: 1.3
maxAspectRatio:
}
现在支持三个属性:width、height、aspectRatio(长宽比)。每个属性都可以加上 min 或 max 前缀。比如,minWidth: 200 表示『大于等于200px宽度』。两个属性一起写表示『并且』,比如:{minWidth: 200, maxHeight: 300} 表示『大于等于200px宽度,并且小于等于300px高度』。
option:
media中的 option 既然是『原子 option』,理论上可以写任何 option 的配置项。但是一般我们只写跟布局定位相关的,例如截取上面例子中的一部分 query option:
media: [
...,
{
query: {
maxAspectRatio: 1 // 当长宽比小于1时。
},
option: {
legend: {
// legend 放在底部中间。
right: 'center',
bottom: 0,
orient: 'horizontal' // legend 横向布局。
},
series: [ // 两个饼图左右布局。
{
radius: [20, '50%'],
center: ['50%', '30%']
},
{
radius: [30, '50%'],
center: ['50%', '70%']
}
]
}
},
{
query: {
maxWidth: 500 // 当容器宽度小于 500 时。
},
option: {
legend: {
right: 10, // legend 放置在右侧中间。
top: '15%',
orient: 'vertical' // 纵向布局。
},
series: [ // 两个饼图上下布局。
{
radius: [20, '50%'],
center: ['50%', '30%']
},
{
radius: [30, '50%'],
center: ['50%', '75%']
}
]
}
},
...
]
多个 query 被满足时的优先级:
注意,可以有多个 query 同时被满足,会都被 mergeOption,定义在后的后被 merge(即优先级更高)。
默认 query:
如果 media 中有某项不写 query,则表示『默认值』,即所有规则都不满足时,采纳这个option。
容器大小实时变化时的注意事项:
在不少情况下,并不需要容器DOM节点任意随着拖拽变化大小,而是只是根据不同终端设置几个典型尺寸。
但是如果容器DOM节点需要能任意随着拖拽变化大小,那么目前使用时需要注意这件事:某个配置项,如果在某一个 query option 中出现,那么在其他 query option 中也必须出现,否则不能够回归到原来的状态。(left/right/top/bottom/width/height 不受这个限制。)
『复合 option』 中的 media 不支持 merge
也就是说,当第二(或三、四、五 …)次 chart.setOption(rawOption) 时,如果 rawOption 是 复合option(即包含 media 列表),那么新的 rawOption.media 列表不会和老的 media 列表进行 merge,而是简单替代。当然,rawOption.baseOption 仍然会正常和老的 option 进行merge。
其实,很少有场景需要使用『复合 option』来多次 setOption,而我们推荐的做法是,使用 mediaQuery 时,第一次setOption使用『复合 option』,后面 setOption 时仅使用 『原子 option』,也就是仅仅用 setOption 来改变 baseOption。
需要注意的是,要引入:
$.when(
$.getScript('https://www.runoob.com/static/js/draggable.js')
).done(function () {
draggable.init(
$('div[_echarts_instance_]')[0],
myChart,
{
width: 700,
height: 400,
throttle: 70
}
);
);
这样才会有可拉伸的DRAG,这个DRAG才是灵魂
简单的例子
当宽高之比>=2时,是如下图形:
宽高之比<2时,是如下图形:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 实例</title>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
$.when(
$.getScript('https://www.runoob.com/static/js/draggable.js')
).done(function () {
draggable.init(
$('div[_echarts_instance_]')[0],
myChart,
{
width: 700,
height: 400,
throttle: 70
}
);
myChart.hideLoading();
var option = {
baseOption: {
// 这里是基本的『原子option』。
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
}
}]
},
media: [ // 这里定义了 media query 的逐条规则。
{
query: {
minAspectRatio: 2
}, // 这里写规则。
option: {
// 这里写此规则满足下的option。
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
},
],
}
},
{
option: {
series: [
{
data: [100,200,300,400,500,600,700],
},
],
}
},
]
};
myChart.setOption(option);
});
</script>
</body>
</html>
下面这是官网的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 实例</title>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div