在微信小程序里的ecahrts图表，tooltip中内容有黑色阴影的问题

于 2024-03-08 15:13:44 发布
阅读量603 收藏 6
点赞数 6
分类专栏： uniapp(小程序) echarts 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57033755/article/details/136562826
版权

tooltip并没有设置文字阴影相关配置，但是实际真机测试出来有黑色阴影（本地编译器没有阴影）， 经过研究发现，需要在tooltip中加上以下配置就OK了

	tooltip: {
		
			// .....
					
			textStyle:{
				textShadowColor:'transparent',//文字块背景阴影颜色
				textShadowBlur:10,//文字块的背景阴影长度
			},
			
		},

textShadowBlur必须写，并且不能为0，否则textShadowColor不生效

柑橘乌云_
关注
  • 6
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Element ui 使用抽屉组件 el-drawer和el-tooltip 出现黑框的样式问题
FTEzreal的博客
03-26 1287
解决 给el-tooltip加css样式 .el-tooltip{ outline: none !important; }
echarts-taro3-react:taro3.x-react构建的微信小程序echarts组件，及使用示列
04-28
echarts-taro3-react 基于Taro3.x-React框架构建的微信小程序版本echarts组件，及使用示例 代码体积过大解决方案： 使用分包， 自定义echart.js，自行前往（注意：版本需要选择4.9.0，不要勾选压缩，可下载下来后自行压缩） 按需构建echart.js，然后替换掉echarts-taro3-react/lib/ec-canvas/echart.js 版本日志： 1.0.11： 新增datazoom功能 1.0.10： 压缩了echarts.js, 代码大小从2.2m下降至543kb 修复了更新数据不能刷新的问题 传送门 特性 Taro3.x React Typescript 功能 柱状图 折线图 饼图 散点图 雷达图 热力图 地图 仪表盘 漏斗图 快速安装 npm i echarts-taro3-react 使用 引入EChart组
WXA-ToolTip-微信小程序-ToolTip信息提示组件.zip
09-23
微信小程序-ToolTip信息提示组件导入将ToolTip文件夹复制到pages文件夹内使用在需要使用ToolTip的页面对应的.wxml文件中添加：<import src="../ToolTip/toolTip.wxml"/> <!-- 引入toolTip模板 --> <template is="toolTip" data="{{_toolTip_}}"/>在需要使用ToolTip的页面对应的.wxss文件顶部添加：@import "./ToolTip/toolTip.wxss";在.js中调用：// 在顶部引入toolTip.js var toolTip = require('../ToolTip/toolTip.js'); // 在onLoad中初始化toolTip toolTip.init(this); // 调用showToolTip显示提示信息，参数: // type:类型包含'success'|'info'|'warn'|'error',  // text:内容 // delay:延迟消失时间,不填不自动消失,只有success|info类型会自动消失 toolTip.showToolTip('success', '显示success提示', 2000);
微信小程序、提示组件、用于解释提示
04-05
实现功能：用于点击文字标题或者"问号"点击后弹出提示组件显示简单的内容提示，方便查看解释
微信小程序 - toptip效果
03-29
在Page顶部下滑一个提示条 , 代码见 /mixins/UIComponent.js ,其中的self 可以认为是微信小程序的Page对象 (此图片来源于网络，如有侵权，请联系删除! ) 效果: 默认2秒展示,上移动画隐藏   /** * 展示顶部 tip , 多次快速调用,会覆盖前次展示 */ UIComponent.showToptip = function (opt = {}) { var self = this; if (self.uiComponent_topTip_timer) { //如果之前有timer,那么取消后重新创建 clearTimeout(self.uiCompon
echarts文字加阴影效果,描边颜色,描边宽度
qq_42356513的博客
02-25 4051
给Echarts字体加阴影效果: textShadowColor 给文字加描边颜色: textBorderColor 给文字加描边宽度: textBorderWidth
echarts漏斗图鼠标移入时内部文字阴影/描边
Slay__的博客
07-05 1397
echarts去除高亮时文字默认描边
echarts tooltip 提示框阴影设置
最新发布
Teemo_shape的博客
12-18 760
【代码】echarts tooltip 提示框阴影设置。
Echarts点击tootip的阴影背景触发事件
小火车况且况且况且的博客
07-12 1064
Echarts阴影部分触发事件
echarts中在地图上显示label时的阴影问题
happyqyt的专栏
10-12 7155
先来贴一张最终效果图： 对应的option是这样的 option = { backgroundColor: 'rgb(55, 105, 0, .2)', title: [{ text: '测试', left: 'center', top: '2%', textStyle: { font...
echarts-tooltip-carousel.js
03-11
echarts动画制作
echarts x轴加箭头_【Echarts】echarts tooltip小箭头，及阴影样式修改，双Y轴显示，折线图和柱状图同时展示，legend分开展示...
weixin_39951773的博客
02-23 1593
this.circleChart = {tooltip: {trigger: 'item',backgroundColor: '#fff',textStyle: {color: '#666',fontSize: 14,lineHeight: 16},confine: true,formatter:'{a}{b} : {c} ({d}%)'},series: [{name: name || ...
[echarts] 提示框（tooltip）
qq_14993591的博客
09-25 1320
【代码】[echarts] 提示框（tooltip）
Vue-Element的show-overflow-tooltip属性使用后空属性值鼠标移动上去提示一个黑色悬浮框
热门推荐
marke_huang的博客
09-21 3万+
Vue-Element的show-overflow-tooltip属性使用后空属性值鼠标移动上去提示一个黑色悬浮框 按照element官方写法为： &amp;lt;el-table-column :porp=‘enterpriseName ’ :label=&quot;$t('会员名称')&quot; show-overflow-tooltip&amp;gt; &amp;lt;/el-table-column&amp;gt; 解决办法为
echart-条形图各个属性详解/bar渐变色/根据value设置bar的颜色/隐藏刻度线/给每一个bar添加阴影/tooltip自定义样式
hellenYuan的博客
08-04 1933
echart-条形图各个属性详解 horibarOption:{ grid: { left: '0px', right: '20px', bottom: '3%', containLabel: true, x:130 }, tooltip: { trigger: 'axis', formatter: function(pa
【Echarts】echarts tooltip小箭头，及阴影样式修改，双Y轴显示，折线图和柱状图同时展示，legend分开展示
OrangeChenZ的博客
04-03 7232
this.circleChart = { tooltip: { trigger: 'item', backgroundColor: '#fff', textStyle: { color: '#666', ...
echarts---tooltip（提示框组件）配置项
舔狗的博客
08-12 1万+
简单概述echarts tooltip组件相关属性
echarts 通用配置提示组件tooltip
weixin_43294560的博客
03-18 1170
//提示框组件，鼠标移动到图会显示内容 tooltip: { //内容触发类型,axis(在坐标轴内就显示内容),item(放在柱体上才会显示内容) trigger: 'axis', //坐标轴指示器,坐标轴触发有效,随鼠标移动 axisPointer: { //line:竖线 cross十字线 ...
微信小程序 修改echarts中tooltip的内容
06-09
要修改 Echarts 中 Tooltip 的内容，您可以使用 Echarts 提供的 Tooltip Formatter 函数来自定义 Tooltip 内容。具体步骤如下： 1.首先，您需要在 Echarts 的 option 中配置 Tooltip 相关的属性，如下面的示例代码所示： ```javascript option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } }, formatter: function (params) { return params[0].name + '<br/>' + params[0].seriesName + ' : ' + params[0].value + '<br/>' + params[1].seriesName + ' : ' + params[1].value + '<br/>' + params[2].seriesName + ' : ' + params[2].value + '<br/>' + params[3].seriesName + ' : ' + params[3].value + '<br/>' } }, ... } ``` 在上面的代码中，我们设置了 Tooltip 的触发方式为 'axis'，使用了 'cross' 的 axisPointer，以及自定义的 Tooltip Formatter 函数。 2.接下来，您需要在 Formatter 函数中编写自定义的 Tooltip 内容。根据您的需求，您可以在 Formatter 函数中使用 params 参数来获取当前 Tooltip 中的数据，然后根据这些数据来自定义 Tooltip 内容。下面是一个简单的示例代码： ```javascript formatter: function (params) { var res = params[0].name; res += '<br/>' + params[0].seriesName + ' : ' + params[0].value + '元'; res += '<br/>' + params[1].seriesName + ' : ' + params[1].value + '万元'; return res; } ``` 在上面的代码中，我们首先获取了当前 Tooltip 中的 name，然后根据 name 和 params 中的 seriesName 和 value 来自定义 Tooltip 内容。 3.最后，将修改后的 Option 对象传递给 Echarts 的 setOption() 函数即可更新图表。示例代码如下： ```javascript myChart.setOption(option); ``` 以上就是修改 Echarts 中 Tooltip 内容的步骤，希望能够帮助到您。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

柑橘乌云_

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

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

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

打赏作者

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

抵扣说明：

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

余额充值