微信小程序使用echart 如何更改tooltip的提示内容。

option = {
    title: {
      title: "V",
      left: '20'
    },
    color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
    legend: {
      top: 10,
      left: 'center',
      z: 100
    },
    grid: {
      containLabel: true
    },
    axisPointer: {
      link: { xAxisIndex: 'all' },
      label: {
        backgroundColor: '#777'
      }
    },
    tooltip: {
      show: true,
      trigger: 'axis',
      // textStyle:{
      //   color:"red"
      // },
      formatter: function (param) {
        console.log(param)
        // 利用循环更改显示的内容
        let list = param.length
        let Oparam=param
        console.log(list)
        let txt = param[0].name+"时"+"\n"
        for (var i=0;i<list;i++){
          txt += param[i].seriesName + ":" + param[i].data + '\n'
        }
        return txt

        //用判断语句更改内容
        // switch (list) {
        //   case 3:
        //     return [
        //       param[0].name + '时' + '\n',
        //       param[0].seriesName + ":" + param[0].data + '\n',
        //       param[1].seriesName + ":" + param[1].data + '\n',
        //       param[2].seriesName + ":" + param[2].data,
        //     ].join('');           
        //     break;
        //   case 4:
        //     return [
        //       param[0].name + '时' + '\n',
        //       param[0].seriesName + ":" + param[0].data + '\n',
        //       param[1].seriesName + ":" + param[1].data + '\n',
        //       param[2].seriesName + ":" + param[2].data + '\n',
        //       param[3].seriesName + ":" + param[3].data,
        //     ].join('');  
        //     break;
        //   case 1:
        //     return [
        //       param[0].name + '时' + '\n',
        //       param[0].seriesName + ":" + param[0].data,
        //     ].join('');  
        //     break;
        //   default:
        //     break;
        
        // return [
        //   param[0].name + '小时' + '\n',
        //   param[0].seriesName + ":" + param[0].data + '\n',
        //   param[1].seriesName + ":" + param[1].data + '\n',
        //   param[2].seriesName + ":" + param[2].data + '\n',
        // ].join('');  
        // }           
      },
      position: function (point, params, dom, rect, size) {
        //其中point为当前鼠标的位置,size中有两个属性:viewSize和contentSize,分别为外层div和tooltip提示框的大小
        // 更改提示框的显示位置
        var x = point[0];//
        var y = point[1];
        var viewWidth = size.viewSize[0];
        var viewHeight = size.viewSize[1];
        var boxWidth = size.contentSize[0];
        var boxHeight = size.contentSize[1];
        var posX = 0;//x坐标位置
        var posY = 0;//y坐标位置
        console.log()
        if (x < boxWidth) {//左边放不开
          posX = 5;
        } else {//左边放的下
          posX = x - boxWidth;
        }

        if (y < boxHeight) {//上边放不开
          posY = 5;
        } else {//上边放得下
          posY = y - boxHeight;
        }
        return [posX, posY];
      }
    },

将以上tooltip里的值加入到echart option里就可以更改。

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 11
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值