精华内容
下载资源
问答
  • echarts formatter用法
    2022-08-04 11:44:27

    表示的含义如下: 

    折线(区域)图、柱状(条形)图: a(系列名称),b(类目值),c(数值), d(无) 
     
    散点图(气泡)图 : a(系列名称),b(数据名称),c(数值数组), d(无) 
     
    饼图、雷达图 : a(系列名称),b(数据项名称),c(数值), d(百分比) 
     
    弦图 : a(系列名称),b(项1名称),c(项1-项2值),d(项2名称), e(项2-项1值)

    使用的方法:

    除了,使用这几个固定的formatter字母外,我们还可以使用自定的值

    						// formatter,自定义展示的内容,其中p,q为自己定义的值,item.p为p的值,    \n 表示换行的意思
    						formatter: '{b|{b}}\n{p|P:' + item.p + 'KW}\n{q|Q:' + item.q + 'KW}',
    						backgroundColor: { // label的背景
    							image:bgcolor,
    						},
    						borderColor: '#aaa',
    						borderWidth: 1,
    						borderRadius: 4,
    						rich: {  // rich可以设置p q b 的样式,即 | 左侧定义的内容
    							p: { // 自定义的p的样式
    								color: '#3c3c3c',
    								lineHeight: 22,
    								align: 'center'
    							},
    							q:{ // 自定义的q的样式
    								color: '#3c3c3c',
    								lineHeight: 22,
    								align: 'center'
    							},
    							b: { // b的样式
    								color: '#000',
    								fontSize: 14,
    								lineHeight: 20
    							},
    						}

    更多相关内容
  • echartsformatter用法

    千次阅读 2020-12-22 17:48:22
    前言:formatter格式化方法使用formatter调用自定义的数据,把内容通过处理让变成我们想要的样子...先看看echarts的文档:tooltip:提示框组件的设置(显示动态数据的半透明框)formatter用法:tooltip : {format...

    前言:formatter格式化方法。使用formatter调用自定义的数据,把内容通过处理让变成我们想要的样子。

    比如,echarts数据显示是这样的(bug:部分内容被隐藏掉了,显示太长,不美观)

    这种情况,只能自己去写显示的样式了。显示的样式怎么写呢?

    先看看echarts的文档:tooltip:提示框组件的设置(显示动态数据的半透明框)

    formatter 的用法:

    tooltip : {

    formatter: function (params) {

    // do some thing

    return “名称:” +params.name

    }

    }

    params 数据如下:(不知道params是什么的,打多几个断点,打印下数据就知道了)

    我的代码:

    tooltip: {

    formatter: function(a) {

    let list = []

    let listItem = ''

    for (var i = 0; i < a.length; i++) {

    list.push(

    '' +

    a[i].seriesName +

    '&nbsp&nbsp功效:' +

    a[i].value[0] +

    '&nbsp&nbsp专利数量:' +

    a[i].value[1] +

    '&nbsp&nbsp数量:' +

    a[i].value[2]

    )

    }

    listItem = list.join('
    ')

    return '

    ' + listItem + '
    '

    }

    }

    效果如下:

    下一篇:X轴斜体显示

    展开全文
  • Echartsformatter函数用法

    千次阅读 2021-07-08 14:13:46
    tooltip是提示框组件 formatter是提示框内容 下面是错误的代码,在对右上角4个按钮进行切换时,会报错,因为formatter内返回的参数点击之后,数据会减少。 tooltip: { // 悬停样式 trigger: "axis", padding: ...

    tooltip是提示框组件 formatter是提示框内容

    下面是错误的代码,在对右上角4个按钮进行切换时,会报错,因为formatter内返回的参数点击之后,数据会减少。
    在这里插入图片描述

     tooltip: {
              // 悬停样式
              trigger: "axis",
              padding: [10, 22],
              backgroundColor: "rgba(66, 119, 108, 0.8)", //0.8
              borderColor: "rgba(66, 119, 108, 0.8)",
              textStyle: {
                color: "#fff",
              },
              formatter: (val) => {
              return `
          		 <div>${val[0] ? val[0].name : "-"}</div>
         		 <div>xx告警 :${val[0] ? val[0].value : "-"}</div>
     			 <div>心率告警 :${val[1] ? val[1].value : "-"}</div>
          		 <div>xxx告警 :${val[2] ? val[2].value : "-"}</div>
             	 <div>体温告警 :${val[3] ? val[3].value : "-"}</div>`
              ;
              },
            },
    

    所以将代码改良了下,便利val这个list,进行判断,在加上去最后return出去。

       tooltip: {
              formatter: (val) => {
                var res = `<div>${val[0] ? val[0].name : "-"}</div>`;
                val.forEach((item) => {
                  if (item.seriesName == "SOS告警") {
                    res += `<div>SOS告警 :${item.value ? item.value : "-"}</div>`;
                  } else if (item.seriesName == "心率告警") {
                    res += `<div>心率告警 :${item.value ? item.value : "-"}</div>`;
                  } else if (item.seriesName == "血氧告警") {
                    res += `<div>血氧告警 :${item.value ? item.value : "-"}</div>`;
                  } else if (item.seriesName == "体温告警") {
                    res += `<div>体温告警 :${item.value ? item.value : "-"}</div>`;
                  }
                });
                return res;
              },
            },
    
    展开全文
  • Echarts图表之formatter用法

    千次阅读 2019-11-08 17:22:32
    一:formatter格式化参数模板 1. 字符串模板 1.1. 模板变量有 {a}, {b},{c},{d},{e},分别表示系列名,数据名,数据值等。 1.2. 在 trigger 为’axis’ 的时候,会有多个系列的数据,此时可以通过{a0}, {a1}, {a2...

    转载链接:https://blog.csdn.net/qq_39442804/article/details/78202256

    一:formatter格式化参数模板

    1. 字符串模板

    1.1. 模板变量有 {a}, {b},{c},{d},{e},分别表示系列名,数据名,数据值等。
    1.2. 在 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;
          }
       }
    }
    

    如果不太了解formatter方法内的参数,可以在function内设置debugger加入断点调试浏览数据结构。

    展开全文
  • 原因:在update方法得到的option中的formatter函数不存在 手动添加之前: 手动添加之后: 解决:需要手动在setOption之前添加需要自定义的formatter,以下是完整代码 <template> <view&...
  • 其中变量a、b、c在不同图表类型下代表数据含义为: 折线(区域)图、柱状(条形)图: a(系列名称),b(类目值),c(数值), d(无) 散点图(气泡)图 : a(系列名称),b(数据名称),c(数值数组), d(无) ...
  • 1、formatter两种使用形式 可以通过函数和字符串模板来自定义formatter ①通过函数动态创建节点 通过循环param的长度,不写死节点,这样有一个好处就是当点击了某一个legend取消了数据的展示的时候,tooltip提示...
  • 问题:期望显示成 均值线:(回车)数据 的形式 解决办法: formatter: function(params) { var res = '均值线:\n' + params.value return res } 使用’\n’实现换行 感谢收阅 ...
  • echartsformatter 中添加点击事件

    千次阅读 2019-10-17 11:28:07
    echartsformatter中添加点击事件的具体实现方法 formatter代码如下: 如果是vue项目,Test事件直接可以写在methods中, 注意:使用字符串拼接,如果使用模板字符串会出现很多问题 交流 可添加qq群共同...
  • echarts图表formatter函数的使用

    千次阅读 2020-03-25 13:09:52
    formatter 提示框浮层内容格式器,支持字符串模板和回调函数两种形式。 可以通过formatter 函数 可以动态的修改 我们想要展示的数据 第一种: 字符串模板 – 官网 字符串模板 模板变量有 {a}, {b},{c},{d},{e}...
  • 分析解决问题:开启Hermes后,带有formatter函数的echarts无法正常渲染。
  • 关于echarts-formatter 数据格式化小结

    万次阅读 2018-03-16 10:50:08
    一、tooltip中的数据格式(数据点的悬浮框)tooltip : { trigger: 'axis', ...},formatter格式化方法的参数说明:(下面一段话引用自https://www.cnblogs.com/ys-wuhan/p/6149265.html){string},模板...
  • 作者 |xrkffgg来源 | ...本人之前从未接触过Echarts,然后需要2周拿出成果,有点慌1.2 业务分析拿到需求看了一下支持用户名、密码登录,默认显示一个维度数据,然后点击可钻取进入第二维度数据,...
  • echartsformatter中访问外部变量

    千次阅读 2021-01-08 16:42:51
    echartsformatter中访问外部变量 echartsformatter中访问外部变量或者访问接口返回的数据,话不多说,直接上图: 第一步: 第二步: 就可以在formatter中直接使用
  • Echarts中tooltip的 formatter用法

    千次阅读 2019-12-19 15:43:52
    tooltip: { trigger: 'item', //formatter: '{b}市 <br/>跨境网络零售:{c}亿元', show: true, formatter: function (params) { ...
  • echarts legend 使用formatter和rich自定义样式 需要实现的效果: 代码: // 需要加标签的label名称 const labelMark = '产品名称2' ... legend: { itemGap: 20, formatter (label) { // markLabel为是否打标签...
  • echarts 自定义样式 formatter

    万次阅读 2019-09-23 15:17:10
    echart 提供了 很多样式 比如lineStyle 这种...formatter 该属性可以接收一个字符串或者一个方法 用来自定义返回的样式 formatter: function (params) { return ' ' } // ES6写法 为了使用全局变量this formatter:...
  • echartsformatter配合rich使用

    千次阅读 2021-08-17 17:14:25
    formatter:[ '{名称|...}', '...', ... ].join('\n'), rich:{ 名称:{ 对该名称|后的文本进行添加样式,且可以看成inline-block lineHeight: 10 width:10, align:'left|center|right', ...
  • 1.自定义说明文字 lengend legend: { orient: 'vertical', right: "15%", //所处位置 top: "15%", color: ['#42bd7c', '#7fc6fa', '#1d84c7', '#20638e', '#297149', '#1ec6c6'],... formatter: (params) => {
  • 后来井排查发现,是因为循环的时候 使用了JSON.stringify(this.eqpOption)函数,导致 echarts的option里默认itemStyle的方法都为空了 所以要重新赋值一下,即使在 this.eqpOption 里声明了也不会生效,赋值后才会...
  • formatter: function(params, ticket, callback) { let out = ""; findShip(param:params.name).then(res => { let {data} = res; out += `<div>${params.seriesName}</div>` data.forEach(item...
  • 先贴上初始代码 axisLabel: { textStyle: { color: "#999", //坐标轴字颜色 }, formatter: function (params) { console.log(params,"params") return `${params}` + this.xDw;
  • echarts tooltip的formatter自定义样式设置

    万次阅读 多人点赞 2020-07-31 10:00:17
    echarts折线图的时候,hover数据点的样式是默认,但是有的时候显示的样式和自己理想的样式有区别的时候,我们就需要自己更改样式,来满足自己的需求,呢要怎么进行更改呢,官方文档说明可以在tooltip的formatter...
  • mounted钩子中挂载 查看 的方法echarts 官方地址:https://echarts.apache.org/zh/option.html#tooltip.formatte mounted() { let _this = this; window.goto_province = function(name, code
  • 使用Echartsformatter的提示框时候,遇到了关于异步加载的问题,懒得写文字了,我把具体问题和解决方法放在视频里了: 关于Echartsformatter提示框异步加载遇到的一个问题(错误解决记录) ...
  • echarts formatter 回调函数请求后端数据
  • , yAxis: { type: 'value' }, tooltip: { trigger: 'item', formatter:function(params){ let tip = ''; tip += ' 总数' + 23 + ' '+ params.seriesName + '数量' + params.value +'所 ' return tip }, borderColor:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,829
精华内容 1,531
关键字:

echarts formatter用法