当前位置: 首页 > article >正文

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

在这里插入图片描述

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}'
              }
          }
      }
  ]
};

http://www.kler.cn/a/304243.html

相关文章:

  • Spring框架之适配器模式 (Adapter Pattern)
  • 有什么初学算法的书籍推荐?
  • 【Linux】基础IO及文件描述符相关内容详细梳理
  • LeetCode【0018】四数之和
  • docker基础:搭建centos7(详见B站泷羽sec)
  • 《硬件架构的艺术》笔记(一):亚稳态
  • 数据结构应用实例(五)——关键路径
  • 学python要下什么包吗,有推荐的教程或者视频吗?
  • SprinBoot+Vue山西文旅网的设计与实现
  • 软件测试学习笔记丨Postman实战练习
  • 黑链、黑帽、明链分别是什么意思
  • JavaScript --函数作用域变量的使用规则(局部和访问)
  • 研究生深度学习入门的十天学习计划------第十天
  • LLM 工程师入门:生成式AI的简易指南
  • 【Vue】移动端访问Vue项目页面无数据,但是PC访问有数据
  • Linux定时启动jar应用shell脚本分享
  • 基于springboot的二手物品管理系统的设计与实现 (含源码+sql+视频导入教程)
  • C语言实现一个简单的点歌系统
  • XSS和sql注入部分场景测试用例样例
  • 将复杂类型列展开成多行,附带json解析
  • pandas 将多条记录整合成一条记录,每条记录的year和month字段组成新的字段名
  • MySQL从C盘迁移到D盘
  • Git的学习笔记
  • 服务器与个人计算机之间的区别
  • Java项目: 基于SpringBoot+mybatis+maven课程答疑系统(含源码+数据库+毕业论文)
  • 【Ubuntu】Ubuntu双网卡配置 实现内外网互不影响同时可用