位置: IT常识 - 正文

echarts:饼图标签formatter的使用/饼图自定义标签(echarts饼图标题)

编辑:rootadmin
echarts:饼图标签formatter的使用/饼图自定义标签 需求描述

推荐整理分享echarts:饼图标签formatter的使用/饼图自定义标签(echarts饼图标题),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:echarts饼图标签位置设置,echarts饼图动画效果,echarts饼图标题字体颜色,echarts饼图背景图片,echarts饼图标题字体颜色,echarts饼图背景图片,echarts饼图背景图片,echarts饼图标题字体颜色,内容如对您有帮助,希望把文章链接给更多的朋友!

需要实现一个“五彩斑斓”的饼图:每块饼上的标签颜色与这块饼的颜色一致。

实现思路

要改变饼图标签的颜色,需要参考echarts饼图label配置项,以及这个很棒的官方示例:饼图引导线调整。从这个示例中可以了解到自定义标签涉及的两个配置项:formatter(用于自定义标签显示内容)、rich(用于自定义标签文字显示样式)。

label: { formatter: '{name|{b}}\n{time|{c} 小时}', rich: { time: { fontSize: 10, color: '#999' } }}

接下来稍微讲解下上面这段自定义标签的配置项:

formatter

比较简单的标签内容可以通过使用echarts标签字符串模板实现(个人感觉理解起来类似于JS模板字符串),“{name|{b}}\n{time|{c} 小时}”中包含两个内容(“{b}”、“{c} 小时”),它们之间使用“\n”分隔。至于“{name|}”“{time|}”这种写法,大概相当于“<div class=‘name’>{b}</div>”、“<div class=‘time’>{c} 小时</div>”,用于为内容指定样式类名。 此外,还可以通过回调函数的方式手动返回formatter字符串,且回调函数中无法使用echarts标签字符串模板(也没有必要使用,回调函数传入的参数包含的数据更全),如果用回调函数生成上面的formatter字符串,可以这样写:

