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

  • 闲鱼注销后还可以开通吗(闲鱼注销后还可以用淘宝登录)

    闲鱼注销后还可以开通吗(闲鱼注销后还可以用淘宝登录)

  • mac笔记本怎么新建word文档(mac笔记本怎么更新版本)

    mac笔记本怎么新建word文档(mac笔记本怎么更新版本)

  • 集五福是不是只能集一次(集五福是不是只能集一套)

    集五福是不是只能集一次(集五福是不是只能集一套)

  • 华为手机换屏后会影响什么(华为手机换屏后指纹不能用怎么回事)

    华为手机换屏后会影响什么(华为手机换屏后指纹不能用怎么回事)

  • 苹果手机设置都开了微信不通知怎么办(苹果手机设置都是黑色)

    苹果手机设置都开了微信不通知怎么办(苹果手机设置都是黑色)

  • 怎样测试led灯有无蓝光(如何测试led灯)

    怎样测试led灯有无蓝光(如何测试led灯)

  • ipad黑屏但是有声音(ipad黑屏但是有亮光)

    ipad黑屏但是有声音(ipad黑屏但是有亮光)

  • ftp端口号20和21的区别(ftp的20和21端口)

    ftp端口号20和21的区别(ftp的20和21端口)

  • 苹果11无线充电充不进(苹果11无线充电功能在哪里打开)

    苹果11无线充电充不进(苹果11无线充电功能在哪里打开)

  • kindle官翻机和全新机区别(kindle官翻好还是全新好)

    kindle官翻机和全新机区别(kindle官翻好还是全新好)

  • 电脑蓝屏和主板有关系吗(笔记本电脑黑屏了但是电源亮着)

    电脑蓝屏和主板有关系吗(笔记本电脑黑屏了但是电源亮着)

  • 苹果x一天死机好几次(iphonex经常死机重启)

    苹果x一天死机好几次(iphonex经常死机重启)

  • 微信邀请新人有奖励吗(微信邀请新人有什么好处)

    微信邀请新人有奖励吗(微信邀请新人有什么好处)

  • 搜索快捷键ctrl加什么(搜索快捷键是什么)

    搜索快捷键ctrl加什么(搜索快捷键是什么)

  • 个人收款码和商家收款码的区别(个人收款码和商用收款码有什么区别)

    个人收款码和商家收款码的区别(个人收款码和商用收款码有什么区别)

  • iphone11pro电池怎么保养(iphone11 11pro 电池)

    iphone11pro电池怎么保养(iphone11 11pro 电池)

  • wps如何找到未保存的文档(如何在wps中找到未保存文件)

    wps如何找到未保存的文档(如何在wps中找到未保存文件)

  • iphone8几核处理(iphone 8核)

    iphone8几核处理(iphone 8核)

  • 朋友圈发文字不被折叠(朋友圈发文字不折叠的方法)

    朋友圈发文字不被折叠(朋友圈发文字不折叠的方法)

  • 华为天际通原理(华为天际通工作原理)

    华为天际通原理(华为天际通工作原理)

  • 微博怎么看关注时间(微博怎么看关注时间多久)

    微博怎么看关注时间(微博怎么看关注时间多久)

  • 苹果id安全码是什么(苹果手机id安全码是什么意思)

    苹果id安全码是什么(苹果手机id安全码是什么意思)

  • xbox可以卸载吗(联想xbox可以卸载吗)

    xbox可以卸载吗(联想xbox可以卸载吗)

  • 手机6g和4g有什么区别(手机6g和4g哪个好)

    手机6g和4g有什么区别(手机6g和4g哪个好)

  • qq名片在哪里(qq名片在哪里开陌生人可以赞)

    qq名片在哪里(qq名片在哪里开陌生人可以赞)

  • 如何检查文件是否有Python的符号链接?(如何检查文件是否有毒)

    如何检查文件是否有Python的符号链接?(如何检查文件是否有毒)

  • 汇算清缴涉及哪些调整
  • 小规模纳税人出售使用过的汽车
  • 计算本月所得税税率为25%
  • 白条技巧
  • 公司买手表账务处理
  • 公司会计日常工作内容
  • 盈余公积的作用与意义
  • 三代手续费怎么申请返还
  • 怎样查验电子发票真伪
  • 建筑公司收到材料发票
  • 个人给公司开税票有没有影响
  • 价格调节基金费率
  • 在途物资材料采购的区别
  • 一般纳税人汽车修理费可以抵扣吗
  • 发票开具提示
  • 如何计算纳税调整增加额
  • 销项发票遗失怎么办
  • 四季度企业所得税怎么报
  • 转回已确认固定资产减值损失的会计处理怎么做?
  • 进口货物的关税税率
  • 原材料账户期末贷方余额反映
  • 财务报表批准日是哪一天
  • 1697510110
  • 职工食堂购买洗碗机申请
  • linux的进程类型
  • 如何修改windows11开机密码
  • 苹果mac有hdmi
  • 代买车船税怎么挣钱
  • mac连不上wifi怎么回事 其他设备却可以
  • 安装win7前需要手动格式化c盘吗
  • autorun.exe
  • 苹果推送最新系统怎么关
  • html5微博
  • 酒店里用了收费的东西怎么算
  • EMQX(MQTT)----基本用法以及使用Python程序进行模拟流程
  • 金融资产减值损益怎么算
  • php是面向过程还是面向对象
  • php静态页面生成
  • vue运行报错
  • 投资性房地产成本法转公允价值法
  • kk协议
  • vue定时调用方法
  • vue父组件子组件
  • 不是企业职工能否挂靠企业交社保
  • 当月未付款算在次月吗
  • 公司全部股权转让流程
  • 物业管理企业会计核算的特点如何?
  • 开发票该怎么操作?
  • 个税返还手续费怎么做账
  • 营业执照备案登记表
  • 捐赠纳税调整额怎么算
  • 安全生产费会计核算办法
  • 3%减按2%征收增值税是什么意思
  • 个贷系统平账专户A户付款会计分录
  • 分包管理费取费标准
  • 管理成本分摊比例是多少
  • 劳务费收入交印花税吗
  • 股票增发给谁
  • 红十字会是事业编还是行政编
  • windows下键盘不能用
  • win7防火墙打不开错误代码6801
  • win7系统如何修改默认浏览器
  • vsftpd的配置文件
  • win10不停的自动重启
  • view组件属性
  • css美化表单 案例
  • javascript面向对象编程 PDF
  • java stringapi
  • jquery如何加背景图片
  • jquery input
  • javascript基础入门视频教程
  • Android alertDialog 动态添加edittext无法弹出键盘解决方案
  • 结转城市维护建设税
  • 税控盘解除风险
  • 已申报的纳税申报表怎么下载打印
  • 增值税减免税备案
  • 宿迁市国家税务局徐友谅
  • ca认证登录不了
  • 第二税务所干什么的
  • 财税知识
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设