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

  • 行政事业单位决算编制流程图
  • 适用5%征收率的范围
  • 发票第一联需要盖章嘛
  • 差旅费住宿专票能否抵扣
  • 一般纳税人月销售额多少免征增值税
  • 金税盘全额抵扣分录
  • 企业年金如何缴费标准
  • 股票交易印花税税率
  • 利息股息红利所得
  • 商业汇票的申请人是谁
  • 有限合伙企业中有限合伙人承担责任的方式为
  • 资产资本化的借款费用如何写分录?
  • 材料存货的期末计量有何特点
  • 金税四期上线对高净值人士的影响
  • 购物卡开预付卡有风险吗
  • 通行费机打发票查询
  • 三证合一后怎么看税号
  • 出让方式取得土地使用权会计处理
  • 产值指的是财务报表哪个数值
  • 小微企业增值税最新优惠政策
  • 没给顾客发票需要罚款吗
  • 企业购买设备可以税前扣除吗
  • 劳务派遣公司支付劳务费怎么做账
  • 收到押金入什么会计科目
  • 退休人员再就业受伤算工伤吗
  • 七彩虹主板 wol
  • 结转本月各项损益
  • 企业开票附加税
  • php字符串函数有哪些
  • 固定资产残料收入的账务处理
  • PHP:Memcached::decrementByKey()的用法_Memcached类
  • 有形动产融资租赁增值税即征即退政策
  • 违约罚款的会计分录
  • 海关滞报金可以税前扣除吗 江苏
  • 水资源税收费标准
  • 国家最高科技奖2018
  • 最新大麦抢票脚本
  • 研发费用税前加计扣除怎么算
  • php返回函数值的关键字
  • 利润的构成要素包括
  • 汇总开具发票
  • 建筑服务需要开外经证吗
  • 资产减值损失影响当期利润吗
  • php session用法
  • nginx怎么运行php
  • 应收账款属于哪个会计要素
  • wordpress怎么添加图片
  • 研发增值税税率怎么算
  • 2个公司的法人怎么注销
  • 企业所得税研发费用如何加计扣除?
  • 什么情况下需要做肠胃镜
  • 增值税专用发票是干什么用的
  • 租赁合同的印花税怎么交
  • 深入浅出夏寒陆行全文免费阅读笔趣阁番外
  • 服装改制注意事项
  • 预计负债的账务处理
  • 供货商做产品配送怎么做
  • 日记账的建账工作
  • mysql 备份方式
  • 苹果发布会最新消息
  • window10系统电脑配置
  • 猎豹如何添加兼容性站点
  • 硬盘安装64位win8.1/win8或win7操作系统图文教程
  • 如何禁止mac adobe acrobat联网
  • win7系统360浏览器自启动怎么关闭
  • linux安装php7.3
  • css spirit
  • css百分比进度条
  • js date类型
  • java语言的解释器是什么
  • jquery虚拟dom
  • 怎么把perl删除干净
  • 着色器模型
  • javascript sort排序
  • nodejs项目搭建
  • 前端自动化开发软件
  • javascript的几种数据类型
  • 提出好的建议
  • 长沙个体户怎么给员工交社保
  • 西藏自治区税务局电子税务局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设