初始效果:

优化后的效果:

优化点:控制了y轴显示字数,鼠标hover上去显示全部
主要实现思路参考了这位同学的文章:https://www.cnblogs.com/liuboren/p/9040622.html
我是用vue实现的,因为我需要一个页面中显示多个同类型的折线图,所以需要封装一个通用的折线图组件,下面主要说一下我的实现方式:
1. 封装一个折线图组件LineEchart,折线图的dom结构如下图所示:

其中包含两个动态的参数:domId,height,这两个参数均由调用该组件的父组件传入

本文介绍了如何解决Echarts y轴标签显示过长的问题,通过控制显示字数并在鼠标hover时显示完整内容。在vue.js环境下,封装了一个通用折线图组件LineEchart,激活y轴鼠标事件,自定义提示框样式和位置,并处理了多实例间的冲突问题。
最低0.47元/天 解锁文章
1055

被折叠的 条评论
为什么被折叠?



