文档章节

echarts自适应学习总结

cannll
 cannll
发布于 2017/05/03 19:16
字数 636
阅读 104
收藏 0

项目需要:echarts自适应屏幕缩放,定义最小尺寸,按比例放大。

echart组件定位和布局

left:0,right:0,top:0,bottom:0

center[x,y]

radius

是一个数组,表示 [内半径, 外半径],其中,内外半径可以是『绝对值』或者『百分比』,含义和前述相同。

在自适应容器大小时,百分比设置是很有用的。

横纵向布局的设置,一般在『组件』或者『系列』的 orient 或者 layout 配置项上,设置为 'horizontal' 或者 'vertical'

Media Query

option = {
    baseOption: { // 这里是基本的『原子option』。
        title: {...},
        legend: {...},
        series: [{...}, {...}, ...],
        ...
    },
    media: [ // 这里定义了 media query 的逐条规则。
        {
            query: {...},   // 这里写规则。
            option: {       // 这里写此规则满足下的option。
                legend: {...},
                ...
            }
        },
        {
            query: {...},   // 第二个规则。
            option: {       // 第二个规则对应的option。
                legend: {...},
                ...
            }
        },
        {                   // 这条里没有写规则,表示『默认』,
            option: {       // 即所有规则都不满足时,采纳这个option。
                legend: {...},
                ...
            }
        }
    ]
};

baseOption、以及 media 每个 option 都是『原子 option』,即普通的含有各组件、系列定义的 option。

由『原子option』组合成的整个 option,我们称为『复合 option』。

baseOption 是必然被使用,

满足了某个 query 条件时,对应的 option 会被使用 chart.mergeOption() 来 merge 进去。

query:(类似于媒体查询条件)

每个 query 类似于这样:

{
    minWidth: 200,
    maxHeight: 300,
    minAspectRatio: 1.3
}

现在支持三个属性:widthheightaspectRatio(长宽比)。每个属性都可以加上 min 或 max 前缀。比如,minWidth: 200 表示『大于等于200px宽度』。两个属性一起写表示『并且』,比如:{minWidth: 200, maxHeight: 300} 表示『大于等于200px宽度,并且小于等于300px高度』。

默认 query:

如果 media 中有某项不写 query,则表示『默认值』,即所有规则都不满足时,采纳这个option。

容器大小实时变化时的注意事项:

容器DOM节点需要能任意随着拖拽变化大小,那么目前使用时需要注意这件事:某个配置项,如果在某一个 query option 中出现,那么在其他 query option 中也必须出现,否则不能够回归到原来的状态。(left/right/top/bottom/width/height 不受这个限制。)

『复合 option』 中的 media 不支持 merge

 chart.setOption(rawOption) 时,

新的 rawOption.media 列表不会和老的 media 列表进行 merge,而是简单替代。

rawOption.baseOption 会和老的 option 进行merge。

很少有场景需要使用『复合 option』来多次 setOption

,使用 mediaQuery 时,第一次setOption使用『复合 option』,

后面 setOption 时仅使用 『原子 option』,也就是仅仅用 setOption 来改变 baseOption

 

 

 

 

 

© 著作权归作者所有

共有 人打赏支持
cannll
粉丝 1
博文 13
码字总数 8593
作品 0
西安
私信 提问
Echarts视频教程从入门到实战

Echarts视频教程从入门到实战 网盘地址:https://pan.baidu.com/s/1p-G9UbKmXFtnuJEdiLSw2w 密码:0e9u 备用地址(腾讯微云):https://share.weiyun.com/5sKBF8E 密码:4ms8rp 有这样一款制...

放风筝好不
04/16
0
0
爬了一个echarts+bootstrap模态框的小坑。

最近在做一个pc的项目,要把echarts图表在bootstrap模态框里展示,用户点击按钮弹出内容为echarts图表的modal。听起来so easy对吧?来,我们按照正常的思路 一、先搞一个模态框出来~ HTML: ...

roc_young
2017/06/06
1K
2
ECharts 3 测试版发布,焕然一新的面貌

ECharts 3 测试版发布 注:由于直接转载内容,文章中实例效果无法查看,如需查看详情请往 ECharts3 带来了什么 ECharts 在 github 上沉寂了数个月,想必很多小伙伴充满了各种疑问,ECharts是...

pissang
2015/12/04
70.7K
66
"echarts/util/mapData/params" is not exists!

@Kener-林峰 你好,想跟你请教个问题: Error: [MODULE_MISS]"echarts/util/mapData/params" is not exists! 请问为什么拓展地图的时候报这个错误!在这前面已经进行了 var fileLocation = '...

黄平
2014/03/31
5.8K
1
Echarts geoJson 引入地图问题

以下是我的html代码,option和GeoJson部分完全是抄官网http://echarts.baidu.com/doc/example/map6.html里面的代码,但是我不知道require GeoJson部分应该放在那里(怎么用),请大神指点下,谢...

小吴半仙
2016/01/06
2.1K
0

没有更多内容

加载失败,请刷新页面

加载更多

spring源码阅读笔记(一)

ClassPathXmlApplicationContext 与 FileSystemXmlApplicationContext 用了这么久的框架,是时候搞一下源码了,一般最初接触spring 从以下步骤开始 创建一个bean类 并创建 ooxx.xml之类的spr...

NotFound403
9分钟前
0
0
MySQL主从配置

12月14日任务 17.1 MySQL主从介绍 17.2 准备工作 17.3 配置主 17.4 配置从 17.5 测试主从同步 MySQL主从介绍 MySQL主从又叫做Replication、AB复制。简单将就是A/B两个服务器做主从后,在A上写...

robertt15
11分钟前
0
0
我的Linux系统九阴真经

在今天,互联网的迅猛发展,科技技术也日新月异,各种编程技术也如雨后春笋一样,冒出尖来了。各种创业公司也百花齐放百家争鸣,特别是针对服务行业,新型互联网服务行业,共享经济等概念的公...

问题终结者
24分钟前
6
0
Java 使用 gson 对 json 根据 key 键进行排序

引入Google的gson jar <dependency> <groupId>com.google.code.gson</groupId> <artifactId>gson</artifactId> <version>2.8.0</version>......

yh32
25分钟前
1
0
Vue.use源码解析

什么是Vue插件 关于什么是Vue插件大家可以去看官网的解释 ,总得来说就是提供一个全局注册/调用的能力。 怎么用 我们以Weex为例。 首先有一个toast.js const Toast = {}Toast.install = (Vu...

peakedness丶
32分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部