微信小程序使用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裏就可以更改。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章