echarts仪表盘(gauge)增加可hover提示的节点

需要的ui样式:
在这里插入图片描述
简单来说创建两个仪表盘图层,第一个图层是hover部分值是70,第二个图层是总进度图层值是21。
代码如下:

option = {
   tooltip: {
    show: true,
    trigger: 'item',
  },
    series: [
          {
      type: 'gauge',
      radius: '90%',
      splitNumber: 1,
      startAngle: 180,
      endAngle: 0,
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      pointer: {
        show: true,
        width: 10,
        length: 35,
        icon: 'rect',
        offsetCenter: ['0', '-90%'],
      },
      progress: {
        show: false,
      },
      itemStyle: {
        color: '#0268C1',
      },
      label: {
        show: false,
      },
      tooltip: {
        show: true,
        formatter: '近3场目标用户平均70%',
        backgroundColor: '#FFFFFF',
        padding: [8, 10],
        borderColor: 'rgb(217, 217, 217)',
        textStyle: {
          color: '#000',
        },
      },
      detail: {
        show: false,
      },
      data: [
        {
          value: 60,
        },
      ],
      zlevel: 999,
      animationDuration: 0,
      z: 99,
    },
    {
      type: 'gauge',
      radius: '90%',
      splitNumber: 1,
      startAngle: 180,
      endAngle: 0,
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      pointer: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          width: 35,
          color: [[1, '#e8e8e8']]
        }
      },
      progress: {
        show: true,
        width: 35,
      },
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#2CBCEA',
          },
          {
            offset: 1,
            color: '#3D74EE',
          },
        ]),
      },
      label: {
        show: false,
      },
      tooltip: {
        show: false,
      },
      detail: {
        valueAnimation: true,
        formatter: '{value}%',
        fontSize: 30,
        offsetCenter: [0, '-20%'],
      },
      data: [
        {
          value: 23,
          name: '高风险事件'
        },
      ],
      z: 13,
    },
        ],
};
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值