首页 前端知识 自定义鼠标放入ECharts 显示的内容

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

2024-04-29 11:04:58 前端知识 前端哥 754 224 我要收藏

直接上代码

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 },
            ],

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6338.html
标签
评论
发布的文章

HTML5本地存储

2024-05-06 09:05:10

HTML5和CSS3新特性

2024-04-16 17:04:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!