请教一个 echarts 中的问题

2021-08-06 17:24:34 +08:00
 christin

如图


这是我用 guage 仪表盘做的环形图,现在的问题是 tooltip 死活出不来,各种地方都设置了就是无效 。有大佬能指点一下吗?
附上 option


option: {
        tooltip: {
          trigger: "item",
          show: true,
          triggerOn: "mousemove",
          alwaysShowContent: true,
          formatter: function (params) {
            console.log(params);
            return "123";
          },
        },
        series: [
          {
            type: "gauge",
            startAngle: 90,
            endAngle: -270,
            radius: "95%",
            min: 0,
            max: 1206.88, //全国
            pointer: {
              show: false,
            },
            itemStyle: {
              color: "rgb(223, 149, 10)",
            },
            progress: {
              show: true,
              overlap: false,
              clip: false,
              itemStyle: {
                borderWidth: 4,
                borderColor: "rgb(223, 149, 10)",
              },
            },
            axisLine: {
              lineStyle: {
                width: 5, //宽度
                color: [[1, "rgb(25, 61, 144)"]],
              },
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              distance: 50,
            },
            data: [
              {
                value: 20,
                name: "全国占比",
                title: {
                  offsetCenter: ["0%", "20%"],
                  color: "rgb(207, 147, 25)",
                },
                detail: {
                  offsetCenter: ["0%", "-20%"], //1206.88 947.12
                  color: "white",
                },
              },
            ],
            title: {
              fontSize: 12,
            },
            detail: {
              // 	width: 50,
              // 	height: 14,
              fontSize: 14,
              // 	color: "auto",
              // 	borderColor: "auto",
              // 	borderRadius: 20,
              // 	borderWidth: 1,
              // 	formatter: "{value}%",
            },
            tooltip: {
              formatter: function (params) {
                console.log(params);
                return "123";
              },
            },
          },
        ],
      },

521 次点击
所在节点    问与答
1 条回复
christin
2021-08-12 10:00:24 +08:00
更新解决方案
仪表盘的 tooltip 是在指针上的,需要鼠标移动到指针上才能出现。但是我之前写的指针不显示,所以无法出现。可以修改 pointer 的 show 为 true 然后再设置颜色为透明 即可使用 tooltip 了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/794132

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX