echarts 去掉图表提示框的指示线以及改变图表提示框内容的显示

直接看代码  都有注释

   tooltip: { //提示框组件
            trigger: 'axis', //触发类型
            axisPointer: { //去掉移动的指示线
              type: 'none'

            },
            backgroundColor: '#5964E4FF', //背景颜色(此时为默认色)
            borderRadius: 36, //边框圆角
            padding: [2, 20], //提示框大小
            borderColor: '#0630E066',
            borderWidth: '1',
            textStyle: {
              color: '#FFFFFFFF',
            },
            formatter: function (params, ticket, callback) { //提示框内容
              var value = ''
              for (var i = 0; i < params.length; i++) {
                var data = (params[i].data).toFixed(2);
                value += data + '  kW·h'
              }
              return value
            }
          },

 

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Echarts是一款数据可视化的开源库,可以用来展示各种图表以及数据分析结果。在Echarts中,我们可以通过合适的配置来实现标点显示提示框,并且可以加入按钮来进行交互操作。 首先,要实现标点显示提示框,我们需要在Echarts的配置项中设置tooltip属性。tooltip属性允许我们定义提示框的样式、内容以及触发方式等。通过设置为axis指示器,当鼠标悬停在图表标点上时,会显示该点的具体数值等信息。 其次,要在Echarts中加入按钮,我们可以借助Echarts官方提供的扩展组件echarts-gl。该组件提供了一些常用的交互功能,包括按钮、滚动、切换等。我们可以通过引用echarts-gl来实现按钮的添加。 具体操作步骤如下: 1. 引入Echartsecharts-gl库文件到HTML页面中。 2. 创建一个容器div,并设置好相应的宽度和高度。 3. 在JavaScript中,实例化Echarts对象,并通过id选择器获取div容器。 4. 定义好数据配置项。 5. 在tooltip配置项中,设置为axis指示器,使得鼠标悬停在标点上时显示提示框。 6. 在toolbox配置项中,添加按钮配置,可以自定义按钮的样式、事件等。 7. 调用Echarts对象的setOption方法,将配置项应用到图表中。 通过以上步骤,就可以实现在Echarts中同时显示标点提示框和按钮了。这样用户在使用图表时,可以通过按钮实现一些交互操作,同时鼠标悬停在标点时也能得到详细的提示信息,更加直观地分析数据。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值