泰来娱乐手机版

泰来娱乐手机版官网-泰来娱乐手机版官方网站-三亿鼠标的娱乐梦想

echarts基础学习之组件legend(二

  图例组件展现了不同系列的标记(symbol),颜色和名字。可以通过点击图例控制哪些系列不显示。

  ECharts 3 中单个 echarts 实例中可以存在多个图例组件,会方便多个图例的布局。

  以下摘自echarts官网,详情也可去echarts官网配置看点击打开链接

  组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。

  组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。

  zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

  组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

  left的值可以是像20这样的具体像素值,可以是像20%这样相对于容器高宽的百分比,也可以是left,center,right。

  top的值可以是像20这样的具体像素值,可以是像20%这样相对于容器高宽的百分比,也可以是top,middle,bottom。

  如果top的值为top,middle,bottom,组件会根据相应的位置自动对齐。

  right的值可以是像20这样的具体像素值,可以是像20%这样相对于容器高宽的百分比。

  bottom 的值可以是像20这样的具体像素值,可以是像20%这样相对于容器高宽的百分比。

  图例标记和文本的对齐。默认自动,根据组件的位置和 orient 决定,当组件的left值为 right 以及纵向布局(orient为 vertical)的时候为右对齐,及为 right。

  图例内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。

  如果图标(可能来自系列的symbol或用户自定义的legend.data.icon)是path://的形式,是否在缩放时保持该图形的长宽比。

  图例选择的模式,控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择,可以设成false关闭。

  除此之外也可以设成single或者multiple使用单选或者多选模式。

  当使用图片的时候,可以使用width或height指定高宽,也可以不指定自适应。

  注意,文字块的width和height指定的是内容高宽,不包含padding。

  文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见backgroundColor)时,可能会使用它。

  注意,文字块的width和height指定的是内容高宽,不包含padding。

  width也可以是百分比字符串,如100%。表示的是所在文本块的contentWidth(即不包含文本块的padding)的百分之多少。之所以以contentWidth做基数,因为每个文本片段只能基于content box布局。如果以outerWidth做基数,则百分比的计算在实用中不具有意义,可能会超出。

  文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见backgroundColor)时,可能会使用它。

  注意,文字块的width和height指定的是内容高宽,不包含padding。

  在rich里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。

  图例的 tooltip 配置,配置项同tooltip。默认不显示,可以在 legend 文字很多的时候对文字做裁剪并且开启 tooltip,如下示例:

  图例的数据数组。数组项通常为一个字符串,每一项代表一个系列的name(如果是饼图,也可以是饼图单个数据的name)。图例组件会自动根据对应系列的图形标记(symbol)来绘制自己的颜色和标记,特殊字符串(空字符串)或者\n(换行字符串)用于图例的换行。

  如果data没有被指定,会自动从当前系列中获取。多数系列会取自者series.encode的seriesName所指定的维度。如饼图and漏斗图等会取自 series.data 中的 name。

  如果要设置单独一项的样式,也可以把该项写成配置项对象。此时必须使用name属性对应表示系列的name。

  图例项的名称,应等于某系列的name值(如果是饼图,也可以是饼图单个数据的name)。

  可以通过path://将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

  但是,如果仅仅想改变图例翻页,一般并不调用setOption(因为这太重量了),仅仅使用 actionlegendScroll即可。

  图例控制块中,页信息的显示格式。默认为{current}/{total},其中{current}是当前页号(从 1 开始计数),{total}是总页数。

  翻页按钮的大小。可以是数字,也可以是数组,如[10, 3],表示[宽,高]。

  【方法1】echarts自身支持legend分页,找了好久,太赞了,注意echarts的图例滚动式v3.7.0版本新加的

  在使用echarts 2.0的过程中发现legend过多没有分页的情况    经百度各种查没有查到想要的效果  因此自己动手扩展了一个效果,现在发布出效果  如果有问题可以问我 在调试echart...

  Echarts学习记录——设置图表与容器的间隔 关键属性grid:直角坐标系内绘图网格。...

  echarts各个配置项详细说明总结最近有个朋友在做关于各种图表的项目,用到了echarts,关于各个配置项刚开始用好多都不懂,有些地方需要改不知道改哪个参数,就在网上查了各种,找到了一个不错的总结,...