Echarts图表中formatter的用法

Posted 2023-03-31 学习吖

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/>bc"
//系列名 数据名 数值值

1.4多个属性

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

2 函数模板

2.1 x轴,y轴

示例

// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引

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

echarts图表markLine的用法与设置多条不同颜色markLine

一、在series下，新增markLine：
markLine: {

symbol: \'none\',
label:{
    // position:[10, 10],
    color:\'#FF1D00\',
    fontSize:12,
    formatter:"危险(40dB)"
},
lineStyle:{
    type:\'solid\',
    color: \'#FF1D00\',
    width: 1
},
data: [
    {xAxis: \'40\', name:\'危险(40dB)\'},
]

},

二、多条不同颜色markLine
markLine: {

symbol: \'none\',
label:{
    color:\'#FF1D00\',
    fontSize:12,
    formatter:"危险(40dB)"
},
lineStyle:{
    type:\'solid\',
    color: \'#FF1D00\',
    width: 1
},
data: [
{yAxis: \'40\',lineStyle: {color: \'#FF1D00\'},label: {color: \'#FF1D00\',formatter:\'危险(40dB)\',fontSize:10}},
{yAxis: \'25\',lineStyle: {color: \'#FF7804\'},label: {color: \'#FF7804\',formatter:\'异常(25dB)\',fontSize:10}}]

},