当前位置:首页 » 《随便一记》 » 正文

【可视化开发】echarts配置项——修改tooltip默认样式

18 人参与  2023年04月03日 09:22  分类 : 《随便一记》  评论

点击全文阅读


修改tooltip默认样式

在可视化开发中我们通常会遇到修改tooltip样式问题,下面分享给大家代码片段和最终呈现效果

tooltip: {//鼠标悬浮框的提示文字trigger: "axis",axisPointer: {  // 坐标轴指示器配置项。  type: "none", // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。  axis: "auto", // 指示器的坐标轴。  snap: true, // 坐标轴指示器是否自动吸附到点上},borderColor: "#5cdbd3",//设置自定义边框颜色borderWidth: 1,//设置自定义边框宽度backgroundColor: "rgba(0, 44, 140, 0.50)",//设置自定义背景confine: true,//是否将tooltip框限制在图表的区域内,默认为falseextraCssText:   //额外附加到浮层的css样式,此处为为浮层添加阴影及padding  "box-shadow: 0 0 5px rgba(181, 245, 236, 0.5);padding:5px 15px",formatter: function (param) {  let domName = `<span style="color: #e6f4ff;">${param[0].name}</span>`;  let domValue = `<span style="color: #5cdbd3;">${param[0].value} 个</span>`;  return domName + "<br>" + domValue;},//格式化悬浮框文字格式},

修改tooltip默认样式呈现效果

配置项

trigger 触发类型 axis:坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。item:数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。none:什么都不触发 axisPointer 坐标轴指示器配置项 type:指示器类型 line 直线指示器shadow 阴影指示器none 无指示器cross 十字准星指示器 axis: 指示器的坐标轴。snap:对于数值轴、时间轴,如果开启了 snap,则 axisPointer 会自动吸附到最近的点上。 triggerOn::触发时机 mouseover鼠标移动时触发click鼠标点击时触发mousemove|click 同时鼠标移动和点击时触发。 textStyle:设置文本样式 colorfontStylefontWeightfontSize…

修改tooltip样式在可视化开发中十分常见,希望这篇笔记能分享给大家一些经验哦~


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/58133.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 24张化疗单无错版_任行洲舒卿小姐必读文_小说后续在线阅读_无删减免费完结_
  • 小说大结局小说沈黎小说已更新+特别篇(恶毒女配作上天冷面大佬跪地哄)纯净版
  • 装穷老婆为男大买YU7后悔疯了后续_沈如烟傅斯书傅先生精校文本_小说后续在线阅读_无删减免费完结_
  • 最新章节_笔趣阁(江东)江东小说(抗战之重整河山)在线畅读阅读
  • 恶毒女配作上天,冷面大佬跪地哄小说(沈黎)小说全集阅读连载中(恶毒女配作上天,冷面大佬跪地哄)_笔趣阁
  • 恶毒女配作上天冷面大佬跪地哄小说完结篇(沈黎)(恶毒女配作上天冷面大佬跪地哄)全书无套路阅读无广告小说大结局
  • 重生后我把妈妈换了,她却后悔了后续加长_妹妹林清母亲节精选作品_小说后续在线阅读_无删减免费完结_
  • 全网首发苏娆时砚清:+后续+番外(我曾经天真地以为,他也有片刻动心的牀)全本完整阅读无弹窗
  • 帮堂哥联系外科专家后,我上了手术台大反击_大伯母小凡明白后续更新+番外_小说后续在线阅读_无删减免费完结_
  • 兽世:穿成恶毒雌性后被反派大佬们强宠了小说(思雅)(兽世:穿成恶毒雌性后被反派大佬们强宠了)完整章节列表_笔趣阁
  • 迟暮不归推文_慕承川许依柔迟清夏爽文_小说后续在线阅读_无删减免费完结_
  • 从此我无关你的消息:结局+番外精品选集(孟挽惜)番外+续集

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1