内容简介:最近在使用 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多行文本溢出显示省略号(…)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
浪潮之巅(下册)
吴军 / 人民邮电出版社 / 2013-6 / 45.00元
《浪潮之巅(第2版)(下册)》不是一本科技产业发展历史集,而是在这个数字时代,一本IT人非读不可,而非IT人也应该阅读的作品。一个企业的发展与崛起,绝非只是空有领导强人即可达成。任何的决策、同期的商业环境,都在都影响着企业的兴衰。《浪潮之巅》不只是一本历史书,除了讲述科技顶尖企业的发展规律,对于华尔街如何左右科技公司,以及金融风暴对科技产业的冲击,也多有着墨。此外,《浪潮之巅》也着力讲述很多尚在普......一起来看看 《浪潮之巅(下册)》 这本书的介绍吧!