echarts显示金字塔,右侧显示数据

 时间:2024-10-13 14:24:48

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

echarts显示金字塔,右侧显示数据

2、按照模拟数据,修改示麻质跹礼例中的值。需要注释掉min和max,否则,图片显示比较窄但是右侧的都没有达到要求。首先,学历高低不是遽牟赓雁按照想象的由高到底的顺序排列;其次,当value中的值出现加到差值时,图片显示比较难看那么如何能解决上述问题呢?

echarts显示金字塔,右侧显示数据

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

echarts显示金字塔,右侧显示数据

4、加入颜色值列表

echarts显示金字塔,右侧显示数据

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

echarts显示金字塔,右侧显示数据

6、可以让图片靠左一些这里需要设置left和right的值,还需要把width注释掉

echarts显示金字塔,右侧显示数据
  • 图解Windows下使用DM管理工具创建存储过程
  • Chrome谷歌浏览器如何全屏显示
  • 电脑如何启用内存保护
  • 通过windows日志来查看电脑的异常操作
  • 怎么用VBA代码设置单元格为货币格式
  • 热门搜索
    劳动手抄报简单又漂亮 中国梦手抄报图片 物理手抄报 向国旗敬礼手抄报 植树节手抄报简单 红领巾心向党手抄报内容文字 关于数学的手抄报 消防知识手抄报 珍爱生命预防溺水手抄报 关于端午节的手抄报