位置: 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 朝圣之路:“云“行业风向标(猿创征文,新芯设计)

  • 如何降低APP卸载率?这里有七个方法(如何降低app卸载时间)

    如何降低APP卸载率?这里有七个方法(如何降低app卸载时间)

  • vue prop属性(vue prop属性和model)

    vue prop属性(vue prop属性和model)

  • 星标好友发朋友圈会提醒吗(星标好友发朋友圈头像会有红点)

    星标好友发朋友圈会提醒吗(星标好友发朋友圈头像会有红点)

  • 打印图片为什么会少一部分(打印图片为什么让保存文档)

    打印图片为什么会少一部分(打印图片为什么让保存文档)

  • 苹果手机看趣头条为什么没有任务(苹果手机看趣头条怎么看)

    苹果手机看趣头条为什么没有任务(苹果手机看趣头条怎么看)

  • 微信返回键失灵(微信返回键失灵怎么恢复)

    微信返回键失灵(微信返回键失灵怎么恢复)

  • 视频动态怎么保存到手机(视频动态怎么保存)

    视频动态怎么保存到手机(视频动态怎么保存)

  • 8*8相册尺寸是多少厘米(8*8相片多大)

    8*8相册尺寸是多少厘米(8*8相片多大)

  • qq发消息怎么把图片和文字放在一起(qq发消息怎么把图片一起发出去)

    qq发消息怎么把图片和文字放在一起(qq发消息怎么把图片一起发出去)

  • 应用程序扩展能删除吗(应用程序扩展能增加吗)

    应用程序扩展能删除吗(应用程序扩展能增加吗)

  • 微信有一条未读消息却找不到(微信有一条未读信息为什么找不到)

    微信有一条未读消息却找不到(微信有一条未读信息为什么找不到)

  • 抖音矩阵是什么意思(抖音矩阵是什么意思简单说)

    抖音矩阵是什么意思(抖音矩阵是什么意思简单说)

  • 华为桌面翻页设置方法(华为桌面翻页设置怎么弄)

    华为桌面翻页设置方法(华为桌面翻页设置怎么弄)

  • 华为畅享9有没有nfc(华为畅享9有没有投屏功能在哪里呢)

    华为畅享9有没有nfc(华为畅享9有没有投屏功能在哪里呢)

  • 安卓微信聊天文件怎么恢复(安卓微信聊天文件目录)

    安卓微信聊天文件怎么恢复(安卓微信聊天文件目录)

  • vivox9电池怎么更换(vivox9电池怎么换)

    vivox9电池怎么更换(vivox9电池怎么换)

  • word文本占位符在哪(word文本占位符怎么设置)

    word文本占位符在哪(word文本占位符怎么设置)

  • 苹果11pro多大(苹果11Pro多大运存)

    苹果11pro多大(苹果11Pro多大运存)

  • wps导航窗口如何设置(wps怎么把导航打开)

    wps导航窗口如何设置(wps怎么把导航打开)

  • word英文单词间距不正常(word英文单词间距突然变大)

    word英文单词间距不正常(word英文单词间距突然变大)

  • 快捷指令抖音去水印(快捷指令抖音去水印2022)

    快捷指令抖音去水印(快捷指令抖音去水印2022)

  • 微信号绑定的手机号不用了怎么办(微信号绑定的手机号解绑了,微信还能登录吗)

    微信号绑定的手机号不用了怎么办(微信号绑定的手机号解绑了,微信还能登录吗)

  • 原生JS实现飞机大战游戏 超详细解析 快来做一个自己玩吧(原生js实现promise)

    原生JS实现飞机大战游戏 超详细解析 快来做一个自己玩吧(原生js实现promise)

  • 【ChatGPT】ChatGPT 能否取代程序员?(chatb)

    【ChatGPT】ChatGPT 能否取代程序员?(chatb)

  • 「部署全流程」 中科院学术专业版chatGPT来啦(部署fabric)

    「部署全流程」 中科院学术专业版chatGPT来啦(部署fabric)

  • 帝国模板变量更新后页面不更新怎么办(帝国cms模型)

    帝国模板变量更新后页面不更新怎么办(帝国cms模型)

  • 税务机关帮我预填了申报数据,我是不是就不用申报了?
  • 银行手续费回单可以作为入账依据吗
  • 材料报废是否可以税前扣除
  • 房产税从价改从租,多缴税款要加收滞纳金吗
  • 税金及附加怎么记忆
  • 出口报关单上面的运费怎么填
  • 利润表中的所得税费用怎么填
  • 出货一般要多久
  • 企业购买雇主责任险会计分录
  • 预期信用损失影响坏账准备吗
  • 企业构建固定资产支付的现金应列示在现金流量表
  • 银行回单附言写错业务
  • 个人转让住宅要交哪些税
  • 公对公转账银行拒绝是什么意思
  • 携程电子发票可以发到QQ邮箱吗
  • 利息股息红利所得个人所得税怎么算
  • 收取的职工房租如何入账
  • 文化建设事业费按季度申报吗
  • 纳税申报方式怎么修改
  • 专门从事股权投资的合伙企业投资收益 个人所得税
  • 财产保险费计入什么科目
  • 企业的养老金根据什么扣除
  • 个体户定期定额申报表怎么填
  • 流动资金借款是一般借款还是专门借款
  • 总分类账是什么的依据
  • 银行对账单怎么修改
  • 如何选购餐桌椅
  • PHP:mcrypt_cfb()的用法_Mcrypt函数
  • 消防工程改造方案
  • laravel insert ignore
  • 向银行借入长期借款200000元,存入银行
  • php判断是否为字母
  • 已提足折旧固定资产改建支出 所得税怎么计算
  • 深度测试软件
  • js怎么注册
  • high-resolution image synthesis with latent diffusion models
  • 发票融资会计处理
  • 爬虫失败的原因
  • 借款利息收入开票
  • phpcms邀请注册送积分
  • 企业一般账户开户申请理由
  • 出纳记账凭证怎么写
  • 织梦添加文章如何修改高级参数
  • 个人发票抬头和公司发票抬头有什么区别
  • 建筑劳务公司需要什么资质
  • 兼职人员工资需要交个税吗
  • 机械租赁开票内容
  • 新手任务税控设备申请
  • 增值税附加税包括哪些税种及税率
  • 收到预付卡的发票是否可以报销呢?
  • 差额事业单位的工资是由财政开支吗
  • 长期股权投资稀释股权
  • 培训学校预收学费可退吗
  • 应收帐款收不回来怎么做会计分录
  • 企业主要的工会是什么
  • 品种法案例分析
  • 增值税税控系统专用设备费及技术维护费抵扣
  • 非营利医疗机构免征哪几种税
  • 工业企业增值税负率一般控制在多少
  • win8系统怎么设置无线网连接啊
  • w10的产品密钥
  • ubuntu zed
  • 如何关闭电脑端口
  • linux添加新硬盘后网卡无法启动
  • mac safari浏览器网页不能正常显示
  • centos 开机启动
  • windows多屏显示
  • win7 64位系统使用360安全浏览器在网页中播放视频出现花屏的解决方法
  • win7屏幕调节不见了
  • win8安装ie11
  • alt用不了
  • perl读取文件内容到数组
  • 详细说明什么是支撑
  • 超级硬盘数据恢复软件v2.7
  • linux中crontab
  • 命令最常用的类型有
  • jquery创建表单
  • python多线程异常后所有线程均不往下执行
  • 法人没有实名认证,现在要变更,还需要实名认证吗
  • 浙江省焊工操作证查询
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设