ucharts tooltip自定义换行及自定义弹窗位置
以下通过条形图进行演示
<qiun-data-charts
type="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,
disableGrid: true,
},
extra: {
tooltip: {
borderRadius: 5
}
},
yAxis: {},
},
}
methods:{
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;
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]);
console.log("uCharts的option",uCharts.option[e.id]);
let categories = uCharts.option[e.id].categories;
let series = uCharts.option[e.id].series;
let index = e.currentIndex.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],
},{
index: index,
textList: textList
});
},
}