echarts自适应学习总结
博客专区 > cannll 的博客 > 博客详情
echarts自适应学习总结
cannll 发表于6个月前
echarts自适应学习总结
  • 发表于 6个月前
  • 阅读 40
  • 收藏 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

 

 

 

 

 

共有 人打赏支持
粉丝 2
博文 6
码字总数 7628
×
cannll
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: