文档章节

echarts自适应学习总结

cannll
 cannll
发布于 2017/05/03 19:16
字数 636
阅读 62
收藏 0
点赞 0
评论 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
博文 12
码字总数 8593
作品 0
西安
Echarts视频教程从入门到实战

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

放风筝好不 ⋅ 04/16 ⋅ 0

Echarts-百度地图省分着色

通过Echarts3结合百度地图,对全国省分进行着色。 起因 由于Echarts3中,不再使用china.js文件: ECharts 之前提供下载的矢量地图数据来自第三方,由于部分数据不符合国家《测绘法》规定,目...

莫显辉 ⋅ 05/04 ⋅ 0

NEV与其他图表引擎的横向对比

本文由 网易云 发布 作者:刘阳 本篇文章仅限内部分享,如需转载,请联系网易获取授权。 NEV与其他图表引擎的横向对比 对比的其他图表库包括vega、HighCharts、 ECharts以及G2 图表类型 柱状...

wangyiyungw ⋅ 05/14 ⋅ 0

【前端图表】echarts散点图鼠标划过散点显示信息

在做项目的过程中,总会遇到这样或者那样的bug,这个时候就要看自己的动手能力有多强了,着手解决了一个bug之后,整个人都感觉很开心,端午下班之前遇到了一个小问题,echarts散点图鼠标划过...

祈澈姑娘 ⋅ 前天 ⋅ 0

Vue教程(五)在vue项目中使用echarts

1安装Echart cnpm install echarts --save 2项目页面引用Echart import echarts from 'echarts' 3启动项目 npm run dev...

凌雲木 ⋅ 04/20 ⋅ 0

vue之将echart封装为组件

最近的新项目里,有大量数据图表类的需求,为了增强代码的复用性,减少冗余,我开始思考如何将echart封装为组件调用。本文将会以雷达图为案例,一步步讲解在vue项目中如何使用echart,如何将...

四小七 ⋅ 05/21 ⋅ 0

echarts3.0在IE9中,bar图在使用datazoom时,数据显示不完全的问题

我在swt控件中调用browser,然后用echarts来展现我的数据,IE是IE9,柱状图设置了dataZoom,但是当我拖动dataZoom滑竿时,展现的数据没有全部展现出来,只有当dataZoom覆盖全部时,数据才全部...

kmust123 ⋅ 04/26 ⋅ 0

ssh结合echarts做图表展示

在日常的开发中,我们常常需要使用图表对数据进行展示,在这里作者使用百度的开源图表echarts动态的展示数据。 看过echarts的API都知道,要想使用某种类型的图表展示数据,必须封装好一个JSO...

_Artisan ⋅ 06/04 ⋅ 0

基于 Vue2.0 和 ECharts 封装的图表组件 - v-charts

在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件,只需要统一提供一...

匿名 ⋅ 05/22 ⋅ 5

乱炖“简书交友”数据之代码(1)

上一篇文章乱炖数据之2700余篇“简书交友”专题文章数据的花式玩法发布后,不少人想学习下代码,由于此前不曾在GitHub上开源过,流程还不熟悉,再者本项目中很多尝试性的代码,异常杂乱,因而...

Deserts_X ⋅ 06/13 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

AppDelegate 设置Root相关

self.window = UIWindow.init(frame: UIScreen.main.bounds) self.window?.backgroundColor = UIColor.white self.window?.makeKeyAndVisible() self.window?.rootViewController = RootTabB......

west_zll ⋅ 1分钟前 ⋅ 0

Java并发系列5--倒计时器CountDownLatch

今天讲一个倒计时器工具,叫CountDownLatch。需要这个工具的场景大概有:当所有的小任务都完成之后,再启动大任务。 先看代码: public class CountDownLatchDemo {static final CountDow...

大大枣 ⋅ 2分钟前 ⋅ 0

SpreadJS使用进阶指南 - 使用 NPM 管理你的项目

前言 SpreadJS作为一款性能出众的纯前端电子表格控件,自2015年发布以来,已经被广泛应用于各领域“在线Excel”数据管理项目中。NPM,作为管理Node.js库最有力的手段,解决了很多NodeJS代码部...

葡萄城控件技术团队 ⋅ 3分钟前 ⋅ 0

Mac下IntelliJ IDEA快捷键大全

https://blog.csdn.net/lisongjia123/article/details/54949364

细节探索者 ⋅ 6分钟前 ⋅ 0

建造者模式

1、工厂模式中创建的对象大都是简单的对象 复杂的产品类并且拥有不同的属性特点的管理就需要用到建造者模式 2、建造者模式: 将一个复杂的对象的构建与它的表示分离,使得同样的构建过程可以...

职业搬砖20年 ⋅ 7分钟前 ⋅ 0

Mysql数据库开发 怎么优化SQL语句?

 1) 现场抓出慢查询语句 show full processlist;   2) 配置参数:   slow_query_log_file = ON 慢查询开启开关   long_query_time =2 记录大于2秒的sql语句   log_queries_not_usi...

老男孩Linux培训 ⋅ 7分钟前 ⋅ 0

Laravel 安装执行php artisan migrate 出现字段过长错误

最近在自己研究Laravel Laravel版本:5.6 PHP版本:7.1.9 Mysql版本:5.7.19 Apache版本:2.4.27 系统版本:windows10 首先要保证电脑安装了composer,和node.js 执行命令 composer global ...

Marhal ⋅ 13分钟前 ⋅ 0

ELK6.0日志从收集到处理完整版教程(二)

ELK简介 Elasticsearch 开源分布式搜索引擎,它的特点有:分布式,零配置,自动发现,索引自动分片,索引副本机制,restful风格接口,多数据源,自动搜索负载等。也可以认为ElasticSearch是一...

bz_z ⋅ 16分钟前 ⋅ 0

Spark项目之电商用户行为分析大数据平台之(七)数据调研--基本数据结构介绍

目录 一、user_visit_action(Hive表) 1.1 表的结构 1.2 表的说明 二、user_info(Hive表) 2.1 表的结构 2.2 表的说明 三、task(MySQL表) 3.1 表的结构 3.2 表的说明 四、工作流程...

xiaomin0322 ⋅ 20分钟前 ⋅ 0

评分卡模型剖析之一(woe、IV、ROC、信息熵)

信用评分卡模型在国外是一种成熟的预测方法,尤其在信用风险评估以及金融风险控制领域更是得到了比较广泛的使用,其原理是将模型变量WOE编码方式离散化之后运用logistic回归模型进行的一种二...

火力全開 ⋅ 21分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部