echarts显示金字塔,右侧显示数据
1、需求:按金字塔的形式显示不同学历的人员信息echarts提供了漏斗图,可以在此基础上做修改这里选第一个图

3、先修改data中的value值,让金字塔显示的漂亮些

5、使用markLine在金字塔的右侧显示实际的数据。在画markLine时,需要计算线的起点和终点的坐标值。可以是具体的数,也可以是百分比。对于x轴,起点在图片中间,所以定义为50%,终点在右侧靠边一些,这里定义为90%,可以根据实际效果再调试对于y轴,需要考虑top和bottom的值,这里将top和bottom也设置为百分比,都是10%,那么图片的高度就剩80%。总共有5层,所以每层高度为80/5 = 16%画的线条在每层的中间,所以,第一层的y值为10 + 16/2 = 18%,以后每层增加16%即可每条线的颜色从定义的颜色列表中取值

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
阅读量:63
阅读量:93
阅读量:41
阅读量:67
阅读量:62