使用qiun-data-charts（ucharts)自定义tooltip（文本， 换行）

最新推荐文章于 2025-02-12 11:34:17 发布
最新推荐文章于 2025-02-12 11:34:17 发布
阅读量2.5k 收藏 11
点赞数 7
分类专栏： uniapp 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41066262/article/details/139860045
版权

1. 背景

使用qiun-data-charts之后，根据ui设计需要将tooltip设置为自定义文本，且需要进行换行，文字颜色修改，然而官网文档没有提供此功能，所以只能去修改源码实现该功能。官方文档

2. 效果图预览

  • 修改源码之前

在这里插入图片描述

  • 修改源码之后
    • 自定义文本
      在这里插入图片描述
    • 文本换行
      在这里插入图片描述

3. 源码修改

这里主要涉及到两个源文件的修改，文本换行是基于文本自定义实现的，主要的做法是在自定义文本中添加标识符，然后在tooltip渲染函数中根据标识符进行切割并重新赋值。

(1) 自定义文本源码修改

① 从uni_modules找到config-ucharts.js文件

最低0.47元/天 解锁文章
uniapp中使用ucharts进行自定义tooltip（实现换行，改变字体颜色）
2301_76742166的博客
02-05 3282
uniapp中使用ucharts进行自定义tooltip（实现换行，改变字体颜色）
在uniapp中使用qiun-data-charts组件
LW0512的博客
05-19 1万+
在uniapp中使用qiun-data-charts组件 使用步骤 1.引入插件：先在插件市场使用插件导入到项目里 查看 ---- 链接 2.点击使用HbuilderX导入插件 3.选择项目导入该插件 确定 4.页面中直接使用 <!-- 折线图 --> <view id="box"> <qiun-data-charts type="demotype"//代表折线统计图 :chartData="chart
ucharts自定义tooltips修改format配置，可换行展示标题
m0_57462721的博客
05-29 1840
uniapp ucharts自定义tooltips修改format配置，可换行展示标题
ucharts写的折线图实现手指滑动根据滑动的位置显示相关的数据信息(vue3写法)
最新发布
Wx001214的博客
02-12 161
【代码】ucharts写的折线图实现手指滑动根据滑动的位置显示相关的数据信息(vue3写法)
uniapp 使用秋云uCharts图表组件、echarts图表组件
热门推荐
我的博客
09-16 3万+
uniapp 使用秋云uCharts图表组件、echarts图表组件
ucharts自定义添加tooltip悬浮框显示项内容且换行
SunnyRun
06-05 1304
ucharts图tooltip支持自定义显示悬浮窗内容：修改源码，使其可以在外部定义的而不是按需在源码内处理；像echarts一样进行外部处理，在tooltip中使用formatter函数
使用Hbuilder X 如何用u-charts（组件方式使用）
Mr_jioker的博客
11-20 923
/您可以通过修改 config-ucharts.js 文件中下标为 ['radar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts。2.新建uni_modules目录并且在uni_modules目录下面再新建qiun-data-charts目录，然后将刚才下载的插件里面的东西全部扔到qiun-data-charts目录里面去。categories: ["维度1","维度2","维度3","维度4","维度5","维度6"],//模拟从服务器获取数据时的延时。
ucharts-自定义添加tooltip显示项内容
qq_40348833的博客
09-16 2786
折线图tooltip点击的返回值：item, category, index, opts中没有想要展示的数据信息，想添加其他内容，就需要自己添加额外的信息用于展示。在opts的 extra 字段下面的 tooltip 字段中添加。（2）添加自定义format配置。添加一个自定义的format配置。单位数据，用于后面的展示。，就是我们自定义添加的。
qiun-data-charts uCharts的二次封装使用
weixin_56661895的博客
08-02 1927
qiun-data-charts uCharts的二次封装使用
u-charts利用tooltipFormat实现自定义tooltip
AAA123753的博客
05-22 2886
找的tooltipDemo1这个方法，这里面四个参数，自行去调试都代表那些数据，里面写上自己的渲染逻辑，你想自定义的内容，和item.data 用/拼接起来。首先给qiun-data-charts标签加上属性，tooltipFormat=“tooltipDemo1”，注意是字符串，不是动态属性。找到drawToolTip方法，这个方法是渲染tooltip的，只需要给他加上如下代码，就能显示成三行。这时候图表已经发生变化，我这里的需求是展示在第一行，具体根据自己的业务需求来。这时候再进入这个文件。
qiun-data-charts组件使用
qq_38810813的博客
03-15 1万+
uni-app开发APP的时候会有需要表格的需求 用echarts H5页面可以使用 但是app打包之后显示不出来 会一直报error的错误 所以后面换了一个 组件 这个组件APP和H5页面都能使用。 使用方法 先去插件商店直接导入到项目中 页面中引入 <qiun-data-charts type="column" :chartData="chartData" :ontouch="true"/> chartData:{ categories: ["01-01", ".
uniapp项目使用ucharts的tooltip（提示框）自定义的方法
weixin_70238655的博客
01-22 491
使用的话基础用法：<qiun-data-charts type="line" :opts="opts" :chartData="chartData">type：就是类型opts：配置chartData：就是数据<qiun-data-charts type="line" :opts="opts" :chartData="chartData" tooltipFormat="tooltipDemo1">找到下面的文件 config-ucharts.js这个就在config-ucharts.js文件里 搜form
ucharts tooltip自定义换行及自定义弹窗位置
weixin_44406888的博客
05-31 3871
ucharts tooltip自定义换行及自定义弹窗位置 以下通过条形图进行演示 <!-- 重点: 1. 绑定 @getIndex 事件 2. 绑定 canvasId --> <qiun-data-charts type="bar" :chartData="topChartData" :opts="topChartOpts" background="none" :inScrollView="true" :tapLegend="f
uni-app使用ucharts地图,自定义Tooltip鼠标悬浮显示内容并且根据@getIndex点击事件获取点击的地区下标和地区名
qq_45067263的博客
07-08 2562
uni-app使用ucharts地图,自定义Tooltip鼠标悬浮显示内容并且根据@getIndex点击事件获取点击的地区下标和地区名。
使用秋云图表qiun-data-charts微信小程序上反应为图表始终在最上层,且不会跟着页面滑动
m0_57087617的博客
05-13 931
秋云图表不随页面滚动问题
echarts之图例（tooltip）自定义
Smile_Gently的博客
12-06 452
【代码】echarts之图例（tooltip）自定义。
echarts 自定义tooltip样式
qq_37049251的博客
10-14 828
echarts 自定义tooltip样式 备份 在echarts文档中有个extraCssText可以进行自定义样式覆盖 最终效果图
qiun-data-charts 使用地图map图表
m0_68940359的博客
08-29 564
是一个用于微信小程序的图表库，它支持多种类型的图表，包括地图（Map）。准备好地图的相关数据，包括地图上每个区域的名称、经纬度等信息。以下是一个简单的例子，展示如何在微信小程序中使用。属性来定义地图上显示的数据和样式。确保已经在小程序项目中引入了。来指定使用地图图表。
ucharts图表tooltip自定义换行
細水、長流√的专栏
02-27 783
3.组件调用的时候有一个opts属性 :opts="{ extra: { tooltip: { tooltipArr: [ [ { text:"不显示左侧颜色块",color:null }, { text:"自定义内容1",color:null } ] ， [ { text:"不显示左侧颜色块",color:null }, { text:"自定义内容2",color:null } ] ] } } }"5.解释，ucharts接收的属性增加一个数组属性，判断值后改变textList项的显示，
qiun-data-charts（ucharts)自定义tooltip文本
09-30
Qiun-Data-Charts（uCharts）是一个基于轻量级的ECharts封装的图表库，它允许用户在创建图表时自定义tooltip（工具提示）。在uCharts中，你可以通过设置`series.tooltip.formatter`属性来自定义 tooltip 的内容和样式。 这个 formatter 函数接受当前鼠标悬停的数据点作为参数，并返回一个 HTML 字符串，该字符串会被显示在 tooltip 中。例如： ```javascript var option = { series: [{ name: '数据', type: 'line', data: ..., tooltip: { // 定义tooltip配置 trigger: 'item', // 指定触发类型 formatter: function (params) { // 自定义formatter函数 return '<span style="color:' + params.color + '">' + params.name + '</span>: ' + params.value; } } }] }; ``` 在这个例子中，当鼠标移动到某一点上，tooltip 将显示数据点名称和对应的值，颜色根据数据点的颜色设置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值