精华内容
下载资源
问答
  • 2019-01-18 17:19:32

    tooltip中的数据格式(数据点的悬浮框)
    [javascript] view plain copy
    tooltip : {  
    trigger: 'axis',  
    formatter:function(a,b,c){  
    return a+'<br/>'+b+c;  
    }  
    },  
    formatter格式化方法的参数说明:(下面一段话引用自https://www.cnblogs.com/ys-wuhan/p/6149265.html)

    {string},模板(Template),其变量为:

    {a} | {a0}

    {b} | {b0}

    {c} | {c0}

    {d} | {d0} (部分图表类型无此项)

    多值下则存在多套{a1}, {b1}, {c1}, {d1}, {a2}, {b2}, {c2}, {d2}, ...

    其中变量a、b、c在不同图表类型下代表数据含义为:

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

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

    饼图、雷达图 : a(系列名称),b(数据项名称),c(数值), d(百分比)

    弦图 : a(系列名称),b(项1名称),c(项1-项2值),d(项2名称), e(项2-项1值)

    力导向图 :

    节点 : a(类目名称),b(节点名称),c(节点值)

    边 : a(系列名称),b(源名称-目标名称),c(边权重), d(如果为true的话则数据来源是边)

    {Function},传递参数列表如下:

    <Array> params : 数组内容同模板变量,[[a, b, c, d], [a1, b1, c1, d1], ...]

    <String> ticket : 异步回调标识

    <Function> callback : 异步回调,回调时需要两个参数,第一个为前面提到的ticket,第二个为填充内容html

    二、坐标轴上的数据格式化
    1.Y轴
    [javascript] view plain copy
    yAxis : [{  
    type : 'value',  
    axisLabel : {  
    formatter: function(value){  
    return value+"单位";}  
    }  
    }],  
    2.X轴
    [javascript] view plain copy
    xAxis : [{  
    type : 'category',  
    axisLabel : {  
    formatter: function(value){  
    return value+"单位";}  
    }  
    }],  
    三、series的数据格式化
    [javascript] view plain copy
    series : [{  
      name:'',  
      type:'bar',  
      data:[],  
      itemStyle:{  
        normal:{  
          label:{  
            formatter:function(a,b,c){return c+"%";}  
          }  
        }  
      }  
    }]  
     

    更多相关内容
  • echarts中formatter自定义换行

    千次阅读 2021-03-04 13:24:19
    formatter:function(params) { let newParamsName = ""; //汉字匹配正则 let reg = new RegExp("[\\u4E00-\\u9FFF]+","g"); let paramsNameNumber = params.length; let provideNumber = 2; //一.
     formatter:function(params) {
                    let newParamsName = "";
                    //汉字匹配正则
                    let reg = new RegExp("[\\u4E00-\\u9FFF]+","g");
                    let paramsNameNumber = params.length;
                    let provideNumber = 2;  //一行显示几个字
                    // let rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                    if (paramsNameNumber > provideNumber && _this.requestData.XData.length>=8) {
                      let rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                      //中文
                      if(reg.test(params)){
                        for (let p = 0; p < rowNumber; p++) {
                          let tempStr = "";
                          let start = p * provideNumber;
                          let end = start + provideNumber;
                          if (p == rowNumber - 1) {
                            tempStr = params.substring(start, paramsNameNumber);
                          } else {
                            tempStr = params.substring(start, end) + "\n";
                          }
                          newParamsName += tempStr;
                        }
                      }else{
                        //非中文
                        provideNumber = 4;  //一行显示几个字
                        let rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                        for (let p = 0; p < rowNumber; p++) {
                          let tempStr = "";
                          let start = p * provideNumber;
                          let end = start + provideNumber;
                          if (p == rowNumber - 1) {
                            tempStr = params.substring(start, paramsNameNumber);
                          } else {
                            tempStr = params.substring(start, end) + "\n";
                          }
                          newParamsName += tempStr;
                        }
                      }
    
    
                    } else {
                      newParamsName = params;
                    }
                    return newParamsName
                  }
    
    展开全文
  • 1.在native-echarts中formatter换行 echarts官方文档的series[i]-pie.label.normal.formatter说明这样说道(标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n ...

    1.在native-echarts中formatter换行

    echarts官方文档series[i]-pie.label.normal.formatter说明中这样说道(标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行),但是在某种特定情况下仍然不能换行,这时需要使用\\nn进行换行或者<div/>进行格式化后数据换行

    2.使用\\nn换行后数据不居中

    需要在series下声明avoidLabelOverlap: false,即:
    series: [
        {
             ...
              avoidLabelOverlap: false,
             ...
        }
    ]



    展开全文
  • echarts自定义label,echarts自定义formatterecharts样式自定义呈现效果formatter代码option完整代码 呈现效果 formatter代码 formatter: (params)=> { let str = '<div style="padding: 3px 12px;width: ...

    echarts自定义label,echarts自定义formatter,echarts样式自定义

    呈现效果

    在这里插入图片描述

    formatter代码

    formatter: (params)=> {
                let str = '<div style="padding: 3px 12px;width: 161px;background: #FFFFFF;border: 1px solid #DCDFE6;box-shadow:none; opacity: 1;border-radius: 4px;"><span style="color:#606062;font-size: 12px;">' + params[0].axisValue + "</span><br />";
                params.forEach((item) => {
                  str +=
                    '<span style="color:#f00;font-size: 12px;color: #1D1D20;"><span style="float:left; margin-top:8px; margin-right:5px;border-radius:50%;width:6px;height:6px;background-color:'+item.color+'"></span>' + this.name + "&nbsp;&nbsp;&nbsp;&nbsp;" + item.data + "</span>";
                });
                str += '</div>'
                return str;
              }
    

    option完整代码

    {
            grid: grid,
            tooltip: {
              axisPointer: {
                type: "cross",
                label: {
                  backgroundColor: "#111"
                }
              },
              padding: 0,
              formatter: (params)=> {
                let str = '<div style="padding: 3px 12px;width: 161px;background: #FFFFFF;border: 1px solid #DCDFE6;box-shadow:none; opacity: 1;border-radius: 4px;"><span style="color:#606062;font-size: 12px;">' + params[0].axisValue + "</span><br />";
                params.forEach((item) => {
                  str +=
                    '<span style="color:#f00;font-size: 12px;color: #1D1D20;"><span style="float:left; margin-top:8px; margin-right:5px;border-radius:50%;width:6px;height:6px;background-color:'+item.color+'"></span>' + this.name + "&nbsp;&nbsp;&nbsp;&nbsp;" + item.data + "</span>";
                });
                str += '</div>'
                return str;
              },
              trigger: "axis",
              confine: true
            },
            xAxis: {
              type: "category",
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#f1f1f1"
                }
              },
              axisLabel: {
                interval: interval,
                color: "#222222",
                rotate: 0
              },
              data: xAxisData
            },
            yAxis: {
              type: "value",
              axisLine: {
                show: false,
                lineStyle: {
                  color: "#f1f1f1"
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#f1f1f1"
                }
              },
              axisLabel: {
                color: "#222222"
              }
            },
            series: [
              {
                data: seriesData,
                smooth: true,
                type: "line",
                itemStyle: {
                  color: "#4563F8",
                  borderWidth: 3,
                  borderType: 'solid',
                  borderCap: 'square'
                },
                lineStyle: {
                  color: "#4563F8",
                  width: 3
                }
              }
            ]
          }
    
    展开全文
  • formatter 是一个函数时,这个函数的第一个参数有如下属性,并且由于tooltips是鼠标移动事件(本人猜测),每次移进去都会触发这个函数,我们可以打印出来: 由于我设置的是多折线图所以是一个数组 并且据我...
  • Echarts中数据显示实现formatter

    万次阅读 2018-09-01 14:44:09
    来公司工作了两个月了,大部分时间都是在画图制表,主要使用到Echarts框架来进行数据可视化的展示,在完成需求的过程碰到最多的问题就是数据展示时的样式需求,如鼠标放到图表上显示的内容、数据展示时的格式问题...
  • formatter内容格式器,支持字符串模板和回调函数两种形式。 回调函数格式:(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string { componentType: 'series', // 系列...
  • 找了很久的原因。结果是写的位置不对! 例子里面是这样的:...所以和其他图表属性不一样 代码:我这里是在vuex里面调用的接口 // 训练类别占比图表所用数据 async getRecordXllbzb({commit}) { console.log('首
  • Echarts图表之formatter用法

    千次阅读 2019-11-08 17:22:32
    一:formatter格式化参数模板 1. 字符串模板 1.1. 模板变量有 {a}, {b},{c},{d},{e},分别表示系列名,数据名,数据值等。 1.2. 在 trigger 为’axis’ 的时候,会有多个系列的数据,此时可以通过{a0}, {a1}, {a2...
  • echarts legend 使用formatter和rich自定义样式 需要实现的效果: 代码: // 需要加标签的label名称 const labelMark = '产品名称2' ... legend: { itemGap: 20, formatter (label) { // markLabel为是否打标签...
  • 关于Echarts中formatter实现动态数据的方法

    万次阅读 多人点赞 2017-12-06 16:46:54
    由于在近期工作内容中用到echarts,实现...看到echarts动态数据想到的当然是formatter了, 然后想到的当然是tooltipformatter啦,tooltip就是鼠标悬浮图表item的那个半透明的小框,大概长这样: code长这样
  • echarts属性详解

    2019-04-24 19:59:37
    theme = { // 全图默认背景 // backgroundColor: 'rgba(0,0,0,0)', // 默认色板 color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed', '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#...
  • echarts tooltip formatter自定义

    千次阅读 2018-06-30 16:48:15
    echarts做折线图,出现了hover数据点时出现了tooltip位置不正确的Bug,如图:正常的显示应该是这样,如图:同样的代码不一样的效果,复制粘贴渲染出来的效果还是不一样,网上也没有说明这个BUG的方法,只能使用...
  • echarts-formatter

    2021-09-25 16:38:24
    模板变量有 {a}, {b},{c},{d},{e},分别表示系列名,数据名,数据值等。 在 trigger 为 'axis' 的时候,会有多个系列的数据,此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示...label.formatter 配置项。
  • echarts - formatter语法

    2021-06-04 16:07:13
    文章目录换行自定义显示 换行 \n 自定义显示 // 方式1 label: { show: true, ... formatter(v) { // v是data属性对应的数组的每一个元素 return v.name + ':' + v.percent + '%' } }, ...
  • https://blog.csdn.net/sky_jiangcheng/article/details/78248905 ...   外部: legend ...饼图上每一部分:series >> itemStyle >> normal >> label【formatter+labelLine】 默认:name
  • 1.加 \n 2.使用extraCssText
  • echarts官网: https://echarts.apache.org/zh/index.html 3.完整代码 https://gitee.com/susuhhhhhh/responsive-web-page 4.主要代码 var myChart = echarts.init(document.getElementById('main3')); var option =...
  • echartsformatter的params传值问题

    千次阅读 2021-01-16 02:33:57
    题目描述Echarts官方网站里K线图例子,params[0].value[0]是第一个data值,但是当我把代码复制过去,params[0].value[0]就变成了data下标,而params[0].value[1]变成了第一个data值。我是直接把整个代码复制过去的...
  • echarts中label.formatter不生效问题

    千次阅读 2020-11-25 13:31:59
    echarts开发过程,在使用地图时,如果使用geo,并且想设置地图上文本内容以及样式的时候,我们可以使用geo.label.normal.formatter来自定义这些功能,但是有时候会出现formatter不生效的情况,这时候可以通过...
  • echarts 自定义样式 formatter

    千次阅读 2019-09-23 15:17:10
    echart 提供了 很多样式 比如lineStyle 这种对象可以让你配置相关的一些属性,但是如果给的东西不能满足所有的条件可以使用formatter 这个属性 formatter属性可以接收一个字符串或者一个方法 用来自定义返回的...
  • 昨天在echarts官网示例下载了个动态的柱形图,在线演示如下图 但保存到本地后却没有自动换位和数据毫秒级的变化了 解决 其实这是因为本地的echarts版本太低了,动态是echarts5新特性,所以引用最新版的echarts即可...
  • echarts饼图里添加formatter数据的方法

    千次阅读 2021-11-18 15:29:12
    官方解释地址:https://echarts.apache.org/zh/option.html#tooltip.formatter 截图-图二: ① 和 ②是一样效果的,对应的解释分别写在图上的1、2、3、4了,懂了大概使用方法后面就可以根据自己的需求更该了,代码...
  • [Echarts]如何自定义tooltip formatter

    千次阅读 2021-08-11 17:54:30
    在图表开发过程,图表自带的数据标签样式往往不满足用户的需要,而且对空数据也不会做兼容展示处理(如下图)。这时我们便需要对图标的tooltip进行自定义。 字符串模板 参考官方文档。这种方法局限性明显,...
  • 1. 折线图(主要针对) grid: { bottom: '0%', ... containLabel: true, //echarts是否都被包含在canvas图的大小里 }, legend: { icon: 'square', //图例的样式,分为square,circle,默认跟随s
  • 在使用uniapp的echarts时,我们一般都是使用的randerjs 就是下面这些代码 <script module="echarts" lang="renderjs"> let myChart export default { mounted() { if (typeof window.echarts === 'function'...
  • ECharts formatter可以添加点击事件吗

    千次阅读 2020-12-30 22:19:44
    展开全部// 路径配置require.config({paths : {echarts : 'jquery/echarts-2.2.7/build/dist'}});// 使用EChart.js画图function drawChart() {require([ 'echarts', 'echarts/chart/force' // 使用柱状图就加载bar...
  • 1字符串模板 1.1 饼图 模板变量: (1){a}:系列名,series.name。 (2){b}:数据名,series.data.name。...(3){c}:数据值,series.data.value。...(5){@xxx}:数据名为'xxx'的维度的值...formatter:"{b}:{c}.
  • 在tooltip提示框组件,增加formatter函数 tooltip: { //提示框组件 show: true, trigger: 'item', formatter: function(params) { var res = params.name+'<br/>'; var myseries = option.series; for...
  • DIY饼图的环形图样式

空空如也

空空如也

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

echarts中formatter属性