echarts饼图让部分数据显示在图外，部分显示在图内

八月林城

已于 2024-09-12 14:21:24 修改

阅读量181

点赞数 3

分类专栏： VUE 文章标签： echarts javascript

于 2024-09-12 14:20:42 首次发布

本文链接：https://blog.csdn.net/PineSummer/article/details/142174655

版权

VUE 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在这里插入图片描述

echarts饼图让部分数据显示在图外，部分显示在图内

var dataList = [
  { value: 10, name: '商户' },
  { value: 20, name: '充电桩' },
  { value: 30, name: '业主' }
]
option = {
  series: [
      {
          type: 'pie',
          radius: '70%',
          data: dataList,
          labelLine: {
              show: true,
              position: 'outside',
              length: 10,
              length2: 50
          },
          emphasis: {
              itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
          },
          label: {
              normal: {
                  position: 'outside', // 图外
                  formatter: (params) => {
						return params.data.name+'-'+params.data.value
				  }
              }
          }
      },
      {
          type: 'pie',
          radius: '70%',
          data: dataList,
          emphasis: {
              itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
          },
          label: {
              normal: {
                  position: 'inside', // 图内
                  show: true,
                  formatter: '{b}'
              }
          }
      }
  ]
};