内容简介:最近在使用 Echarts 完成一个漏斗图的需求,为了达到视觉的要求,过程中是用了一些 Hack 的方式,在这里总结一下。首先是配置项,通过在线的示例配出,坐标轴和漏斗图如何计算标签 top 的位置(这里采用 absolute 定位, 标签的 left 可以通过 css 计算)
最近在使用 Echarts 完成一个漏斗图的需求,为了达到视觉的要求,过程中是用了一些 Hack 的方式,在这里总结一下。
效果如图:
需要解决4个问题:
- Label 过长展示省略号
- 中间绿色百分比的 Tag 需要动态固定在两个漏斗图之间的间隙中
- 漏斗图和坐标系相结合
- 漏斗图的数值大小应对坐标系 x 轴的长度,所以漏斗数值越大,横向需要越宽,二者是对应的
- 由于具有多个漏斗,每个漏斗的颜色不一样,按照顺序从上至下颜色变淡
- x 轴 Label 数值过大被挤在一起
首先是配置项,通过在线的示例配出,坐标轴和漏斗图
const globalOptions = { xAxis: { type: 'value', splitLine: { show: true, lineStyle: { type: 'dotted' // 控制虚线 }, color: '#D8D8D8', }, splitNumber: 3, // 控制 x 轴 Label 过长挤在一起的情况,Echarts 会根据此值做适配,并非固定的 axisLine: { show: true, lineStyle: { color: 'rgba(42, 51, 59, 0.1)' } }, axisLabel: { color: 'rgba(42, 51, 59, .5)', interval: 1 }, }, yAxis: [ { splitLine: false, axisLine: { lineStyle: { color: 'rgba(42, 51, 59, 0.1)' } }, axisLabel: { show: false }, axisTick: { show: false } } ], grid: { // 设置漏斗图图的位置 left: 140, top: 50, right: 50, bottom: 20, y: 10 }, // 默认一种颜色 color: ['rgba(63, 99, 245, 1)', 'rgba(63, 99, 245, 0.75)', 'rgba(63, 99, 245, 0.625)', 'rgba(63, 99, 245, 0.4)', 'rgba(63, 99, 245, 0.5)', 'rgba(63, 99, 245, 0.375)', 'rgba(63, 99, 245, 0.25)', 'rgba(63, 99, 245, 0.125)'], series: [ { name: '漏斗图', type: 'funnel', width: 'calc(100% - 100)', left: 140, top: 80, bottom: '10%', funnelAlign: 'left', // 漏斗图样式 gap: 1, // 漏斗间隙 1px sort: 'none', label: { color: '#2A333B', position: 'left', verticalAlign: 'bottom', formatter: [ '{a|{c}人}', '{b|{b}}', ].join('\n'), rich: { a: { fontSize: 14, align: 'right', color: 'rgba(42, 51, 59, .85)', lineHeight: 30, }, b: { align: 'right', fontSize: 14, color: 'rgba(42, 51, 59, .50)', } } }, labelLine: { // 标签的视觉引导线样式 normal: { show: false, // 是否显示引导线 } }, data: [], }, { name: 'line', type: 'line', top: '5%', symbolSize: 0, // symbol的大小设置为0 showSymbol: false, // 不显示symbol lineStyle: { width: 0, // 线宽是0 color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的 }, data: [] } ] }
- 由于 Echarts 的配置项传入的值可以是百分比或者数值,并且直接对应 Css 的规则,所以,假设传入
left: 100
就代表left: 100px
,通过这个特征,我们就可以动态的计算出绿色标签的位置永远处于两个漏斗的中间。 - 漏斗图的每一块高度都是相同的
如何计算标签 top 的位置(这里采用 absolute 定位, 标签的 left 可以通过 css 计算)
const echartsPoint = [{ top: 0 }] // 计算出每个漏斗块的高度 const each = domHeight / len; // 标签的个数比漏斗的数据少一个 const len = echartsPoint.length; echartsPoint.map((p, idx) => { if (idx < len - 1) { // 漏斗之间的间隔为 1px 故取 0.5 12 为每个 tag 的高度 p.top = `${(idx + 1) * each + (.5 * idx) - 12}px` } })
如何处理漏斗图 Label 过长的问题
上述的问题,除了 Tag 使用 DOM 去模拟外,还有漏斗图 Label 过长的问题,其余的都是可以通过配置项解决。
首先漏斗图的宽度是不能变的,所以左侧的 Label 只能采用超出使用...的方式
// 切割文字 formatter: function (params, index) { // 超出省略 params = params.toString(); var maxlength= 8; if (params.length>maxlength) { return params.substring(0, maxlength-1)+'...'; } else{ return params; } }
添加个 DOM,采用 absolute 定位,初始时隐藏,Echarts 实例可以监听 mousemove
事件,鼠标移入时展示完整的 Label, mouseout
时隐藏
chartInstance.on('mousemove', (params) => { console.log(params); if (params.componentSubType === 'funnel') { this.$refs.labelTip[0].style.left = params.event.event.layerX+10 + 'px' this.$refs.labelTip[0].style.top = params.event.event.layerY+20 + 'px' this.$refs.labelTip[0].style.display = 'block' this.$refs.labelTip[0].style.position = 'absolute' this.$refs.labelTip[0].innerText= params.name } }) chartInstance.on('mouseout', (params) => { this.$refs.labelTip[0].style.display = 'none' })
最终效果
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 浅谈移动端过长文本溢出显示省略号的实现方案
- _前端-溢出文本显示省略号
- 多行文本加省略号的处理方法
- CSS 基础:单行与多行省略号
- _Antd Table 自适应和省略号
- 移动端的text-overflow多行文本溢出显示省略号(…)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Code Reading
Diomidis Spinellis / Addison-Wesley Professional / 2003-06-06 / USD 64.99
This book is a unique and essential reference that focuses upon the reading and comprehension of existing software code. While code reading is an important task faced by the vast majority of students,......一起来看看 《Code Reading》 这本书的介绍吧!