ECharts -Media Query

最新推荐文章于 2020-10-29 21:07:47 发布

VIP文章风吹我亦散

最新推荐文章于 2020-10-29 21:07:47 发布

阅读量1.2k

点赞数 1

分类专栏： # ECharts 文章标签：可视化

本文链接：https://blog.csdn.net/weixin_45468845/article/details/106980165

版权

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);

        }

最低0.47元/天解锁文章

风吹我亦散

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ECharts -Media Query

目录ECharts组件的定位和布局定位方式横向（horizontal）和纵向（vertical）Media Queryquery：option：ECharts组件的定位和布局定位方式大部分『组件』和『系列』会遵循两种定位方式：left/right/top/bottom/width/height 定位方式：这六个量中，每个量都可以是『绝对值』或者『百分比』或者『位置描述』。绝对值单位是浏览器像素（px），用 number 形式书写（不写单位）。例如 {left: 23, height: 40
复制链接

扫一扫