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

  • 互联网时代中小企业怎样做好网络营销(处在互联网时代,中小)

    互联网时代中小企业怎样做好网络营销(处在互联网时代,中小)

  • 华为荣耀10的屏幕多大(华为荣耀10的屏幕刷新率是多少?)

    华为荣耀10的屏幕多大(华为荣耀10的屏幕刷新率是多少?)

  • p30pro夜景模式怎样调(华为p30pro夜景拍照参数设置)

    p30pro夜景模式怎样调(华为p30pro夜景拍照参数设置)

  • 电脑新装硬盘需要做什么操作(电脑新装硬盘需要格式化吗)

    电脑新装硬盘需要做什么操作(电脑新装硬盘需要格式化吗)

  • 耳机有回声该怎样处理(耳机有回声该怎么处理)

    耳机有回声该怎样处理(耳机有回声该怎么处理)

  • 乐视x620是什么型号(乐视x622)

    乐视x620是什么型号(乐视x622)

  • 微信收款音箱s1和s2和s3区别(微信收款音箱s1怎么拆开)

    微信收款音箱s1和s2和s3区别(微信收款音箱s1怎么拆开)

  • 微信群投票能看到是谁投的吗(微信群投票能看见谁投了什么票吗)

    微信群投票能看到是谁投的吗(微信群投票能看见谁投了什么票吗)

  • 电源有问题会出现什么情况(电源有问题会出现什么现象)

    电源有问题会出现什么情况(电源有问题会出现什么现象)

  • 荣耀20和荣耀20ro区别(荣耀20和荣耀20青春版手机壳一样吗)

    荣耀20和荣耀20ro区别(荣耀20和荣耀20青春版手机壳一样吗)

  • 符号化的机器语言是什么(机器语言符号化后的程序语言)

    符号化的机器语言是什么(机器语言符号化后的程序语言)

  • 电脑非常卡怎么处理(电脑非常卡怎么回事)

    电脑非常卡怎么处理(电脑非常卡怎么回事)

  • 淘宝hd什么意思(淘宝 淘宝hd)

    淘宝hd什么意思(淘宝 淘宝hd)

  • qq阅读下载的书在哪个文件夹(qq阅读下载的书怎么导出)

    qq阅读下载的书在哪个文件夹(qq阅读下载的书怎么导出)

  • ps像素低如何变清晰(ps怎么调)

    ps像素低如何变清晰(ps怎么调)

  • 京东客服消息怎么撤回(京东客服消息怎么复制)

    京东客服消息怎么撤回(京东客服消息怎么复制)

  • 抖音能看到最近访客吗(抖音能看到最近访问过主页的人吗)

    抖音能看到最近访客吗(抖音能看到最近访问过主页的人吗)

  • 怎样设置华为相册密码(华为手机怎么设置相册模式)

    怎样设置华为相册密码(华为手机怎么设置相册模式)

  • 奔腾至强处理器与高能奔腾处理器比较(至强奔腾酷睿赛扬)

    奔腾至强处理器与高能奔腾处理器比较(至强奔腾酷睿赛扬)

  • 小米9操作系统是那种(小米操作系统与鸿蒙系统比较)

    小米9操作系统是那种(小米操作系统与鸿蒙系统比较)

  • iphone桌面添加小程序(iphone桌面如何添加小组件)

    iphone桌面添加小程序(iphone桌面如何添加小组件)

  • Win10怎么在防火墙里开放端口?(win10怎么防火墙白名单)

    Win10怎么在防火墙里开放端口?(win10怎么防火墙白名单)

  • Linux中进程管理工具htop的安装与其命令使用教程(linux进程操作命令)

    Linux中进程管理工具htop的安装与其命令使用教程(linux进程操作命令)

  • springboot和vue实现前后端分离基础教程(springboot和vue结合)

    springboot和vue实现前后端分离基础教程(springboot和vue结合)

  • 国家税务总局操作指引
  • 小规模纳税人应交增值税明细科目
  • 公益性捐赠税前扣除资格有效期
  • 运输公司的车辆保险费计入什么科目
  • 商贸公司成本大吗
  • 工资出现负数怎么申报个税
  • 原始发票丢失怎么报销
  • 其它应付款是否可以直接冲收入呢?
  • 上个月未抵扣忘记做进项会计分录
  • 产品成本的计算公式
  • 违约金收入计入应纳税所得额吗
  • 房屋租赁税费征收的时间是多久
  • 税务局的网站以后有这些变化是你不知道的!
  • 生产企业销售原材料所取得的收入属于( )
  • 通用机打发票属于什么发票
  • 合并往来分录
  • 汽车运输增值税专用发票多少税点
  • 视同销售收入如何调整?
  • 新手会计怎么入门做账
  • 怎样打开电脑wifi连接
  • 戴尔笔记本电脑哪款性价比最高
  • 外贸收汇怎么处理
  • php匹配邮箱
  • 详解php语言最牛的语言
  • 合同结算账务处理分录
  • 小微企业一般纳税人
  • php数组函数实现机选双色球
  • rteng7.exe - rteng7是什么进程 有什么用
  • pytorch :OSError: [WinError 1455] 页面文件太小,无法完成操作。 Error loading 【已解决】
  • uniapp 打开小程序
  • 水利建设基金计税依据
  • php 统计
  • vue路由传参的几种方式
  • vue.$el
  • lxml&xpath一站式教学
  • 应收及预付款项的思维导图
  • 公司没有车加油费怎么报
  • 本月的费用
  • 支付给临时工的费用
  • 小企业会计准则2023电子版
  • 水电费没有发票吗
  • 本期无销项税额,勾选抵扣的进项税填在哪里
  • 交强险和车船税在哪里买
  • 借款怎么入会计分录
  • 差旅费属于什么会计科目 会计分录
  • 固定资产计提完折旧残值怎么处理
  • 加计抵扣会计处理
  • 退休职工取暖费发放标准2023年
  • 无形资产内部研究开发支出的处理
  • 每个月结转损益会计分录
  • 期末自动结转期间损益
  • 成本会计核算方法论文怎么写
  • mysql5.5解压版安装教程
  • win7怎么创建新用户
  • 安装windows server 2008 r2
  • xp简单实用的网络连接
  • winfs.exe - winfs是什么进程
  • win80x0000007b修复
  • windows 10 build 9834
  • windows xp无法访问samba共享夹
  • 外国电影怎么看双语的
  • 微信小程序获取手机号失败
  • jquery邮箱正则表达式
  • Android LayoutInflater原理分析,带你一步步深入了解View(一)
  • android图片布局
  • linux复制文件命令mv
  • 象棋软件编程
  • html常用字符
  • angularjs2
  • javascript运用
  • 用python怎么写字
  • node.js实战
  • 如何用node搭建服务器
  • ecmascript新特性
  • javascript的主要内容
  • javascript 对象
  • python中元祖的用法
  • 河北省国家税务局电子税务局官网入口
  • 入职培训结束寄语
  • 河南旧县为什么叫新县
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设