位置: 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)(火星车百家号)

  • 360浏览器极速模式如何打开(360浏览器极速模式怎么开手机)

    360浏览器极速模式如何打开(360浏览器极速模式怎么开手机)

  • 怎么把抖音上的视频去掉水印(怎么把抖音上的音乐设置成铃声)

    怎么把抖音上的视频去掉水印(怎么把抖音上的音乐设置成铃声)

  • 微信怎么看自己加过谁对方还没同意(微信怎么看自己有哪些群)

    微信怎么看自己加过谁对方还没同意(微信怎么看自己有哪些群)

  • 手机导数据是什么意思(手机导数据什么软件最方便)

    手机导数据是什么意思(手机导数据什么软件最方便)

  • iphone6s强制重启(iphone6s强制重启怎么操作)

    iphone6s强制重启(iphone6s强制重启怎么操作)

  • 用数据线连接音响放歌(用数据线连接音响放歌的操作)

    用数据线连接音响放歌(用数据线连接音响放歌的操作)

  • 母版的作用(简述幻灯片母版的作用)

    母版的作用(简述幻灯片母版的作用)

  • qq音乐怎么查看听歌等级(qq音乐怎么查看用了几年)

    qq音乐怎么查看听歌等级(qq音乐怎么查看用了几年)

  • 钉钉作业历史老师能看到吗(钉钉作业历史版本)

    钉钉作业历史老师能看到吗(钉钉作业历史版本)

  • 卸载质量更新什么意思(卸载质量更新和功能更新什么意思)

    卸载质量更新什么意思(卸载质量更新和功能更新什么意思)

  • 中国电信10071怎么解决(中国电信10071是什么意思)

    中国电信10071怎么解决(中国电信10071是什么意思)

  • iphone怎么拦截广告短信(iPhone怎么拦截广告电话)

    iphone怎么拦截广告短信(iPhone怎么拦截广告电话)

  • 怎么设置成从未开通朋友圈(怎么设置成从未发过朋友圈)

    怎么设置成从未开通朋友圈(怎么设置成从未发过朋友圈)

  • 手机org文件能删么(手机里的org是什么格式文件)

    手机org文件能删么(手机里的org是什么格式文件)

  • ipad微信群发失败(ipad微信群发功能不见了)

    ipad微信群发失败(ipad微信群发功能不见了)

  • 爱奇艺有没有电视版本(爱奇艺有没有电视app)

    爱奇艺有没有电视版本(爱奇艺有没有电视app)

  • 手机爱奇艺清晰度设置方法(手机爱奇艺清晰度不见了)

    手机爱奇艺清晰度设置方法(手机爱奇艺清晰度不见了)

  • 为什么qq有消息提示但是点进去却没有(为什么qq有消息却没有提示音)

    为什么qq有消息提示但是点进去却没有(为什么qq有消息却没有提示音)

  • 手机qq群匿名怎么设置(手机qq群匿名怎么关掉)

    手机qq群匿名怎么设置(手机qq群匿名怎么关掉)

  • oppoa9怎么关闭运行程序(oppoa11x怎么关闭运行)

    oppoa9怎么关闭运行程序(oppoa11x怎么关闭运行)

  • 大三元镜头是指什么

    大三元镜头是指什么

  • 苹果6系统升级(苹果6系统升级不了)

    苹果6系统升级(苹果6系统升级不了)

  • 本地从0搭建Stable Diffusion WebUI及错误记录(搭建本地http服务器)

    本地从0搭建Stable Diffusion WebUI及错误记录(搭建本地http服务器)

  • 数据库平滑扩容方案剖析(数据库平移)

    数据库平滑扩容方案剖析(数据库平移)

  • 加油站购进成品油怎么做账
  • 纳税申报的流程是什么
  • 买原材料怎么记账
  • 企业所得税上个月没有计提本月怎么计提
  • 签三方协议需要什么资料
  • 装修费用摊销是当月还是次月
  • 最新增值税申报表及附表下载
  • 注册地址与实际办公地址不一致怎么办
  • 借款合同法律规定的表述
  • 公司向税务局缴纳环保税
  • 代扣代缴附加税怎么做账
  • 公司增资麻烦吗?
  • 残保金是所有企业都交么
  • 哪些税不适用征管法
  • 印花税的计税依据是开票金额吗
  • 应纳所得税额除以收入等于什么
  • 销售,购买
  • 工程结算收入要交税吗
  • 收据能入账抵税吗
  • 出租车发票有出租车信息吗
  • 委托收款有哪些
  • 税务局报表利润表本期金额
  • 销售材料并提供安装服务税率
  • 应收票据盘点表是出纳填吗
  • 研发费用申报表汇算清缴怎么填
  • 装载u盘
  • 为什么win10系统更新不了
  • 应收票据到期收回时和未到期转让时
  • 收到工会经费怎样做账
  • 出口退税是怎么退
  • php公众号
  • phpexplode函数
  • 玩游戏的显示器要高刷还是高分辨率
  • 文竹叶子发黄怎么办
  • 企业收到的保险理赔款会计分录
  • 营改增后一般纳税人缴纳增值税彩用简易征收3%
  • vue父组件怎么调用子组件的方法
  • 应交增值税减免税额在借方
  • thinkphp项目怎么运行
  • vue路由用法
  • push指令执行的详细过程
  • 资本金什么时候可以退回
  • 带息应收票据账务处理分录
  • 2022年最新公务接待用餐标准
  • 外购存货的成本包括哪些内容
  • 绿化公司属于哪个行业
  • 什么是支付宝账号如何查看
  • 工会经费的会计分录2022
  • 购买牵引车和挂车购车流程
  • 母公司对子公司的控股比例
  • 企业为员工承担个人部分的五险 一金可以税前扣除?
  • 营改增之后建筑业预收账款是否需要预交税款
  • 税控盘是什么会计科目
  • 存货周转率作为控制变量
  • 负数发票怎样做账
  • 城市基础设施配套费征收管理规定
  • 新准则合同结算的科目编码为
  • 为员工保险取得的增值税抵扣
  • 事业单位结余是什么意思
  • 跨年的个人所得税可以更正吗
  • 合资公司股东如何退股
  • 福利费的概念是指
  • 药品进销差价科目明细
  • 房地产企业收到政府补助
  • 会计错账更正方法口诀
  • sqlalchemy merge
  • windf9
  • 如何强制退出当前程序mac
  • linux连接ssr
  • 双系统没有选择
  • sbdrvdet.exe - sbdrvdet是什么进程 有什么用
  • win 7关闭睡眠
  • python如何用turtle
  • python打印直角三角形用*符号
  • 浅蓝色html代码
  • bootstrap与Jquery UI 按钮样式冲突的解决办法
  • 夜间模式图
  • 上海市税务局招聘
  • 税务部门的扣款协议
  • 江西发票查询真伪查询
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设