情不知从何起,一往而情深
排名
6
文章
199
粉丝
4
评论
3
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术

echarts提示框tooltip属性

3582人阅读 2023/3/14 15:21 总访问:1110451 评论:0 收藏:0 手机
分类: 前端
  1. tooltip: {
  2. show: true, // 是否显示提示框组件
  3. trigger: 'axis', // 触发类型('item',数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用;'axis',坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用;'none',不触发。)
  4. axisPointer: {
  5. type: 'cross', // 指示器类型('line' 直线指示器;'shadow' 阴影指示器;'none' 无指示器;'cross' 十字准星指示器。)
  6. snap: false, // 坐标轴指示器是否自动吸附到点上。默认自动判断。
  7. label: {
  8. margin: 10, // label 距离轴的距离
  9. color: '#FFF', // 文字的颜色
  10. fontStyle: 'normal', // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
  11. fontWeight: 'normal', // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
  12. fontSize: '20', // 文字字体大小
  13. lineHeight: '50', // 行高
  14. padding = [5, 7, 5, 7], // 内边距,单位px
  15. backgroundColor = 'auto', // 文本标签的背景颜色
  16. },
  17. animation: true, // 是否开启动画
  18. animationDuration: 1000, // 初始动画时长
  19. animationDurationUpdate: 200, // 数据更新动画的时长
  20. }
  21. showContent: true, // 是否显示提示框浮层,默认显示
  22. alwaysShowContent: true, // 是否永远显示提示框内容,默认情况下在移出可触发提示框区域后一定时间后隐藏
  23. triggerOn: 'mousemove|click', // 提示框触发的条件('mousemove',鼠标移动时触发;'click',鼠标点击时触发;'mousemove|click',同时鼠标移动和点击时触发;'none',不在 'mousemove' 或 'click' 时触发)
  24. confine: true, // 是否将 tooltip 框限制在图表的区域内
  25. backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮层的背景颜色
  26. padding: 5, // 提示框浮层内边距,单位px
  27. textStyle: {
  28. color: '#FFF', // 文字的颜色
  29. fontStyle: 'normal', // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
  30. fontWeight: 'normal', // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
  31. fontSize: '20', // 文字字体大小
  32. lineHeight: '50', // 行高
  33. },
  34. formatter: function (params) {
  35. var result = ''
  36. var dotHtml = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:30px;height:30px;background-color:#F1E67F"></span>' // 定义第一个数据前的圆点颜色
  37. var dotHtml2 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:30px;height:30px;background-color:#2BA8F1"></span>' // 定义第二个数据前的圆点颜色
  38. result += params[0].axisValue + "</br>" + dotHtml + ' 数据名称 ' + params[0].data + "</br>" + dotHtml2 + ' 数据名称 ' + params[1].data;
  39. return result
  40. }
  41. }

http://events.jianshu.io/p/dce61e93c00a


欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

echartstooltip 基本样式问题处理

在echarts中遇到几个样式问题,现总结如下:1、tooltip中样式中 值换行在tooltip中修改加上一句代码formatter:&#39;{b0}:{c...

ionic3实战使用echarts图表(柱状图)

在公司有些东西需要投到大屏幕上去显示,也就是电视显示屏(安卓版的),但是我没普通的html代码并不能打包到上去安装使用...

echarts 显示坐标点。echarts 自定义显示坐标点。echarts 个性化坐标提升显示,

最简单的显示出来,直接在series中对应的数据项里边设置一下label即可label: { show: true, position: &#39;top&...

echarts自定义图表提示框。鼠标指上去显示。echarts tooltip的使用

官方文档:https://echarts.apache.org/zh/option.html#tooltip 使用的是tooltip,如果只是要显示出来,直接设置trigger: ...

echarts修改横纵坐标颜色。修改折线图线的宽度

echarts修改横坐标颜色代码主要是这样的 axisLine:{ lineStyle:{ ...

echarts图例legend颜色各不相同,图例legend空心圆

代码如下:legend: { // x:&#39;right&#39;, //可设定图例在左、右、居中 // padding:[0,50,0,0], //...

echarts折线图使用示例。包含颜色渐变,节点样式,图例legend样式等

设计图如下 代码如下&lt;!-- 学习趋势图 --&gt; &lt;template&gt; &lt;div class=&quot;learnTrendChartContainer&q...

echarts 仪表盘gauge颜色渐变。echarts圆环进度条。echarts圆环进度条弧形

效果如下: 配置项代码如下// 基于准备好的dom,初始化echarts实例 const myChart = this.$echarts.init(document.getEl...

echarts 设置x坐标刻度的颜色

是使用axisLabel下面的颜色设置,不是nameTextStyle不要搞混了。nameTextStyle官方解释是坐标轴名称的文字样式,要和坐标轴...

echarts setoption 不重新渲染

Echarts渲染的逻辑如果 echarts 未实例化则进⾏实例化过程,⼀旦实例化,便会在div容器⽣成⼀个 echarts_instance属性,该...

echarts 图表颜色设置,饼图颜色渐变

[TOC]echarts 图表颜色设置在外层加一个color数组就行了 color:[&quot;#1890FF&quot;,&quot;#91CB74&quot;,&quot;#FAC858&...

echarts饼图通过grid设置位置不生效。饼图设置位置

grid 记得是平面直角坐标系的意思,而仪表盘、饼图这种,是通过设置中心点位置的方式定位的。所以仪表盘、饼图这种应该这样...

uniapp确认提示框

代码如下: uni.showModal({ title: &#39;提示&#39;, content: &#39;这是一个模态弹窗&#39;, success: fun...

vue element 三种信息提示框。错误提示,警告提示,消息提示

代码如下&lt;template&gt; &lt;el-button :plain=&quot;true&quot; @click=&quot;open2&quot;&gt;成功&lt;/el-button&gt...

layui提示框,信息框layer提示框,信息框

layer.msg(&quot;请输入用户名&quot;, { time: 1000 });