echarts设置视觉引导线穿过两行文字的效果

实现效果：

代码：

label: {formatter: '数量\n350', // \n设置文字换行lineHeight: 24         // 设置一个合适的行高
},// 设置视觉引导线结束点的位置，让其从两行文字中穿过
labelLayout: function (params) {// 判断label在图表的左侧还是右侧const isLeft = params.labelRect.x < myChart.clientWidth / 2const points = params.labelLinePoints// 设置线结束点的位置points[2][0] = isLeft? params.labelRect.x: params.labelRect.x + params.labelRect.widthreturn { labelLinePoints: points }
},

echarts设置视觉引导线穿过两行文字的效果相关推荐

Echarts 饼图视觉引导线隐藏和显示
由于饼图的数据过多,文字比较密集所以决定对数量超过10的数据隐藏其视觉引导线.直接上代码 var arr1=[{value: "10", name: "资金运用" ...
echarts饼状图设置label的交互效果，饼状图鼠标浮上图形才显示label和视觉引导线
echarts饼状图默认label和视觉引导线效果: 这个效果没有没有形成与用户的交互,此时添加如下设置: label: {show: false,position: 'outside'},empha ...
ECharts 饼图将标签设置在视觉引导线上方
1 使用详解 (1)series.labelLine.length 说明:视觉引导线第一段的长度. (2)series.labelLine.length2 说明:视觉引导线第二段的长度. (3)ser ...
echarts中饼图引导线加圆点
推荐网址该网站里面有很多大佬贡献的图表,总能找到你想要的点击链接抵达 (1)我们需要完成的样子如下 (2)echarts主要部分配置 series: [ label: { //饼图图形上的文本标签 ...
Echarts饼状图视觉引导线设置
如何设置饼状图引导线位置我们在使用Echarts绘制饼状图时,经常需要确定引导线位置,官网给出的示例并未明确哪些属性决定了引导方式及位置,例如: 如下外部引导线方式: 有内部引导线方式如何设置这两 ...
Echarts地图添加引导线效果(labelLine)
最近有粉丝问我能不能出个案例:地图上的地区文字,或其他标示类的图层,因为区块面积相对太小,想放在地图之外,通过labelLine连接到对应的区块上.今天就分享一个类似简单的案例,铺设散点形式铺设lab ...
echarts 修改饼图引导线配置
labelLine属性为饼图引导线配置 labelLine:{ normal:{ length: 5, // 修改引导线第一段的长度length2: 15, // 修改引导线第二段的长度lineSty ...
echarts 有引导线和内部文字_点、线、面构图的异同以及相互转化
点.线.面构图既有相似性,又有差异性.相似的是都有对齐.强调.群组.重复.突出层次的作用,不同的是点的特点是聚焦.线的特点是运动和方向性,面的特性是体量感.稳定性.点的情感最弱,线.面的情感要比点丰富 ...
echarts 有引导线和内部文字_上进青年研习社丨设计入门02：平面设计之平面构成中的线...
文丨姜哥点.线.面是平面构成的三大基本元素.在<设计入门01丨不知道这一"点",学再多技能也不会设计>中为大家介绍了点的理论知识及在设计中的用法,今天接着来说说第二个 ...

echarts设置视觉引导线穿过两行文字的效果

echarts设置视觉引导线穿过两行文字的效果相关推荐

最新文章

热门文章