echarts饼图如何设置文字显示在图内还是图外

echarts饼图在显示的时辰 , 每个扇区显示的文字 , 若何显示在扇区内部 , 别的一些环境 , 若何将其显示在图形外部 , 并在每个扇区伸出一根指示线呢?

需要这些哦
echarts
方式/
1打开浏览器 , 进入echarts官网的实例界面 , 点击左侧的饼图菜单 , 再点击【Referer of a website】饼图

echarts饼图如何设置文字显示在图内还是图外

文章插图

2进入这个实例图形后 , 就可以看到默认的饼图扇区文字是在外面的 , 而且有一根指示线

echarts饼图如何设置文字显示在图内还是图外

文章插图

3若是想把这些文字放到各个扇区内部去 , 该怎么做呢?起首 , 需要点窜左侧option的series内容 , 在data后面或者前面添加:
    label: { normal: { show: true, position: 'inner' }

echarts饼图如何设置文字显示在图内还是图外

文章插图

4点窜完当作后 , 右侧的图形就会主动刷新 , 若是没有主动刷新 , 就点击左侧右上角的运行 。 这个时辰 , 右侧图形就可以看到各个扇区的文字就到了内部去了

echarts饼图如何设置文字显示在图内还是图外

文章插图

5若何把第3步添加的show属性值点窜为false , 会是怎么样的呢? 
     label: { normal: { show: false, position: 'inner' }

echarts饼图如何设置文字显示在图内还是图外

文章插图

6点窜完当作后 , 右侧就可以看到饼图各个扇区都没有文字显示了

echarts饼图如何设置文字显示在图内还是图外

文章插图

7【echarts饼图如何设置文字显示在图内还是图外】所以 , 要显示扇区文字 , 必需要show属性设置为true , 这个默认就是true值 , 只有当某些环境被设置为false之后 , 才需要点窜 。 别的 , 默认文字是显示在扇区外部的 , 想要显示在内部 , 就点窜position的值为inner即可 。 最后 , 若是position是肆意值 , 好比123 , 并不会报错 , 也会当做默认显示

echarts饼图如何设置文字显示在图内还是图外

文章插图


以上内容就是echarts饼图如何设置文字显示在图内还是图外的内容啦 , 希望对你有所帮助哦!

    推荐阅读