位置: IT常识 - 正文

Echarts图表中formatter的用法(echarts series name)

编辑:rootadmin
Echarts图表中formatter的用法

推荐整理分享Echarts图表中formatter的用法(echarts series name),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:echarts force,echarts showsymbol,echarts tooltip formatter,echarts tooltip formatter,echarts force,echarts的formatter,echarts的formatter,echarts图表中的螺旋圆环,内容如对您有帮助,希望把文章链接给更多的朋友!

1. 字符串模板

1.1 x轴y轴

//适应字符串模板,模板变量为刻度默认标签{value}

formatter:"{valur} %"

1.2 饼图

(1){a}:系列名,series.name。

(2){b}:数据名,series.data.name。

(3){c}:数据值,series.data.value。

(4){d}:百分比。

(5){@xxx}:数据中名为'xxx'的维度的值,如{@product}表示名为'product'` 的维度的值。

(6){@[n]}:数据中维度n的值,如{@[3]}` 表示维度 3 的值,从 0 开始计数。 示例

formatter:"{b}:{c}({d}%)"//数据名 数据值 百分比

 1.3折线图,柱状图

(1){a}:系列名,series.name。

(2){b}:数据名,xAxis.data。

(3){c}:数据值,yAxis.data。

(5){@xxx}:数据中名为'xxx'的维度的值,如{@product}表示名为'product'` 的维度的值。

(6){@[n]}:数据中维度n的值,如{@[3]}` 表示维度 3 的值,从 0 开始计数。 示例

formatter:"{a}<br/>{b}{c}"//系列名 数据名 数值值

1.4多个属性

formatter:"{b0}:{c0}<br/>{b1}:{c1}"

2 函数模板

2.1 x轴,y轴

示例

Echarts图表中formatter的用法(echarts series name)

// 使用函数模板,函数参数分别为刻度数值(类目),刻度的索引

formatter:function (value, index) {

return value;

}

2.2提示框(tooptip)

第二个参数 ticket 是异步回调标识,配合第三个参数 callback 使用。 第三个参数 callback 是异步回调,在提示框浮层内容是异步获取的时候,可以通过 callback 传入上述的 ticket 和 html 更新提示框浮层内容。

formatter: function (params, ticket, callback) { $.get('detail?name=' + params.name, function (content) { callback(ticket, toHTML(content)); }); return 'Loading';}

 3 回调函数

语法:(params:Object | Array)=>string

参数 params:

