给echarts的提示框添加单位,以及给旁边的文字进行调整

在项目中我们需要的往往是带单位的提示框比如这样的
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

那么去哪里修改呢?

其实在tooltip中有函数方法formatter(params)可以进行修改
params是你展示的数据比如柱状图你只显示一条柱状可以不用循环直接字符串拼接但是如果有多条需要展示那么就需要使用循环拼接了

tooltip: {
              trigger: 'axis',
              axisPointer: {
                animation: false
              },
          formatter:function(params){
            // console.log(params);
              var html = params[0].name + "<br/>";
        for(var i=0;i<params.length;i++){

        html +=
              params[i].marker +params[i].seriesName+
              params[i].value +"人"+"<br/>";
        }
return html 
  },
            },
tooltip: {
              trigger: 'axis',
              axisPointer: {
                animation: false
              },
              formatter: function (params) {
                var htmlStr = '';
                htmlStr += '<div><span style="color:#fff;">' + params[0].name + '</span><br/> ';
                for(var i=0;i<params.length;i++){
                //前面的原点和他的颜色
                  htmlStr += '<span style="width: 8px;height: 8px;display:inline-block;border-radius: 50%;background-color:'+params[i].color+'"></span><span style="color:#fff;">' + params[i].seriesName + ':</span>'+
                    '<span style="color:#fff;">' + params[i].value + '&nbsp;℃</span><br/>';
                }
                htmlStr += '</div>';
                return  htmlStr
              },
            },复制代码

两个代码都可以看看那你能看懂哪一种吧
在这里插入图片描述
比如对这个新疆百分比进行操作

      legend: {
          left: "65%",
          top:"20%",
          pageIconSize: 10,
          type: "scroll",
          top: "7%",//调节新疆字体和边框得距离
          orient: this.myorient,
          icon: "circle",
          padding: [0, 0, 0, 0],//上右下左
          // itemGap: 14,
          itemWidth: 7,//控制原点的大小
          formatter: name => {
            let data = this.dataList;
            //找到data中name和文本name值相同的对象
            let val = data.filter(item => {
              return item.name === name;
            });
            let obj = val[0];
            // let arr = [
            //     '{a|'+name+'}',
            //     '{b|'+obj.value+'辆}',
            //     '{c|'+obj.percentage+'}',
            // ];
            let arr = "{a|" + name + "}{b|" + obj.percentage + "}";//返回的是新疆 56% 可以继续拼接
            return arr;
            // return arr.join('')
          },
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值