G2Plot自定义悬浮提示（tooltip）

最新推荐文章于 2024-06-12 13:27:41 发布

原创最新推荐文章于 2024-06-12 13:27:41 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

话不多说，直接上图

如果你需要的效果是如上图所示，继续往下看，

直接上代码

//这个是用来渲染图表数据的
const ddd = [
        {
          ip: "101.101.101.101",
          value: 2,
          indName: "第一名",
          name: "第一名",
        },
        {
          ip: "101.101.101.102",
          value: 1,
          indName: "第二名",
          name: "第二名",
        },
        {
          ip: "101.101.101.103",
          value: 1,
          indName: "第三名",
          name: "第三名",
        },
      ];
//这个是用来渲染图表
      this.$nextTick(() => {
        this.columnPlot = new Column(this.title, {  //this.title对应图表id
          data: ddd,    //上面定义的数据
          xField: "ip",    // x轴展示ip
          yField: "value",    // y轴展示value
          height: 200,      //图表高度
          color: "#1890FF",
          xAxis: {
            label: {
              rotate: 12,
              offset: 30,
              formatter: (text) =>
                text.length > 9 ? `...${text.slice(8)}` : text,
            },
          },
          yAxis: {
            //刻度数量
            tickCount: 6,
            title: {
              text: "单位：" + this.dUnitType,
            },
          },
//下面为悬浮提示信息的重点区域
          meta: {
            value: {
              alias: this.dTitle,
              formatter: (text) =>text+"你想加的东西",       
              
            },
            ip: {
              alias: "Ip地址",
              // formatter: (v) => v + "你想加的东西",
            },
            indName: {
              alias: "名字",
              // formatter: (v) => v + "你想加的东西", 
            },
          },
          tooltip: {
            title: "name",
            fields: ["ip", "indName", "value"],
          },
        });
        this.columnPlot.render();
      });

如上面展示代码所示，meta中定义的字段必须是渲染图表数据中的字段，在meta中定义之后，需要把你想要展示在悬浮提示信息框中的东西放到tooltip中的fields中即可，over！