{ componentType: 'series', // 系列类型 seriesType: string, // 系列在传入的 option.series 中的 index seriesIndex: number, // 系列名称 seriesName: string,//series.name // 数据名,类目名 name: string, // 数据在传入的 data 数组中的 index dataIndex: number, // 传入的原始数据项 data: Object, // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量(如 map、radar 中) value: number|Array|Object,//series.data // 坐标轴 encode 映射信息, // key 为坐标轴(如 'x' 'y' 'radius' 'angle' 等) // value 必然为数组,不会为 null/undefied,表示 dimension index 。 // 其内容如: // { // x: [2] // dimension index 为 2 的数据映射到 x 轴 // y: [0] // dimension index 为 0 的数据映射到 y 轴 // } encode: Object, // 维度名列表 dimensionNames: Array<String>, // 数据的维度 index,如 0 或 1 或 2 ... // 仅在雷达图中使用。 dimensionIndex: number, // 数据图形的颜色 color: string, // 百分比 percent: number,}

模板变量有 {a}, {b},{c},{d},{e},分别表示系列名,数据名,数据值等。 在 trigger 为'axis' 的时候,会有多个系列的数据,此时可以通过{a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的{a},{b},{c},{d}含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为:

u 折线(区域)图、柱状(条形)图、K线图: {a}(系列名称),{b}(类目值),{c}(数值), {d}(无)

u 散点图(气泡)图 : {a}(系列名称),{b}(数据名称),{c}(数值数组), {d}(无)

u 地图 : {a}(系列名称),{b}(区域名称),{c}(合并数值), {d}(无)

u 饼图、仪表盘、漏斗图: {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)

2. 回调函数

回调函数格式:(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string

ECharts图表组件内的格式化常用的地方:

1. tooltip

图表内数据点的悬浮框提示框信息展现的时候我们可以加以数据格式化,以便于更好地观察数据和分析数据。

比如:在数值后加一个单位字符串

  tooltip: {            trigger:'item',            padding:[20,10,20,10],            formatter:'{a} </br>{b}:{c}%'        },

2. axisLabel

坐标轴刻度上面的刻度格式化,比如Y表示长度,我们往往需要在每一个刻度值后面带上“m”的单位,Y轴意义不同,加不同的单位。

格式化Y轴刻度的示例代码如下:

 yAxis: [            {                type: 'value',                axisLabel: {                    show:true,                    formatter:'{value} m'                },                boundaryGap: ['0','20%']            }        ],

3. series内的label

 series: [            {                name:'常驻城市人数比例',                type:'bar',                barWidth:'45',               data:[10,15,20,25,30],//                data:citiesRate,                itemStyle: {                    normal: {                        color:new echarts.graphic.LinearGradient(                            0,0,0,1,                            [                                {offset:0,color:'#7EDBFD'},                                {offset:1,color:'#3169c7'}                            ]                        ),                        label: {                            show:true,                            position:'top',                            formatter:'{c}%'                        }                    },                    emphasis: {                        barBorderWidth:1,                        shadowBlur:10,                        shadowOffsetX:0,                        shadowOffsetY:0,                        shadowColor:'rgba(0,0,0,0.7)'                    }                }            }        ]

注意点:formatter格式化不但可以用echarts提供的模板,还可使用function。例如:

label:{   normal:{      formatter:function(v){         vartext=v.name;         returntext.length>10?text.substr(0,10)+"...":text;      }   }}

参考文章   ECharts formatter属性设置3种方式(字符串模板,函数模板,回调函数)1字符串模板1.1 饼图模板变量:(1){a}:系列名,series.name。(2){b}:数据名,series.data.name。(3){c}:数据值,series.data.value。(4){d}:百分比。(5){@xxx}:数据中名为'xxx'的维度的值,如{@product}表示名为'product'` 的维度的值。(6){@[n]}:数据中维度n的值,如{@[3]}` 表示维度 3 的值,从 0 开始计数。示例:formatter:"{b}:{c}.https://blog.csdn.net/qq_38974638/article/details/108986033?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166796273716782425651287%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=166796273716782425651287&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-108986033-null-null.142^v63^control,201^v3^add_ask,213^v2^t3_esquery_v1&utm_term=echarts%E4%B8%ADformatter%E5%B1%9E%E6%80%A7&spm=1018.2226.3001.4187

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

上一篇:实战:向人工智能看齐用Docker部署一个ChatGPT(人工智能科技向善)

下一篇:猿创征文 | re:Invent 朝圣之路:“云“行业风向标(猿创征文,新芯设计)

  • 苹果13promax怎么调出悬浮球(苹果13promax怎么看是不是翻新机)

    苹果13promax怎么调出悬浮球(苹果13promax怎么看是不是翻新机)

  • 淘宝积分在哪里看(淘宝积分在哪里看到且兑换)

    淘宝积分在哪里看(淘宝积分在哪里看到且兑换)

  • 华为p40pro能支持屏幕指纹解锁吗(华为p40pro可以)

    华为p40pro能支持屏幕指纹解锁吗(华为p40pro可以)

  • 小米手机怎么控制小米电视(小米手机怎么控制另一台手机)

    小米手机怎么控制小米电视(小米手机怎么控制另一台手机)

  • 海思麒麟和麒麟的区别(海思麒麟和麒麟处理器一样吗)

    海思麒麟和麒麟的区别(海思麒麟和麒麟处理器一样吗)

  • 不属于防火墙的常见功能的是(不属于防火墙的分类)

    不属于防火墙的常见功能的是(不属于防火墙的分类)

  • 苹果充电接口检测到液体(苹果充电接口检测到有液体用吹风机)

    苹果充电接口检测到液体(苹果充电接口检测到有液体用吹风机)

  • 微信号可以不绑定手机吗(一个微信号可以登录两个微信吗)

    微信号可以不绑定手机吗(一个微信号可以登录两个微信吗)

  • 电脑bios是啥意思(电脑bios有什么用处)

    电脑bios是啥意思(电脑bios有什么用处)

  • 荣耀v30有指纹解锁吗(荣耀v30指纹解锁在哪里设置)

    荣耀v30有指纹解锁吗(荣耀v30指纹解锁在哪里设置)

  • 为什么微信领不了红包账号异常(为什么微信领不了红包封面)

    为什么微信领不了红包账号异常(为什么微信领不了红包封面)

  • 为什么手机相册照片删不了(为什么手机相册会出现空白照片)

    为什么手机相册照片删不了(为什么手机相册会出现空白照片)

  • qq怎么设置充电中(扣扣手机充电中怎么设置)

    qq怎么设置充电中(扣扣手机充电中怎么设置)

  • 计算机网络中wan中文名(计算机网络中网关的主要作用是)

    计算机网络中wan中文名(计算机网络中网关的主要作用是)

  • 设备上sn是什么意思啊(设备sn号是什么)

    设备上sn是什么意思啊(设备sn号是什么)

  • 网线有哪些类型(网线常用的网线分类)

    网线有哪些类型(网线常用的网线分类)

  • 小米9看视频不能全屏(小米看视频不能横过来全屏)

    小米9看视频不能全屏(小米看视频不能横过来全屏)

  • 百度小程序如何打开(百度小程序如何退出登录)

    百度小程序如何打开(百度小程序如何退出登录)

  • 苹果电脑字体文件夹位置(苹果电脑字体文件怎么拖出来)

    苹果电脑字体文件夹位置(苹果电脑字体文件怎么拖出来)

  • Navicat for MySQL 15 v15.0.27 中文企业正式版(附安装教程) 32/64位 破解版

    Navicat for MySQL 15 v15.0.27 中文企业正式版(附安装教程) 32/64位 破解版

  • 电脑学习网教大家2022年最新WordPress官方微信支付接口设置傻瓜设置教程-OK源码教学(网上学电脑哪个软件好)

    电脑学习网教大家2022年最新WordPress官方微信支付接口设置傻瓜设置教程-OK源码教学(网上学电脑哪个软件好)

  • 私营独资企业交个税还是企税
  • 代销和委托代销区别
  • 清退加班费
  • 一般纳税人的进项税额计入成本吗
  • 政府单位临聘人员辞退
  • 全年一次性奖金税收计算器
  • 公司代扣代缴的个人所得税怎么做账
  • 不交增值税当月还需要计提税金吗?
  • 税费种认定功能在哪里
  • 增值税发票当期能抵扣吗
  • 免税更正申报
  • 交税四舍五入差额怎么处理
  • 社保申报怎么查询
  • 待抵扣进项税额转出会计分录
  • 固定资产的折旧从什么时候开始
  • windows打开文件
  • 如何修复在感情中受的伤害
  • 如何关闭windows10安全中心服务
  • 其他综合收益包括留存收益吗
  • 去年的发票忘记报销了 今年可以报销吗
  • 应交消费税的会计分录
  • php数组函数大全
  • 发票盖章有讲究吗
  • php中implode
  • lumenrt
  • 特定纳税人是什么意思
  • es5和es6的区别
  • 一维频率分布表
  • vue3.0 vite
  • 为什么会有不同的人种
  • 同业代付的好处
  • python的pillow库如何安装
  • 建筑企业异地预缴增值税销售额含税吗
  • 人力资源外包服务企业
  • 其他综合收益在利润表的哪个位置哪里
  • 普票与专票的区别在哪?它各自的特点?
  • 企业没有研发费用怎么做账
  • discuz发帖标签
  • 汽车折旧年限是几年内的
  • 不借助的英文
  • php变量名称中可以包含哪些元素
  • 主营业务收入和销售费用的区别
  • 异地工程税
  • 消费税算不算运费
  • 本年度企业所得税怎么算
  • sqlserver复制需要有实际的服务器名称
  • 其他综合收益转入盈余公积和未分配利润
  • 有形动产租赁服务属于现代服务吗
  • 权益法核算还计提减值么
  • 差旅费科目设置
  • 个体工商户税收新政策
  • 项目上工人死亡赔偿
  • 研发费用加计扣除的条件
  • 预支差旅费怎么记账
  • 防伪税控服务费怎么交
  • 企业发生的开办费用计入营业外支出账户
  • 现金日记账怎么记账
  • 一般纳税人增值税申报操作流程
  • 典当行收房产证吗直接可以拿钱吗
  • 员工用自己的钱买的材料如何做账
  • windosxp无法启动
  • Windows XP with SP2/SP3 原版下载汇总
  • windowsxp我的电脑怎么调出来
  • win7复制文件到system32没有权限
  • centos6.8修改主机名
  • centos soft lockup
  • [置顶] [寒江孤叶丶的Cocos2d-x之旅_27]CocoStudio导出的LUA文件怎么使用?
  • 如何搭建react项目
  • jquery 插件写法
  • 我吐槽你
  • dos命令中运行文件的命令
  • unity安卓游戏开发
  • jquery中的siblings方法
  • shc加密后不能运行
  • javascript 编译原理
  • unity3d接入抖音广告api
  • 如何做好协税工作
  • 北京国家税务局总局官网
  • 外经证开错了怎么办
  • 怎么申请企业信用修复
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设