echarts 自定义鼠标悬停展示

 tooltip: {
    trigger: 'axis',
    formatter: function (params) {
          let htmlStr = '';
          for (let i = 0; i < params.length; i++) {
            const param = params[i];
            const xName = param.name; //x轴的名称
            const seriesName = param.name; //图例名称
            const value = param.value; //y轴值
            const color = param.color; //图例颜色

            if (i === 0) {
              htmlStr +='xzxxz:'+ xName + '<br/>'; //x轴的名称
            }
            htmlStr += '<div>';
            //为了保证和原来的效果一样,这里自己实现了一个点的效果
            htmlStr +=
              '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
              color +
              ';"></span>';
            //圆点后面显示的文本
            htmlStr +=
              seriesName +
              ':' + value
            // 文本颜色设置--2020-07-23(需要设置,请解注释下面一行)
            htmlStr += '</div>';
          }
          return htmlStr;
        },
    },
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
echarts地图中,鼠标悬停的效果可以通过配置项里添加代码来实现。首先,在tooltip属性中设置trigger为'axis',以触发鼠标悬停事件。然后,可以通过设置position属性来调整tooltip的显示位置。例如,可以根据鼠标的位置来决定tooltip显示在左侧或右侧。可以使用position函数来实现这个功能,根据当前鼠标的位置来判断tooltip的显示位置。 此外,如果想要在tooltip中显示更多的信息,可以使用formatter属性。通过设置formatter函数,可以自定义tooltip的内容。可以在formatter函数中添加需要显示的信息,例如名称、数值等。 综上所述,要实现echarts地图鼠标悬停的效果,可以按照以下步骤进行操作: 1. 在echarts图表配置项的tooltip属性中添加trigger: 'axis',以触发鼠标悬停事件。 2. 可选:使用position函数来设置tooltip的显示位置,根据鼠标的位置来决定显示在左侧或右侧。 3. 在tooltip属性中添加formatter函数,通过自定义函数来添加需要显示的信息,例如名称、数值等。 <span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [echarts地图散点悬浮显示多条数据](https://download.csdn.net/download/lu92649264/13072202)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [echarts鼠标悬浮显示数据位置设置](https://blog.csdn.net/Jack_13201/article/details/119174830)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [echarts formatter鼠标悬停显示信息](https://blog.csdn.net/qq_42604176/article/details/122355117)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

base 西安内推私信

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值