echarts 柱形图数据位置显示

最新推荐文章于 2024-09-18 11:33:05 发布

豆芽不吃豆

最新推荐文章于 2024-09-18 11:33:05 发布

阅读量1.2w

点赞数 4

本文链接：https://blog.csdn.net/lucky569/article/details/104939543

版权

问题如图：
想要达到的效果是将图中数据展示位置调整，不超过y轴。
目的：使图中的数据展示不超过y轴。
这里数据的展示位置是相对于柱状图来定位的而不是相对y轴定位，使用属性positon，也就是如下图
在这里插入图片描述
黄色区域代表数据，红色区域代表柱形图，黄色区域可以设置在红色范围内的任何位置。
对应属性：bar series.data.label下面的position
具体参数设置：

position:"inside";  // 自适应在柱状图的中间位置

// 柱形图**外部**的上  下   左   右位置
position："top  bottom left right";

// 柱形图**内部**的上          下                 左             右位置
position: "insideTop  insideBottom  insideLeft insideRight";    
position：(x,y);   // 这里的x,y 是相对柱形图的原点坐标来定位的，（其实就是每条柱状图的底部的中心点坐标）  
// (x,y)的两种形式 :1.绝对像素值
position:(10,10);
//  2.相对的百分比
positon:(20%,30%);