graphic.elements[i]-ring

ECharts 圆环图形元素配置。

graphic.elements[i]-ring.type   |   string

[ default: ring ]

用 setOption 首次设定图形元素时必须指定。 可取值:

image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group

graphic.elements[i]-ring.id   |   string

[ default: undefined ]

id 用于在更新或删除图形元素时指定更新哪个图形元素,如果不需要用可以忽略。

graphic.elements[i]-ring.$action   |   string

[ default: 'merge' ]

setOption 时指定本次对该图形元素的操作行为。

可取值:

'merge':如果已有元素,则新的配置项和已有的设定进行 merge。如果没有则新建。

'replace':如果已有元素,删除之,新建元素替代之。

'remove':删除元素。

graphic.elements[i]-ring.left   |   number, string

[ default: undefined ]

描述怎么根据父元素进行定位。

『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 group 的子元素,父元素就是 group 元素。

值的类型可以是:

number:表示像素值。

百分比值:如 '33%',用父元素的高和此百分比计算出最终值。

'center':表示自动居中。

left 和 right 只有一个可以生效。

如果指定 left 或 right,则 shape 里的 x、cx 等定位属性不再生效。

graphic.elements[i]-ring.right   |   number, string

[ default: undefined ]

描述怎么根据父元素进行定位。

『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 group 的子元素,父元素就是 group 元素。

值的类型可以是:

number:表示像素值。

百分比值:如 '33%',用父元素的高和此百分比计算出最终值。

'center':表示自动居中。

left 和 right 只有一个可以生效。

如果指定 left 或 right,则 shape 里的 x、cx 等定位属性不再生效。

graphic.elements[i]-ring.top   |   number, string

[ default: undefined ]

描述怎么根据父元素进行定位。

『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 group 的子元素,父元素就是 group 元素。

值的类型可以是:

number:表示像素值。

百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。

'middle':表示自动居中。

top 和 bottom 只有一个可以生效。

如果指定 top 或 bottom,则 shape 里的 y、cy 等定位属性不再生效。

graphic.elements[i]-ring.bottom   |   number, string

[ default: undefined ]

描述怎么根据父元素进行定位。

『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 group 的子元素,父元素就是 group 元素。

值的类型可以是:

number:表示像素值。

百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。

'middle':表示自动居中。

top 和 bottom 只有一个可以生效。

如果指定 top 或 bottom,则 shape 里的 y、cy 等定位属性不再生效。

graphic.elements[i]-ring.bounding   |   strin

[ default: 'all' ]

决定圆环图形元素在定位时,对自身的包围盒计算方式。

可取值:

'all':(默认) 表示用自身以及子节点整体的经过 transform 后的包围盒进行定位。 这种方式易于使整体都限制在父元素范围中。

'raw': 表示仅仅用自身(不包括子节点)的没经过 tranform 的包围盒进行定位。 这种方式易于内容超出父元素范围的定位方式。

graphic.elements[i]-ring.z   |   number

[ default: 0 ]

圆环图形元素在 z 方向的高度,决定层叠关系。

graphic.elements[i]-ring.zlevel   |   number

[ default: 0 ]

决定此圆环图形元素绘制在哪个 canvas 层中。注意,越多 canvas 层会占用越多资源。

graphic.elements[i]-ring.silent   |   boolean

[ default: false ]

是否不响应鼠标以及触摸事件。

graphic.elements[i]-ring.invisible   |   boolean

[ default: false ]

圆环图形元素节点是否可见。

graphic.elements[i]-ring.cursor   |   string

[ default: 'pointer' ]

鼠标悬浮时在圆环图形元素上时鼠标的样式是什么。同 CSS 的 cursor。

graphic.elements[i]-ring.draggable   |   boolean

[ default: false ]

圆环图形元素是否可以被拖拽。

graphic.elements[i]-ring.progressive   |   boolean

[ default: false ]

是否渐进式渲染。当图形元素过多时才使用。

graphic.elements[i]-ring.shape   |   Object

设置圆形元素的形状大小。

graphic.elements[i]-rect.shape.cx   |   number

[ default: 0 ]

圆环图形元素的中心在父节点坐标系(以父节点左上角为原点)中的横坐标值。

graphic.elements[i]-rect.shape.cy   |   numbr

[ default: 0 ]

圆环图形元素的中心在父节点坐标系(以父节点左上角为原点)中的纵坐标值。

graphic.elements[i]-rect.shape.r  |   number

[ default: 0 ]

圆环图形元素的外半径。

graphic.elements[i]-rect.shape.r0   |   number

