当前位置: 首页 > 知识库问答 >
问题:

前端 - echarts饼图设置标签的position为 inside 时,如何进一步调整标签位置?

诸新霁
2023-10-19

当前效果:标签文字太靠近中心位置

image.png

当前series配置如下

{        type: "pie",        radius: "67%",        center: ["30%", "50%"],        label: {          show: true,          position: "inside",          formatter: "{d}%",          color: "#fff",          fontSize: 14,          fontFamily: "D-DIN",          distanceToLabelLine: 20,          fontWeight: 400        },        labelLine: {          show: false,        },        data: [          { value: 1048, name: "转化医学" },          { value: 735, name: "病理科" },          { value: 580, name: "检验科" },          { value: 484, name: "肿瘤中心" },          { value: 300, name: "制剂科" },          { value: 400, name: "细胞中心" },          { value: 500, name: "血液科" },          { value: 600, name: "心研所" },          { value: 700, name: "呼吸科" },          { value: 800, name: "危重科" },          { value: 900, name: "抢救室" }        ],        itemStyle: {          borderColor: "#fff",        },        emphasis: {          itemStyle: {            shadowBlur: 10,            shadowOffsetX: 0,            shadowColor: "rgba(0, 0, 0, 0.5)",          },        },      },}

期望实现的效果如下,标签文字虽然在扇区内部,但是更靠近边缘,不会互相遮挡

image.png

共有1个答案

卫烨
2023-10-19

可以通过labelLayout回调分别计算渲染label位置,这需要echarts v5版本及以上才能使用,而且点位的计算需要用到一点数学知识

 类似资料:
  • 我正在使用mpandroid图表库创建饼图。 我想格式化饼图上的文本标签,但我不知道如何做到这一点 但是,它只改变数据的值,而不是标签。此外,我想成为饼图中的标签。我还尝试使用以下代码, 但是,它不起作用。 我的代码如下: 简而言之,我想做的就是 更改饼图中的标签颜色(从白色变为黑色) 防止标签超出饼图。(如图中所示的剩余划痕) 有人能帮我吗? 我还尝试了以下链接中提到的这些解决方案。 链接1链接

  • position推荐位标签 标签: <position></position> 用法示例 <position action="position" posid="1"> .. HTML ..</position> 公用参数 参数 说明 @cache 数据缓存时间,单位秒 @return 返回值变量名称,默认data @where sql语句的where部分 获取推荐位数据 参数 说明 @posi

  • 我对C#背景的Java很陌生。我正在按照本教程向我的项目添加一个图像并在标签中显示。在C#中,我们使用Picture-box并设置image属性,在C#中,我还可以在设计时通过调整Picture-box的大小来调整Picture-box中的图像。 我已经按照教程将图像添加到一个标签,但现在的问题是图像相当大,我想重新调整大小。我试过调整标签的大小,但我的图像没有压缩或重新调整大小。 我该怎么做才能

  • 我试图添加自定义渲染器的每个饼图在我的图表上的基础上,数据的类型是传递(整数vs美元,金额vs百分比)。但是,中的数据似乎只有1个键(然而,当数据集创建为时,它有和)。 在下面的图片中,我试图实现的是右边的图(“销售总额”)将显示美元金额()。 我尝试了什么:我尝试创建一个自定义呈现器,并传入datatype的枚举,但这不起作用,因为数据类型是因为我无法确定呈现器中呈现的是哪个馅饼: 这可能吗?所

  • 问题内容: 请不要介意这是一个愚蠢的问题, 是否有可能在php中使用新标签页打开一个窗口 问题答案: 不,不可能。标头将仅在当前窗口/选项卡中重定向当前页面。

  • 问题内容: 我正在使用创建饼图,我想像在中那样分别设置值和标签。换句话说,我希望图表在饼图中显示的结果与图例中显示的结果不同。有什么办法可以做到这一点? 问题答案: 所述 ArgumentIndex 值对应于 系列名 , 域 和 范围 。您可以为基础中的每个系列或所有系列设置不同的生成器。 附录:对于,值的含义略有不同- 系列名称 , 值 和 百分比 。