echarts饼图labelLine线的长度自适应设置
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
基本思路:首先求出中心点的位置,然后判断一下当前label的位置是左边还是右边,如果是左边的话,中心点的位置 减去 label的宽度,如果是右边的话 中心点的位置加上 label的宽度。 因为图的大小不一样 可根据实际情况添加 一个数值,我这边添加的是50
labelLayout:标签的统一布局配置。该配置项是在每个系列默认的标签布局基础上,统一调整标签的(x, y)位置,标签对齐等属性以实现想要的标签布局效果。
该配置项也可以是一个有如下参数的回调函数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | // 标签对应数据的 dataIndex dataIndex: number // 标签对应的数据类型,只在关系图中会有 node 和 edge 数据类型的区分 dataType?: string // 标签对应的系列的 index seriesIndex: number // 标签显示的文本 text: string // 默认的标签的包围盒,由系列默认的标签布局决定 labelRect: {x: number, y: number, width: number, height: number} // 默认的标签水平对齐 align: 'left' | 'center' | 'right' // 默认的标签垂直对齐 verticalAlign: 'top' | 'middle' | 'bottom' // 标签所对应的数据图形的包围盒,可用于定位标签位置 rect: {x: number, y: number, width: number, height: number} // 默认引导线的位置,目前只有饼图(pie)和漏斗图(funnel)有默认标签位置 // 如果没有该值则为 null labelLinePoints?: number[][] |
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | labelLayout: (params) => { const isLeft = params.labelRect.x < this .curEChartObj.getWidth() / 2 const centerX = this .curEChartObj.getWidth() / 2 let newX = 0 if (isLeft) { newX = centerX - 50 - params.labelRect.width } else { newX = centerX + 50 + params.labelRect.width } const points = params.labelLinePoints points[2][0] = isLeft ? newX + 10 : newX return { x: newX, labelLinePoints: points } }, |
完整代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | const option = { color: [ '#94b6f3' , '#5087ec' , '#b9cff7' ], legend: { show: false }, grid: { top: '1px' , right: '1px' , bottom: '1px' , left: '2px' }, series: { type: 'pie' , radius: [ '45%' , '60%' ], center: [ '50%' , '50%' ], itemStyle: { borderColor: '#fff' , borderWidth: 1 }, label: { alignTo: 'edge' , formatter: '{name|{b}}\n{time|{c}人}' , minMargin: 5, edgeDistance: 10, lineHeight: 15, width: 58, padding: [0, 6, 0, 10], // 关键代码!关键代码!关键代码! rich: { name: { align: 'left' }, time: { fontSize: 12, color: '#333' , align: 'left' } } }, labelLine: { length: 15, length2: 0, maxSurfaceAngle: 80 }, labelLayout: (params) => { const isLeft = params.labelRect.x < this .curEChartObj.getWidth() / 2 const centerX = this .curEChartObj.getWidth() / 2 let newX = 0 if (isLeft) { newX = centerX - 50 - params.labelRect.width } else { newX = centerX + 50 + params.labelRect.width } const points = params.labelLinePoints points[2][0] = isLeft ? newX + 10 : newX return { x: newX, labelLinePoints: points } }, data: pieData } } |
总结
到此这篇关于echarts饼图labelLine线的长度自适应设置的文章就介绍到这了,更多相关echarts labelLine线长度自适应内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
javascript Table 中2个列(TD)的交换实现代码
非常不错的用js控制talbe中td的位置的实现代码。2009-02-02javascript之DIV拖动类 支持在FF下拖动,调用简单
javascript之DIV拖动类 支持在FF下拖动,调用简单...2007-08-08
最新评论