自定义鼠标放入ECharts 显示的内容

直接上代码

let option = {
        tooltip: {
          trigger: "item",
          formatter(name) {
            console.log(name, "name11111");
            return (
              name.data.name +
              "‌" +
              "‌" +
              "‌" +
              "|" +
              "‌ " +
              name.data.value +'次'+
              "‌ " +
              name.data.count+'%'
            );
          },
        },
        series: [
          {
            type: "pie",
            radius: ["60%", "80%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            // areaStyle:{
            //   color:'#1596FE'
            // },
            label: {
              normal: {
                show: true,
                position: "center",
                color: "#4c4a4a",
                formatter:
                  "{total|" +
                  "使用主题" +
                  "}" +
                  "\n\r" + "\n\r" +
                  "{active|" +
                  this.themeCount +
                  "}" +
                  "{noactivite|" +
                  "/" +
                  this.totalThemeCount +
                  "}",
                rich: {
                  total: {
                    fontSize: "0.9rem",
                    fontFamily: "Source Han Sans CN",
                    color: fc,
                    fontWeight: 400,
                    height: 20,
                  },
                  active: {
                    fontFamily: "Source Han Sans CN",
                    fontSize: "1rem",
                    color: this.cybjtxtcolor,
                    fontWeight: "800",
                  },
                  noactivite: {
                    fontFamily: "Source Han Sans CN",
                    fontSize: "1rem",
                    fontWeight: "800",
                    color: fc,
                  },
                  emphasis: {
                    //中间文字显示
                    show: true,
                  },
                },
              },
            },
            lableLine: {
              normal: {
                show: false,
              },
              emphasis: {
                show: true,
              },
              tooltip: {
                show: false,
              },
            },
            data: [
              { value: this.themeCount, name: "使用主题数",count:this.themeCount1 },
              { value: this.unThemeCount, name: "未使用主题数",count:this.unThemeCount1 },
            ],
            itemStyle: {
              normal: {
                color: function (colors) {
                  var colorList = _this.state == 'light'?["#4c7af8","#dfe8ff",]:["#4c7af8","#2a336e"];
                  return colorList[colors.dataIndex];
                },
              },
            },
          },
        ],
      };

只要是要在 tooltip 里面写formatter函数

tooltip: {
          trigger: "item",
          formatter(name) {
            console.log(name, "name11111");
            return (
              name.data.name +
              "‌" +
              "‌" +
              "‌" +
              "|" +
              "‌ " +
              name.data.value +'次'+
              "‌ " +
              name.data.count+'%'
            );
          },
        },

 这里要特别注意 name.data.name 必须要和 当前ECharts 中data的数据 完全符合

就是下面 data 的字段名字

data: [
              { value: this.themeCount, name: "使用主题数",count:this.themeCount1 },
              { value: this.unThemeCount, name: "未使用主题数",count:this.unThemeCount1 },
            ],

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值