eharts中饼图的label超出容器边界了

Question

echarts容器的大小是自适应的，当分辨率变低导致饼图的label超出了容器的边界；
请问有比较好的解决方案吗？

Answer 1

监听window的变化，变化时候调用echart对象的resize()方法

例如（配合jquery使用）
$(window).resize(function() {

echartA.resize()

});

代码里的echartA换成你饼图的那个对象

因为echart对象只会说在第一次页面打开的时候根据容器确定大小，当外部容器大小变化echart不会跟着变化。
或者你监听其他事件，只要echart的外部容器大小变化时调用一下echart对象的resize()方法就可以了

Answer 2

修改前：
在label中添加一下代码后：

position: "outer",  
alignTo: "edge",  
margin: 10,

最终效果图：
细节根据个人需调整。以上仅供参考

Answer 3

echart好像没这个属性 哭笑不得.gif

Answer 4

我解决了,可以参考我这个文章
https://blog.csdn.net/qq_4271...

Answer 5

可以尝试修改series-labelLine-length的长度为0。

Answer 6

方法一：设置饼图大小
可在options中配置height或width属性小于100%，饼图小于canvas的大小，标签超出时也能显示了。

方法二：调整饼图起始角度
可在options中配置startAngle属性，调整饼图各个角的位置。
此方案只适用于某些固定的数据，如数据变化，则角度也会变化。

方法三：调整label的位置
options配置提供了label属性配置label的位置、对齐方式等，labelLine属性配置标示线的位置、长度等。
此方案仍不能适配所有情况的数据。

方法四：重新设计饼图样式
可配置标签显示在饼图之上。

推荐方法一，简单，有效。

Answer 7

这个属性可以配置标签布局方式

// 防止文字溢出
labelLayout: config => {
  const positionObj = {}
  // 防止文字左侧溢出
  if(config.labelRect.x < 0){
    positionObj.x = config.labelRect.width
  // 防止文字右侧溢出
  } else if(config.labelRect.x + config.labelRect.width > 670){
    positionObj.x = 670 - config.labelRect.width
  }
  // 防止文字上侧溢出
  if(config.labelRect.y < 0){
    positionObj.y = config.labelRect.height
  // 防止文字下侧溢出
  } else if(config.labelRect.y + config.labelRect.height > 760){
    positionObj.y = 760 - config.labelRect.height
  }
  return positionObj
},

把670换成你整个图表的宽度，把760换成你整个图表的高度，你可以试试。我这边的需求是做一个低分辨率的饼图，这是预览效果。

Answer 8

添加grid.containLabel属性就好啦 :)

http://echarts.baidu.com/option.html#grid.containLabel

Answer 9

楼主，你怎么解决的？