Echarts饼图,自定义饼图图例的排列方式, formatter使用语法

🌈🌈​​​​​​​🌈文章目录

 一、饼图图例的排列方式

1.引入饼图

2.水平顶部(底部)排列

3.垂直左右排列

二、formatter使用语法

以图例后面拼接占比百分比为例

1.上下左右排列+占比百分比

2.两端排列+占比百分比

 一、饼图图例的排列方式

1.引入饼图

这一步大多数应该都会,官网有例子,直接cv就可以用,简单提一下吧

<template>
  <div class="box">
    <div id="mycircle"></div>
  </div>
</template>
<script>
export default {
  data(){
    return{
    	option: {
			tooltip:{},
			legend:{},
			series:[],
			......
		}
    }
  },
  methods:{
	async init(){
	  var myChart = this.$echarts.init(document.getElementById('mycircle'));
      myChart.setOption(this.option);
      myChart.clear();
      await getIndex7DayException().then(data => {
		// data返回值格式就是[{name: '', value: ''}],有且只能是name和value这两个key,其他都不行
		// 如果返回值是其他的,那就需要转化一下了
        data.map(v =>{
          let keymap = {count: 'value',areaName: 'name'}  // 将count字段转成value字段,areaName字段转化成name字段
          Object.keys(v).map(k =>{
            let newKey = keymap[k]
            if (newKey) {
              v[newKey] = v[k]
              delete v[k]
            }
          })
        })
        this.option.series[0].data = data;
        myChart.setOption(this.option);
        window.addEventListener("resize", () => { myChart.resize() });
	  }
	}
  },
  mounted(){
    this.init()
  }
}
</script>

到这为止,图表就可以正常显示了,下面开始自定义图例的排列方式

2.水平顶部(底部)排列
 

top: 0

bottom: 0 

 

 示例代码: 

legend:{
 top: '0',
 //bottom: '0'
 textStyle: { color: '#fff'},
}
            

3.垂直左右排列

垂直属性: orient: ‘vertical’,
left: 0

right: 0

 示例代码:

legend:{
  left: '0',
  // right: '0'
  textStyle: {  color: '#fff'},
  orient: 'vertical',
}

3,两端排列
顶部一半,底部一半

        legend: [
          {
            top: '0',
            textStyle: {  color: '#fff', padding: [11,0,11,0] },
            data: [],
          },
          {
            bottom: '0',
            textStyle: {  color: '#fff', padding: [11,0,11,0] },
            data: [],
          },
        ],

        init(){
        	  this.option.legend[0].data = legendName.slice(0,5)
     	      this.option.legend[1].data = legendName.slice(-5)
        }

 左边一半,右边一半

        legend: [
          {
            x: 'left',
            textStyle: {  color: '#fff', padding: [11,0,11,0] },
            orient: 'vertical',
            data: [],
          },
          {
            x: 'right',
            textStyle: {  color: '#fff', padding: [11,0,11,0] },
            orient: 'vertical',
            data: [],
          },
        ],

   init(){
        	  this.option.legend[0].data = legendName.slice(0,5)
     	      this.option.legend[1].data = legendName.slice(-5)
        }

二、formatter使用语法

以图例后面拼接占比百分比为例

使用formatter,让每个图例后面拼接该部分占整体的百分比

1.上下左右排列+占比百分比

        legend:{
            x: 'left',
            textStyle: {  color: '#fff',  },
            orient: 'vertical',
            data: [],
            formatter: e =>{
              var data = this.option.series[0].data;
              var total = 0;
              var val = 0;
              data.forEach(el => {
                total += el.value;
                if(e == el.name) val = el.value
              });
              return `${e}  ${((val / total)*100).toFixed(2)}%`
            }
          },

this.option.legend.data = legendName
2.两端排列+占比百分比

        legend: [
          {
            x: 'left',
            textStyle: {  color: '#fff', padding: [11,0,11,0] },
            orient: 'vertical',
            data: [],
            formatter: e =>{
              var data = this.option.series[0].data;
              var total = 0;
              var val = 0;
              data.slice(0,5).forEach(el => {
                total += el.value;
                if(e == el.name) val = el.value
              });
              return `${e}  ${((val / total)*100).toFixed(2)}%`
            }
          },
          {
            x: 'right',
            textStyle: {  color: '#fff', padding: [11,0,11,0] },
            orient: 'vertical',
            data: [],
            formatter: e =>{
              var data = this.option.series[0].data;
              var total = 0;
              var val = 0;
              data.forEach(el => {
                total += el.value;
                if(e == el.name) val = el.value
              });
              return `${e}  ${((val / total)*100).toFixed(2)}%`
            }
          },
        ],

		this.option.legend[0].data = legendName.slice(0,5)
        this.option.legend[1].data = legendName.slice(-5)

好了,本文就到这里吧,点个关注再走嘛~

🚀 个人简介:6年开发经验,现任职某国企前端负责人,分享前端相关技术与工作常见问题~
💟 作    者:前端菜鸟的自我修养❣️
📝 专    栏:GIS地图与大数据可视化
🌈 若有帮助,还请关注➕点赞➕收藏,不行的话我再努努力💪💪💪

 更多专栏订阅推荐:

📝 vue从基础到起飞

👍 前端工程搭建
💕 JavaScript深入研究

✍️ 前端工作常见问题汇总​​​​​​​

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/704363.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

刚刚苹果发布了「Android18」,还有29999的新机

大伙儿端午好啊&#xff0c;刚刚过去端午节。 苹果就在本周二凌晨 1 点召开了 WWDC2024 大会开幕。 果子最近很活跃啊&#xff0c;看来是被上半年的财报深深刺痛了。 此次大会没有硬件&#xff0c;基本都是涵盖各个产品未来的系统更新&#xff0c;果粉们期待的 iOS18、Mac OS…

交流负载箱的使用场景和应用范围是什么?

交流负载箱模拟实际用电设备运行状态的电力测试设备&#xff0c;主要用于对各种电气设备、电源系统、发电机组等进行性能测试、质量检验和安全评估。交流负载箱的使用场景和应用范围非常广泛&#xff0c;涵盖了电力、通信、能源、交通等多个领域。 1. 电力行业&#xff1a;在电…

Linux 中 “ 磁盘、进程和内存 ” 的管理

在linux虚拟机中也有磁盘、进程、内存的存在。第一步了解一下磁盘 一、磁盘管理 &#xff08;1.1&#xff09;磁盘了解 track&#xff08; 磁道 &#xff09; &#xff1a;就是磁盘上的同心圆&#xff0c;从外向里&#xff0c;依次排序1号&#xff0c;2号磁盘........等等。…

中国首家!全球第二!沃飞长空AE200取得关键技术突破

近日&#xff0c;沃飞长空全自研战略产品AE200电动垂直起降航空器&#xff08;eVTOL&#xff09;验证机顺利完成全尺寸、全重量、全包线倾转过渡飞行&#xff0c;成为中国首个、全球第二完成该类试验科目的eVTOL企业&#xff0c;标志着中国eVTOL发展实现历史性突破&#xff0c;…

【JavaScript】简单数据类型 与 复杂数据类型 ② ( 简单数据类型参数传递 | 复杂数据类型参数传递 )

文章目录 一、简单数据类型参数传递1、值传递2、代码示例 二、复杂数据类型参数传递1、引用传递2、代码示例 一、简单数据类型参数传递 1、值传递 简单数据类型 的 参数传递时 , 将 该类型的比变量 或 值 作为 实参 传递给 函数形参 时 , 其本质是 将 栈内存 中存储的 数据值 …

meilisearch的索引(index)的最佳实践

官网的第一手资料学新技术&#xff1a;meilisearch官方文档 安装的官网地址&#xff1a;meilisearch安装的官网 部署在生产环境的指导&#xff1a;meilisearch部署在生产环境的指导 Elasticsearch 做为老牌搜索引擎&#xff0c;功能基本满足&#xff0c;但复杂&#xff0c;重…

基于springboot实现问卷调查系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现问卷调查系统演示 摘要 传统信息的管理大部分依赖于管理人员的手工登记与管理&#xff0c;然而&#xff0c;随着近些年信息技术的迅猛发展&#xff0c;让许多比较老套的信息管理模式进行了更新迭代&#xff0c;问卷信息因为其管理内容繁杂&#xff0c;管理数…

【数据结构】第十五弹---C语言实现直接插入排序

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】 目录 1、排序的概念及其运用 1.1、排序的概念与分类 1.2、排序运用 1.3、常见的排序算法 1.4、常见的排序算法性能测试 2、常见排序算法的实现 2…

NewStarCTF_RE(week1,2)

[NewStarCTF 2023 公开赛道]easy_RE ida 可能会把 一个数组或字符串拆开&#xff0c;可以通过计算地址&#xff0c;知道是一起的 也有的会藏在汇编窗口 Segments IDA的Segments窗口 &#xff1a;shiftf7 https://www.cnblogs.com/sch01ar/p/9477697.html ida 各种窗口也是需要…

北斗导航:让科技引领未来出行

北斗导航是中国自主研发的卫星导航系统&#xff0c;由一系列北斗卫星和地面控制平台组成。它的研发始于上世纪80年代&#xff0c;经过几十年的发展&#xff0c;如今已成为全球领先的卫星导航系统之一。北斗导航凭借其优秀的性能&#xff0c;为我们的出行提供了准确、可靠的定位…

景联文科技:打造亿级高质量教育题库,赋能教育大语言模型新未来

随着人工智能技术的持续进步&#xff0c;从广泛的通用大语言模型到针对各行业的垂直大语言模型&#xff0c;已成为人工智能大语言模型技术深化演进的必然趋势。 教育大语言模型是适用于教育场景、具有庞大规模参数、融合了广泛的通用知识和专业知识训练形成的人工智能模型。能为…

【调试笔记-20240612-Linux-在 QEMU 中配置 OpenWrt-23.05 支持访问 Windows 宿主机的共享目录】

调试笔记-系列文章目录 调试笔记-20240612-Linux-在 QEMU 中配置 OpenWrt-23.05 支持访问 Windows 宿主机的共享目录 文章目录 调试笔记-系列文章目录调试笔记-20240612-Linux-在 QEMU 中配置 OpenWrt-23.05 支持访问 Windows 宿主机的共享目录 前言一、调试环境操作系统&…

现场直击 | 飞凌嵌入式亮相2024上海国际嵌入式展

6月12日&#xff0c;2024上海国际嵌入式展&#xff08;embedded world China 2024&#xff09;在上海世博展览馆开幕。飞凌嵌入式亮相3号馆646展位&#xff0c;聚焦人工智能、智慧交通、工业互联网、智慧医疗、电力与储能等领域&#xff0c;旨在为全球客户带来一场技术与创新的…

第 3 章:Spring Framework 中的 AOP

第 3 章&#xff1a;Spring Framework 中的 AOP 讲完了 IoC&#xff0c;我们再来聊聊 Spring Framework 中的另一个重要内容——面向切面编程&#xff0c;即 AOP。它是框架中众多功能的基础&#xff0c;例如声明式事务就是依靠 AOP 来实现的。此外&#xff0c;Spring 还为我们…

【车载AI音视频电脑】4路AHD 130万像素双卡车载录像机

产品主要特点&#xff1a; -支持4路实时高清AHD 720P录像 -SD卡记录数据&#xff08;可支持2张大容量SD卡,最大支持单张256G&#xff09; -支持GPS全球定位, 可选模块 -支持WIFI高速自动下载功能, 可选模块 -内置3/4G模块&#xff0c;实时预览和远程管理&#xff0c; 可选…

环保空调的制冷量和耗电量是多少呢

环保空调的制冷量和耗电量因具体型号、功率以及使用情况而异。以下是一些关于环保空调制冷量和耗电量的详细解释和归纳&#xff1a; 制冷量 原理&#xff1a;环保空调主要利用水蒸发吸热的物理原理进行降温&#xff0c;这种降温方式能够带来显著的冷却效果。效果&#xff1a;…

现代X86汇编-C和ASM混合编程举例

端午假期安装好了vs c2022,并写了个简单的汇编代码&#xff0c;证明MASM真的可以运行。今天需要搞一个实实在在的C和ASM混合编程的例子&#xff0c;因为用纯汇编的求伯君写WPS的时代一去不复返了。个别关键函数用汇编&#xff0c;充分发挥CPU的特色功能&#xff0c;偶尔还是需要…

crowdsec 使用补充说明

1、服务器地址 10.99.50.1 2、后台地址 https://app.crowdsec.net/ 3、查看信息 查看解释器–用于识别读取日志 cscli parsers list查看场景–用于识别攻击&#xff08;防护手段&#xff09; cscli scenarios list产看集合–是解释器和场景的集合 cscli collections list4、…

SwaggerSpy:一款针对SwaggerHub的自动化OSINT安全工具

关于SwaggerSpy SwaggerSpy是一款针对SwaggerHub的自动化公开资源情报&#xff08;OSINT&#xff09;安全工具&#xff0c;该工具专为网络安全研究人员设计&#xff0c;旨在简化广大红队研究人员从SwaggerHub上收集已归档API信息的过程&#xff0c;而这些OSINT信息可以为安全人…

HTML静态网页成品作业(HTML+CSS)—— 非遗皮影戏介绍网页(6个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有6个页面。 二、作品演示 三、代…