label: { formatter: params => { // console.log(params) return `{name|${params.name}}\n{time|${params.value} 小时}` }, rich: { time: { fontSize: 10, color: '#999' } }}rich

用于为每个样式类名配置具体样式内容,可以参考echarts支持的样式配置

echarts:饼图标签formatter的使用/饼图自定义标签(echarts饼图标题)

根据笔者的测试,有两点需要注意:①自定义标签样式必须通过在formatter中为内容设置样式类名并在rich中配置对应样式实现;②每段内容只能指定一个样式类名

参考代码

根据以上分析,要实现标签颜色与饼块一致,可以预先定义一个配色数组,遍历数组为每种颜色创建rich样式类名,再使用回调函数formatter为标签内容指定下标一致的样式类名即可,具体参考代码如下:

let pieColors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de']let richColor = {}pieColors.forEach((item, idx) => { richColor[`color${idx}`] = { fontSize: 28, color: item }})option = { color: pieColors, series: [ { name: 'Access From', type: 'pie', radius: ['36%', '56%'], avoidLabelOverlap: false, label: { formatter: params => { // console.log(params) return `{color${params.dataIndex}|${params.name}(${params.value})}` }, rich: richColor }, labelLine: { lineStyle: { width: 3 } }, data: [ { value: 1048, name: 'Search Engine' }, { value: 735, name: 'Direct' }, { value: 580, name: 'Email' }, { value: 484, name: 'Union Ads' }, { value: 300, name: 'Video Ads' } ] } ]};在线运行调试

isqqw-饼图标签示例

标签plus

现在增加这样一个小需求:在刚才的圆环饼图中心,增加展示饼图所有数据的和,效果类似:

分析

首先想到的方案,也是笔者曾经使用的方案:自己多写一个div来展示圆环中心的数据,但现在笔者有了更好的思路,便不细讲了。

新的思路 其实和之前的思路差不多,只是不再自己写一个div自己调样式,而是利用echarts饼图支持在圆心处展示标签的特性,在series中增加一个饼图用于展示总数,参考代码如下:let pieColors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de']let richColor = {}pieColors.forEach((item, idx) => { richColor[`color${idx}`] = { fontSize: 28, color: item }})let chartData = [ { value: 1048, name: 'Search Engine' }, { value: 735, name: 'Direct' }, { value: 580, name: 'Email' }, { value: 484, name: 'Union Ads' }, { value: 300, name: 'Video Ads' }]option = { color: pieColors, series: [ { name: 'Access From', type: 'pie', radius: ['36%', '56%'], avoidLabelOverlap: false, label: { formatter: params => { // console.log(params) return `{color${params.dataIndex}|${params.name}(${params.value})}` }, rich: richColor }, labelLine: { lineStyle: { width: 3 } }, data: chartData }, { name: '数据总数', type: 'pie', radius: ['0%', '0%'], itemStyle: { // 防止鼠标悬浮到标签时出现放大的点 color: 'transparent' }, label: { position: 'inside', formatter: `{data|{c}}\n{serie|{a}}`, rich: { data: { fontWeight: 'bold', fontSize: 64, color: `#202020`, lineHeight: 68, textBorderColor: `transparent`, textBorderWidth: 0 }, serie: { fontSize: 24, color: `#acbac6`, lineHeight: 28, textBorderColor: `transparent`, textBorderWidth: 0 } } }, labelLine: { show: false }, data: [ // 计算表格数据value总和 chartData.reduce((prev, cur) => prev + cur.value, 0) ] } ]};

小伙伴们可跳转isqqw-饼图标签示例在线运行调试~☆▽☆~

(最后再多嘴一句,echarts配置项的层级非常重要!!!如果出现了配置项“失效”的情况,可以先·仔细·对照官方文档,排查下配置项的层级问题~)

比官网更丰富的echarts示例!

强烈推荐一个有非常丰富的echarts在线示例的网站:PPChart,但由于遭到DDOS攻击,PPChart服务不太稳定,大家也可以访问PPChart开发者推荐的另外两个站点:madeapie、isqqw,目前笔者关于echarts的博客代码都已在isqqw创建在线示例o^~^o

参考网址

[1] echarts饼图label配置项 [2] echarts标签字符串模板 [3] JS模板字符串 [4] echarts支持的样式配置

本文链接地址:https://www.jiuchutong.com/zhishi/288887.html 转载请保留说明!

上一篇:OSError: [WinError 1455] 页面文件太小,无法完成操作。 Error loading “C:\ProgramData\Anaconda3\lib\site-packages\to

下一篇:火星快车号传来的火星南极冰盖图像 (© ESA/DLR/FU Berlin/Bill Dunford)(火星车百家号)

  • 微信群发最多多少人(微信群发最多多少字)

    微信群发最多多少人(微信群发最多多少字)

  • 苹果手机会烧屏吗(苹果手机为什么不黑屏)

    苹果手机会烧屏吗(苹果手机为什么不黑屏)

  • 第一代计算机采用的物理器件是(第一代计算机采用的电子元件是)

    第一代计算机采用的物理器件是(第一代计算机采用的电子元件是)

  • 网易云云贝在哪看(网易云云贝在哪里兑换黑胶)

    网易云云贝在哪看(网易云云贝在哪里兑换黑胶)

  • 苹果电脑可以用普通鼠标吗(苹果电脑可以用python吗)

    苹果电脑可以用普通鼠标吗(苹果电脑可以用python吗)

  • 音频的格式有哪些(音频的格式有哪些后缀)

    音频的格式有哪些(音频的格式有哪些后缀)

  • 手机摔过之后频繁重启(手机摔过之后一直重启)

    手机摔过之后频繁重启(手机摔过之后一直重启)

  • 淘宝退款后红包返还吗(淘宝退款后红包会退回吗)

    淘宝退款后红包返还吗(淘宝退款后红包会退回吗)

  • 2600和3600差多少(3600和2600x的差别)

    2600和3600差多少(3600和2600x的差别)

  • 超微距镜头是什么意思(超微距摄像头怎么用)

    超微距镜头是什么意思(超微距摄像头怎么用)

  • dc5v能用手机充电器吗(dc5v接口可以充手机吗)

    dc5v能用手机充电器吗(dc5v接口可以充手机吗)

  • ie系列的浏览器都有哪些(ie系列的浏览器有哪些)

    ie系列的浏览器都有哪些(ie系列的浏览器有哪些)

  • 为何苹果不能下载迅雷(为何苹果不能下载微信)

    为何苹果不能下载迅雷(为何苹果不能下载微信)

  • 苹果XR在哪更新ios13(苹果xr怎么更新)

    苹果XR在哪更新ios13(苹果xr怎么更新)

  • vivox27三个摄像头怎么换(vivox27三个摄像头哪个是主摄)

    vivox27三个摄像头怎么换(vivox27三个摄像头哪个是主摄)

  • 手机上的投射屏幕怎么用(手机 投射)

    手机上的投射屏幕怎么用(手机 投射)

  • flaal10是什么型号(FLAAL10是什么型号)

    flaal10是什么型号(FLAAL10是什么型号)

  • 计算机的特点是什么(属于计算机的特点是)

    计算机的特点是什么(属于计算机的特点是)

  • 苹果储存其他怎么删除(苹果储存中其他怎么删除)

    苹果储存其他怎么删除(苹果储存中其他怎么删除)

  • 抖音怎么发两分钟长视频(抖音怎么发两分多钟的视频)

    抖音怎么发两分钟长视频(抖音怎么发两分多钟的视频)

  • 快手观看模式怎么换(快手观看模式怎么调)

    快手观看模式怎么换(快手观看模式怎么调)

  • 荣耀v20有没有熄屏显示(荣耀v20可以灭屏显示吗)

    荣耀v20有没有熄屏显示(荣耀v20可以灭屏显示吗)

  • 拼多多怎么发布商品(拼多多怎么发布作品视频)

    拼多多怎么发布商品(拼多多怎么发布作品视频)

  • 人工智能的例子(中国古代人工智能的例子)

    人工智能的例子(中国古代人工智能的例子)

  • Vue中的MVVM模型(通俗易懂版)(vuemvvm模式)

    Vue中的MVVM模型(通俗易懂版)(vuemvvm模式)

  • 农副产品免税发票抵扣多少税率
  • 小规模纳税人附加税是几个点
  • 土地增值税纳税义务人
  • 需要登记的特殊药品
  • 应付利润借方有余额怎么处理
  • 简易征收预缴税款交错了
  • 企业向个人借款是否合法
  • 税率3%的增值税专用发票
  • 外币购销业务的账务处理
  • 置换上市公司资质要求
  • 应交税金及附加包括哪些
  • 事业单位借款怎么做账
  • 长期股权投资损失的账务处理
  • 违约金 罚款
  • 资产负债表其他流动资产包括什么
  • 有一个月忘了报税怎么处理
  • 特许权使用费收入确认分录
  • 小规模的成本票
  • 土地作价入股政策
  • 会计所得税和税法所得税
  • 借壳上市是什么意思?融资
  • 每季度财务报表
  • 金税盘发票报送状态未报送
  • 采购开票税率
  • w11怎么更新
  • 营业外收入的账户结构
  • windows11怎么快速截屏
  • 商标转让过程中公司转让
  • 银承到期后
  • 广告行业物料
  • php assign
  • 包装物交不交消费税
  • 增值税检查调整科目还在用吗
  • jquery 批量删除
  • 企业购买银行理财
  • thinkphp怎么用
  • 个体户缴纳的税有哪些
  • 微信小程序自定义tabbar
  • 大数据热点话题
  • 小微企业免征增值税优惠
  • 个税查询和实发工资不符合
  • MongoDB db.serverStatus()输出内容中文注释
  • 接受捐赠的固定资产怎么计提折旧
  • 融资租出的办公楼
  • 船舶税率是多少
  • 出口货物不能退税的账务处理
  • 印花税怎么交税率是多少
  • 酒店打印要钱吗
  • 个人经营所得税率
  • 对公付款对方不开发票可以吗
  • 工程管理服务属于哪个行业
  • 无形资产多摊销怎么处理
  • 资产处置损益和投资收益的区别
  • 个体户怎么开对公账户
  • 租厂房需要办环评注意事项
  • 房租进项发票怎么处理
  • 代销手续费如何做分录
  • 检测公司成本科目
  • 生产车间包括什么
  • 农业技术人员是什么意思
  • 企业营业外支出是什么意思
  • mysql按时间查询
  • spools.exe - spools是什么进程 有何作用
  • win7访问共享文件
  • w10 xbox
  • win8桌面在哪
  • linux ssh gui
  • java iterate()用法
  • cocos creator rpg
  • css使用教程
  • 求链表内节点的指针
  • JQueryEasyUI之DataGrid数据显示
  • node.js利用cas实现单点登录
  • jquery选择器总结
  • jquery调用iframe中的方法
  • 小规模现代服务的税率是多少啊怎么算
  • 已办理了退休,档案还需要保存吗
  • 异辛烷征收消费税对成品油影响
  • 金三系统企业所得税如何变更所得税缴纳方式?
  • 审计程序检查的定义
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设