ucharts tooltip自定义换行及自定义弹窗位置

以下通过条形图进行演示

 <!-- 重点: 1. 绑定 @getIndex 事件 2. 绑定 canvasId-->
<qiun-data-chartstype="bar":chartData="topChartData":opts="topChartOpts"background="none":inScrollView="true":tapLegend="false":canvas2d="false"canvasId="canvas2dNeedIdbar1"@getIndex="showMyTooltip"
/>

import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js';
data() {topName: [],topChartData: {categories: [],series: [{name: "商品销售排名前10",data: [],}],},topChartOpts: {dataLabel: true,color: ["#0086F8"],xAxis: {disabled: true, // 不绘制X轴disableGrid: true,  // 不绘制纵向网格(即默认绘制网格)},extra: {tooltip: {// showArrow: false, // 去除箭头borderRadius: 5}},yAxis: {},},
}methods:{// 获取数据, 对y轴文字超长处理, 省略..., 后期通过tooltip 弹窗提示完整内容
async getData() {const req = new this.Request(api.GetGdsSaleTopOrBottom, id:1);const { data} = await req.fetch();var _monthDetail = data.ObjectData || [];_monthDetail.forEach(item => {var _name = item.c_name;// y轴文字过长 截取文字, ...省略展示if (_name.length > 6) {_name = _name.substring(0, 6) + '...';}this.topChartData.categories.push(_name);this.topChartData.series[0].data.push(item.c_at);this.topName.push( item.c_name);});
},
showMyTooltip(e) {console.log("获取点击索引事件",e);console.log("获取uCharts实例",uCharts.instance[e.id]);//uCharts.option[e.id]代表当前的图表的opts（除APP端，APP不可在组件外调用uCharts的实例）console.log("uCharts的option",uCharts.option[e.id]);//从option（opts）中获取数据let categories = uCharts.option[e.id].categories;let series = uCharts.option[e.id].series;//注意v2.1.2版本后，e.currentIndex是对象，而e.currentIndex.index是索引值，如果是时间轴图表，index在多个series的情况下会是数组let index = e.currentIndex.index;// 如果之前做了截取 可以通过text: this.topName[index]展示完整信息let textList = [{ text: categories[index], color: null }];for (let i = 0; i < series.length; i++) {textList.push({text: "销售额" + ": " + series[i].data[index], color: series[i].color})}uCharts.instance[e.id].showToolTip({ changedTouches: [e.event], // changedTouches:点击的坐标值, 可自定义位置[{x: 100, y: 10}]},{index: index, textList: textList});// #endif},
}

ucharts tooltip自定义换行及自定义弹窗位置相关推荐

Vue3 实现一个自定义toast（小弹窗）
前言: 前两天在项目中很多场景下都需要用到一个toast弹窗,项目使用的是ionic+tialwind_Css,ionic也有自带的toast弹窗,虽然大部分场景下直接调用它提供的api已经能满足需求 ...
ZZCustomAlertView - 一个高度自定义的iOS模态弹窗
2019独角兽企业重金招聘Python工程师标准>>> 这是一个可以高度自定义的iOS模态弹窗 (modal alert view). 项目地址:https://github.com ...
R语言ggplot2可视化：在ggplot2中将图例（legend）移到图内、自定义图例所处的位置、自定义图例背景、图例所处边框的颜色
R语言ggplot2可视化:在ggplot2中将图例(legend)移到图内.自定义图例所处的位置.自定义图例背景.图例所处边框的颜色目录
Seaborn在图像内自定义图例（legend）位置实战
Seaborn在图像内自定义图例(legend)位置实战目录 Seaborn在图像内自定义图例(legend)位置实战
latex表格内部自定义换行
latex表格内部自定义换行在使用latex表格时,有很多方法可以强制换行,但这大多数都是控制了每一列的宽度造成表格内容被迫换行,如果我想自定义表格内部的换行呢? 比如我想在表格内部分两行: 一种方 ...
在重新格式化时不要删除自定义换行符（Don‘t remove custom line breaks on reformat)
更新完idea为最新的2022.1版本后.如果连续使用格式化代码两次,就是帮我自动删除自定义换行符如何取消自动删除自定义换行符呢取消这个勾选即可
博图V17弹窗源程序釆用SCL自定义功能块，自定义数据类型
博图V17弹窗源程序釆用SCL自定义功能块,自定义数据类型,自定义面板实现主画面弹窗. 支持多设备快速编写程序. 提供本源程序的. ID:12200686249737766
Android弹出自定义Dialog,android自定义Dialog实现底部弹窗
android自定义Dialog实现底部弹窗拿到这个需求,很多人都是直接想用popWindow 实现,但是这样的效果我们完全可以根据系统的Dialog 自定义一个. AlertDialog.Buil ...
从自定义TagLayout看自定义布局的一般步骤[手动加精]
从自定义TagLayout看自定义布局的一般步骤[手动加精] 我们常用的布局有LinearLayout,FrameLayout,RelativeLayout,大多数情况下都能满足我们的需求,但是也有很 ...

ucharts tooltip自定义换行及自定义弹窗位置

ucharts tooltip自定义换行及自定义弹窗位置

以下通过条形图进行演示

ucharts tooltip自定义换行及自定义弹窗位置相关推荐

最新文章

热门文章