[ default: 0 ]

圆环图形元素的内半径。

echarts 三环圆环_ECharts圆环图形元素的使用相关推荐

  1. echarts 三环圆环_Echarts饼图之圆环图

    需求: 页面上加载一个echarts环形图. 来由: 身为一个Java开发人员,被项目经理拉过来写页面,心里也是很苦逼~可是也没办法,只能硬着头皮干啊,直接上代码 // 基于准备好的dom,初始化ec ...

  2. echarts 三环圆环_echarts多圆环饼图

    不用UI也可获得的echarts超炫饼图体验(其实根本没有UI)

  3. echarts 三环圆环_echarts实现环形进度图

    //环形进度图 TgsChartsUtil.drawCircleLoadingChart = function(cfg){ var myChart = TgsChartsUtil.getChart(c ...

  4. Echarts - 饼状图圆环中部添加自定义文字

    效果图 添加前: 添加后: 解决方法 可自定义文字的颜色字号等. 在最外层设置 title 配置项,添加以下代码: title: {// 图形标题(如果想要换行则使用ES6 `` 模板字符串)// 例 ...

  5. c语言圆环内外半径圆环面积,《圆环的面积》微课教学设计

    <圆环的面积>微课教学设计 教学内容: 人教课标版<数学>六年级上册圆环面积 教学目标: 掌握圆环面积的基本计算方法后,利用含环宽的条件来求圆环的面积的练习. 教学重点: 理解 ...

  6. echarts 柱状图圆柱_ECharts象形柱图

    象形柱图在 ECharts 系列中使用series[i]-pictorialBar表示,它利用图片和形状表现数据,具体来说它既可以用图形的长宽变形表现数据,也可以用图形的个数.甚至是图形的颜色.透明度 ...

  7. 03-多个圆环以及圆环的变速变向

    版权申明: 本文为"优梦创客"原创文章,您可以自由转载,但必须加入完整的版权声明 更多学习资源请加QQ:1517069595获取(企业级性能优化/热更新/Shader特效/服务器/ ...

  8. echarts 网格属性_echarts 绘制网格 教你使用graphic

    echarts 绘制网格 教你使用graphic 主子镇楼 不经常使用的echarts的同学对于echarts 的认识基本停留在饼图,柱形图,条形图,折线图等一系列常规图形上,对于网格基本是一脸懵,小 ...

  9. echarts 坐标自适应_echarts 同一页面,多个图表 页面大小自适应

    // 路径配置 require.config({ paths: { echarts: './js' } }); // 使用 require( [ 'echarts', 'echarts/chart/l ...

最新文章

  1. 2022 专属程序员的桌面必备单品!
  2. 此选项卡已恢复的处理过程
  3. 4.AngularJS四大特征之二: 双向数据绑定
  4. Android12 Jetpack SplashScreen API总结
  5. VS Code 1.37 发布!多达数十个图标迎来全新设计
  6. 【POJ - 3126】Prime Path(bfs)
  7. linux上mysql卸数_Linux下MySQL卸载和安装图文教程
  8. 计算机视觉通道域(channel)注意力机制——SENet
  9. 免费画图软件推荐 - draw.io
  10. 五笔字根表识别码图_五笔字根表(附键盘图)
  11. JavaScript中常见的设计模式
  12. web中html+CSS修改背景图片的不透明度
  13. python爬虫 提取豆瓣Top250电影信息
  14. AHRS和INS的区别
  15. [深入研究4G/5G/6G专题-48]: 5G Link Adaption链路自适应-4-下行链路自适应DLLA-PDCCH信道
  16. 直连附加存储服务器,直接连接存储
  17. c语言的内存布局规律
  18. restapi是什么意思_网上整理的对于Rest和Restful api的理解
  19. Linux权限委派(生产环境必备)
  20. 单片机C语言仿真图,单片机C语言程序设计代码和仿真图.doc

热门文章

  1. 运行时异常与一般异常有何异同
  2. 公众号与App哪个更有前景
  3. Delphi设计模式之Wapper模式, Factory
  4. 美团点评2020校招笔试题1(栈,堆)
  5. 【Angular】Angular开发组件
  6. Apache HTTP Servcer-Apache服务器下载与Windows系统下安装
  7. Spring入门——AOP(面向切面,切什么面?)
  8. 2023美赛数学建模竞赛 C题思路分析
  9. 仙居机器人_仙居三名高中生拿下国际机器人大赛总决赛冠军
  10. Python学习 | 2022-1-14 在jupyternotebook中用markdown