• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
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里就可以更改。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序管理新闻资讯分类-微信小程序****27发布时间:2022-07-18
下一篇:
微信小程序获取验证码倒计时发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap